Tutorial

Analytics Integration

Now that you've installed Granify and order tracking is implemented, you're ready to integrate your analytics. Granify sends two types of analytics data about shoppers:

  • Matching group
  • Message displayed

There are two options for the integrations outlined below: the preferred method where you get more accurate and instant access to analytics, and our alternative method where you can save on analytics requests to your servers.

The alternative method has the drawback of only setting your analytics data after the session's initial page load.

Matching Groups

This metric tracks whether the current shopper could be shown a message (Granify group), or not (baseline group).

Preferred Integration

A granifyEventGroupAssigned JavaScript function that you implement will be called by Granify at each page load and when a new session is started. This function should send the group information to your analytics.

/**
 * A function that will be called once the Granify event group has been assigned
 * 
 * @param {string} group The group the customer belongs to, either 'baseline' or 'granify'
 * @return {undefined|boolean} Return false if analytics information cannot be sent at the current time
 **/
window.granifyEventGroupAssigned = function(group) {
  // For example, for GA:
  dataLayer.push({
    granifyGroup: group,
  });
}

If the information cannot be sent at this time, returning false from this function will cause Granify to call it again after 500ms.

Alternative Integration

Granify will set a local storage value with the key of granify-analytics, the contents of which are outlined below:

window.localStorage.getItem('granify-analytics'); // '{"granifyGroup":"granify"}'

This will be returned as a string from local storage, and be available on all subsequent page loads. This group can then be sent with your standard analytics request in a new variable.

Message Displayed

This metric tracks when our engine decides to show a message to a shopper.

Preferred Integration

A granifyEventMessageShown function that you implement will be called by Granify whenever a shopper is shown a message (or would have been shown a message, if they were in the baseline group). The function should send the incoming message's details to your analytics.

/**
 * A function that will be called once a Granify message has (or would have) been shown to the customer.
 * 
 * @param {string} group Whether or not the message was shown, either 'message:shown' or 'message:notShown'
 * @return {undefined|boolean} Return false if analytics information cannot be sent at the current time
 **/
window.granifyEventMessageShown = function(messageShownNotShown) {
  // For example, for GA:
  dataLayer.push({
    granifyMessageType: messageShownNotShown
  });
}

If the information cannot be sent at this time, returning false from this function will cause Granify to call it again after 500ms.

Alternative Integration

window.localStorage.getItem('granify-messages'); // '{"granifyMessageType":"message:shown"}'

This will be returned as a string from local storage and be available on all subsequent page loads. This can then be sent with your standard analytics request in a new variable.

Next: Tracking Cart State