Track the User Journey

In this section we will go through the regilyUpdateCallback which is emitted after each step of the registration process. It can be used to track and validate data throughout the user journey.

regilyUpdateCallback

Communication between the iFrame and the client side is handled via JavaScript callbacks. During the registration process, a regilyUpdateCallback is emitted after each step the user goes through.

The callback will always contain two sets of data.

• data contains all information entered by the user up until any given point.
  This data can be found in the normalized structures data.user, user.credentials and data.consent.

• dataDiff is the delta of data and contains what field was entered or changed in the previous step.

Why

With regilyUpdateCallback you will always have the latest data the user has typed in. This can be used to validate data as the user is going through the registration, for internal tracking purposes, or to re-target customers who drop off.

For more in-depth information, see the sections below on each topic.

How

In order to capture a regilyUpdateCallback and read the data, you need to set up a listener.

If you want to run validations on your end, the callback should be handled as a promise where a reject will display an error towards the user.

A regilyUpdateCallback does not need to be explicitly resolved in order for the user to proceed to the next step.

// Listen to all updateCallbacks and print the dataDiff
Object.defineProperty(window, "regilyUpdateCallback", {
  value: function(data, dataDiff) {
    console.log("updated data", dataDiff)
		// This is where you can run validations, track the process or save the data for re-targeting
    }
  }
})

📘

Do you want to take a look at the data structures?

The data and dataDiff of every regilyUpdateCallback will be printed in the developer's console after each step of the registration process

Validate user data and throw an error

The Checkin.com Framework performs a number of validations by default. These validations include, amongst others, quality of email and in-line format validations.

It is also recommended to validate the user data throughout the sign-up process. Validations will be handled asynchronously to guarantee the best possible experience for as many users as possible.

By evaluating the fields in dataDiff you will be able to run the correct validations. The code example below shows how you can validate the email address once the user has entered it (by checking for the existence of dataDiff.credentials.email).

📘

Want to dig deeper into error handling?

The Checkin.com Framework offers four pre-defined errors, but the content of the messages can also be fully customized. For more in-depth details on error handling, see the error section

// Listen to all update events and do back-end calls for the steps where it is needed. 
// Validations must return a promise.
Object.defineProperty(window, "regilyUpdateCallback", {
  value: function(data, dataDiff) {
    console.log("updated data", dataDiff)
    if (dataDiff.credentials && dataDiff.credentials.email) {
      // The email has been updated and validation will be triggered
      return checkUserEmail({email: dataDiff.credentials.email})
    }
    else{
      return Promise.resolve()
    }
  }
})

// An example function to validate an email 
// AXIOS, jquery or other senders works as well.
function checkUserEmail(data) {
  return new Promise(function(resolve, reject) {
    const email = data.email
    // Passing email
    if (email) {
      const url = 'https://www.yoursite.com/emailValidationEndpoint'
      axios.get(url, {
        params: { email }
      })
      .then(data => {
        if (data.isValid === true) {
         // The email is available. Resolving the promise
          resolve()
        } else {
          // The email is already taken and the  promise is rejected with pre-defined errorName duplicateAccount
          var errorMessage = 'Email is already in use'
          var errorName = 'duplicateAccount'
          var error = new Error(errorMessage)
          error.name = errorName
          reject(error)
        }
      })
      .catch(e => reject(e))
    } else {
      resolve()
    }
  })
}

Tracking and Re-targeting

Tracking
The regilyUpdateCallback can also be used to track the user journey and for re-targeting users who do not complete the registration.

By always keeping track of the dataDiff, you will know exactly which step the user just finished and send corresponding events to your internal tracking system.

There is also a full section on internal tracking with extensive examples on how to track the registration flow from beginning to end and post it to a tool such as Google Analytics.

📘

Don't have any internal tracking system?

No worries - the Checkin.com Framework has automated tracking and reports with key metrics which will be shared with you on a regular basis.

Re-targeting
In the objects data.user and data.credentials you will be able to find all the information the user has entered so far in the registration process. By using this you will be able to store all the data you need for re-targeting customers who do not complete the full registration.