Insightech and Optimizely

Overview

Optimizely is a leading solution for developers to help build and perform A/B testing campaigns. It is extremely effective in measuring success based on key success metrics predetermined by the user.

This integration will allow users access dynamic click map tools from Insightech to filter out data based on a range of specific conditions and segments, including A/B testing experiences.

This allows marketers and designers to understand how each experience impacts the success metrics and also how it drives different user behaviors for better iterative design.

This document covers:

• How to set up the Optimizely integration for your website
• How to test this Optimizely integration with Insightech
• How to build segments with this integration

Setting up Optimizely with Google Tag Manager

Use the dataLayer code snippet to enable information to pass through from your website into Google Tag Manager (GTM). Once this is done, Optimizely data will automatically be pulled into Insightech for your use. For more information on checking your Insightech dataLayer tracking, click here.

Step 1 - Configure Optimizely for Web Experimentation in GTM

In order to get started, you would need to add the following script as a custom HTML tag through the process that is shown below:

• Navigate to Workplace → Tag → New.

  

• Enter Optimizely Integration Code in the Untitled Variable field.

  

• Click Tag Configuration and select Custom HTML.

• Copy the code below and paste it into the HTML field. Choose the correct code based on whether you are using Optimizely Web Experimentation, or Optimizely Performance Edge.

If you are using Optimizely Web Experimentation, use the following code:

<script>
  var DATALAYER_OBJECT_NAME = 'dataLayer';

  /**
  * Some analytics platforms have the ability to fix referrer values by overriding the page referrer value.
  * This function is called when a redirect has occurred on the previous page.
  * @param {string} referrer - The effective referrer value
  */
  var referrerOverride = function(referrer) {
    var dataLayerObject = window[DATALAYER_OBJECT_NAME] || [];
    dataLayerObject.push({
      'event': 'optimizely-referrer-override',
      'optimizely-referrer': referrer
    });
  };

  /**
  * Used for experiments created in Optimizely Web Experimentation. This function is executed for all
  * experiments that are running on the page. Use the arguments to send data to your platform.
  * @param {string} campaignId - The ID of a campaign that is running on the page
  * @param {string} integrationString - Integration string for a particular campaign
  */
  var sendCampaignData = function(campaignId, integrationString) {
    var dataLayerObject = window[DATALAYER_OBJECT_NAME] || [];
    dataLayerObject.push({
      'event': 'optimizely_decision_web',
      'optimizely_experiment': integrationString.experiment,
      'optimizely_variant': integrationString.variation
    });
  };

  var initNewOptimizelyIntegration = function(referrerOverride, sendCampaignData) {
    var referrerOverwritten = false;
    var newActiveCampaign = function(id) {
      var state = window['optimizely'].get && window['optimizely'].get('state');
      var referrer = state.getRedirectInfo() && state.getRedirectInfo().referrer;
      if (!referrerOverwritten && referrer) {
        referrerOverride(referrer);
        referrerOverwritten = true;
      }
      var campaignId = id;
      var integrationString = state.getDecisionObject({'campaignId': campaignId});
      sendCampaignData(campaignId, integrationString);
    };

    var registerFutureActiveCampaigns = function() {
      window.optimizely = window.optimizely || [];
      try {
        window.optimizely.push({
          type: 'addListener',
          filter: { type: 'lifecycle', name: 'campaignDecided' },
          handler: function(event) {
            var id = event.data.campaign.id;
            newActiveCampaign(id);
          }
        });
      } catch(error) {
        console.log('Something went wrong, this error can occur if there is a client side SDK which overwrites the optimizely object.');
      }
    };

    var registerCurrentlyActiveCampaigns = function() {
      var state = window['optimizely'] && window['optimizely'].get && window['optimizely'].get('state');
      if (state) {
        var activeCampaigns = state.getCampaignStates({ isActive: true });
        for (var id in activeCampaigns) {
          newActiveCampaign(id);
        }
      }
    };

    registerCurrentlyActiveCampaigns();
    registerFutureActiveCampaigns();
  };

  var initOptimizelyIntegration = function(referrerOverride, sendCampaignData) {
    initNewOptimizelyIntegration(referrerOverride, sendCampaignData);
  };

  initOptimizelyIntegration(referrerOverride, sendCampaignData);
</script>

If you are using Optimizely Performance Edge, use the following code:

<script>
  var DATALAYER_OBJECT_NAME = 'dataLayer';

  /**
  * Some analytics platforms have the ability to fix referrer values by overriding the page referrer value.
  * This function is called when a redirect has occurred on the previous page.
  * @param {string} referrer - The effective referrer value
  */
  var referrerOverride = function(referrer) {
    var dataLayerObject = window[DATALAYER_OBJECT_NAME] || [];
    dataLayerObject.push({
      'event': 'optimizely-referrer-override',
      'optimizely-referrer': referrer
    });
  };

  /**
  * Used for experiments created in Optimizely Performance Edge. This function is executed for all
  * experiments that are running on the page.
  * @param {string} campaignId - The ID of a campaign that is running on the page
  * @param {string} integrationString - Integration string for a particular campaign
  */
  var sendCampaignData = function(campaignId, integrationString) {
    var dataLayerObject = window[DATALAYER_OBJECT_NAME] || [];
    dataLayerObject.push({
      'event': 'optimizely_decision_web',
      'optimizely_experiment': integrationString.name,
      'optimizely_variant': integrationString.variation.name
    });
  };

  var initNewOptimizelyIntegration = function(referrerOverride, sendCampaignData) {
    var referrerOverwritten = false;
    var newActiveCampaign = function(id) {
      var state = window['optimizelyEdge'].get && window['optimizelyEdge'].get('state');
      var referrer = state.getRedirectInfo() && state.getRedirectInfo().referrer;
      if (!referrerOverwritten && referrer) {
        referrerOverride(referrer);
        referrerOverwritten = true;
      }
      var activateCampaigns = state.getActiveExperiments();
      var integrationString = activateCampaigns[id];
      sendCampaignData(campaignId, integrationString);
    };

    var registerFutureActiveCampaigns = function() {
      window.optimizelyEdge = window.optimizelyEdge || [];
      try {
        window.optimizelyEdge.push({
          type: 'addListener',
          filter: { type: 'lifecycle', name: 'campaignDecided' },
          handler: function(event) {
            var id = event.data.campaign.id;
            newActiveCampaign(id);
          }
        });
      } catch(error) {
        console.log('Something went wrong, this error can occur if there is a client side SDK which overwrites the optimizely object.');
      }
    };

    var registerCurrentlyActiveCampaigns = function() {
      var state = window['optimizelyEdge'] && window['optimizelyEdge'].get && window['optimizelyEdge'].get('state');
      if (state) {
        var activeCampaigns = state.getActiveExperiments();
        for (var id in activeCampaigns) {
          newActiveCampaign(id);
        }
      }
    };

    registerCurrentlyActiveCampaigns();
    registerFutureActiveCampaigns();
  };

  var initOptimizelyIntegration = function(referrerOverride, sendCampaignData) {
    initNewOptimizelyIntegration(referrerOverride, sendCampaignData);
  };

  initOptimizelyIntegration(referrerOverride, sendCampaignData);
</script>

Note - If you want to send campaignData as well, you can add it to the sendCampaignData function in the script. This is also where you can adjust the dataLayer.push to any naming convention you prefer.

• Click Save for your custom tag in GTM

Now that your tag has been saved (based on whether you are using Optimizely Web Experimentation or Optimizely Performance Edge), your Optimizely attributes will be pushed into your website dataLayer.

Once the Insightech tracking code is placed into your website's header, and you have set it up to collect your dataLayer (Optimizely data), you will begin to see your Optimizely data in Insightech.

Step 2 - Test the Optimizely Integration with Insightech

To test whether the code implementation is working correctly with Insightech, you should create a specific segment in Insightech to bucket users with a specific (active) Optimizely experience based on your dataLayer.

Below are different segments based on Optimizely dataLayer attributes:

• Optimizely Experiment

• Optimizely_cd

• Optimizely Variant

Click here for more information on setting up your dataLayer in Insightech.

What your datalayer object might look like - Example

You can find the Event Name, EventID, as well as the Optimizely Experiment in the dataLayer object once the code is implemented as the following screenshot shows.

Each userID (e.g. 24232740142) is unique based on the experience that they've had on your website. In order to test for the working integration, create a segment for a user based on the data found from the Optimizely script data and Insightech.