Add Internal Tracking

In this section, you will learn how you can use the Checkin.com callbacks to track the user journey for internal purposes.

After each completed step of the registration process, the module emits a callback with the updated data. These callbacks can be used to track the progress and behavior of registrations.

The EventCallbacks can be used to track the start and end of a registration.
The dataDiff value in UpdateCallbacks can be used to track the user journey within the flow.
The DoneCallbacks can be used to track the completion of the sign-up.

📘

Don't have any internal tracking system?

No worries - the Checkin.com Framework has automated tracking built-in! Reports with key metrics will be shared with you on a monthly basis.

Example of how to track a registration from beginning to end

The example below shows how to track a full registration and send events to Google Analytics.

The example uses all three callback types and a method called sendCheckinAnalyticsEvent to process the events and send them to Google Analytics.

Documentation on how to store to back end and perform intermediate validations are detailed in Integrate Checkin.com in 3 Quick Steps.

Object.defineProperty(window, 'regilyUpdateCallback', {
  value: function (data, dataDiff) {
    return new Promise(function (resolve, reject) {
      console.log('New data collected:', dataDiff)
      
      // Loop collected Data properties and send to Analytics
      for (let property in dataDiff) {
        for (let key in dataDiff[property]) {
          if (key === 'doneChapter' && dataDiff[property][key]) {
            //Chapters are specific dividers in the flow to track progress
            sendCheckinAnalyticsEvent('event', 'chapterDone', dataDiff[property][key])
          } else if (dataDiff[property][key] && dataDiff[property][key] !== '') {
            sendCheckinAnalyticsEvent('event', 'collectedData', key)
          }
        }
      }
      
      resolve()
    })
  }
})

Object.defineProperty(window, 'regilyDoneCallback', {
  value: function (data) {
    return new Promise(function (resolve, reject) {
      console.log('End of signup, All data collected')

      //Store before save
      sendCheckinAnalyticsEvent('event', 'signupDone', 'Received all data')

      //Store to backend here....

      //Store after successful save
      sendCheckinAnalyticsEvent('event', 'signupDone', 'Saved to backend')
      resolve()
    })
  }
})

Object.defineProperty(window, 'regilyEventCallback', {
  value: function (eventMessage) {
    return new Promise(function (resolve, reject) {
      //Open and close events are sent as "regilyEventCallback"
      sendCheckinAnalyticsEvent('event', 'signupShown', eventMessage.action)
      resolve()
    })
  }
})

function sendCheckinAnalyticsEvent(hitType, action, label) {
  // Example for Google Analytics
  const gaEvent = {
    hitType: hitType,
    eventCategory: 'Checkin.comSignup',
    eventAction: action,
    eventLabel: label
  }
  // Send event to google
  ga('send', gaEvent)
  // debug printout
  console.log(JSON.stringify(gaEvent))
}

Result example

Here is an example session and the corresponding events sent to Google Analytics.

{"hitType":"event","eventCategory":"RegilySignup","eventAction":"signupShown","eventLabel":"open-module"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"email"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"password"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"chapterDone","eventLabel":"chapter1"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"phone"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"phoneE164"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"phoneWithoutPrefix"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"phonePrefix"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"chapterDone","eventLabel":"chapter2"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"firstName"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"lastName"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"fullName"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"gender"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"country"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"postalCode"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"city"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"streetName"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"houseNumber"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"nationality"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"birthdate"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"personal"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"birthdate"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"profiling"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"birthdate"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"collectedData","eventLabel":"consent"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"chapterDone","eventLabel":"chapter3"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"signupDone","eventLabel":"Received all data"}
{"hitType":"event","eventCategory":"RegilySignup","eventAction":"signupDone","eventLabel":"Saved to backend"}