Custom HTML Tag for Optimizely UA/GTM Integration

optimizely_integration.js

<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 occured 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 'new Optimizely'. This function is executed for all
 * experiments that are running on the page. Use the arguments to send data to your platform.
 *
 * @param {string} campaignName - The name of a campaign that is running on the page
 * @param {string} campaignId - The ID of a campaign that is running on the page
 * @param {string} audienceNames - The names of all the audience the visitor is considered part of related to this campaign
 * @param {string} audienceIds - The names of all the ids the visitor is considered part of related to this campaign
 * @param {string} variationName - The name of the experiment the user is seeing. Frequently, a name is only available for the campaign
 * @param {string} variationId - The ID if the experiment the user is seeing 
 * @param {string} variationName - The name of the variation the user is seeing
 * @param {string} variationId - The ID if the variation the user is seeing 
 * @param {boolean} inHoldback - If true, the visitor has not been exposed to this variation, but is kept in a holdback
 *   which is a sample of the visitor that isn't exposed so that Optimizely can calculate the impact of a campaign.
 */
var sendCampaignData = function(
  campaignName,
  campaignId,
  audienceNames,
  audienceIds,
  experimentName,
  experimentId,
  variationName,
  variationId,
  inHoldback
) {
  var dimension = optimizely.get('data') && optimizely.get('data').campaigns[campaignId] && optimizely.get('data').campaigns[campaignId].integrationSettings && optimizely.get('data').campaigns[campaignId].integrationSettings.google_universal_analytics && optimizely.get('data').campaigns[campaignId].integrationSettings.google_universal_analytics.universal_analytics_slot;
  
  
  if (dimension) {
    var campaign = campaignName ? campaignName + '(' + campaignId + ')' : campaignId;
    var audience = audienceNames.join(',');
    var experiment = experimentName ? experimentName + '(' + experimentId + ')' : audience + '(' + experimentId + ')' ;
    var variation = variationName ? variationName + '(' + variationId + ')' : variationId;
    var holdback = inHoldback ? 'holdback' : 'treatment';

    var customVariableValue = [campaign, experiment, variation, holdback].join(':');
    var dataLayerObject = window[DATALAYER_OBJECT_NAME] || [];
    dataLayerObject.push({
      'event': 'campaign-decided', 
      'optimizely-dimension-value': customVariableValue,
      'optimizely-dimension-number': dimension
    }); 
  }
};

/**
 * This function fetches all the campaign data from the new Optimizely client
 * and calls the functions provided in the arguments with the data that needs to
 * be used for sending information. It is recommended to leave this function as is
 * and to create your own implementation of the functions referrerOverride and 
 * sendCampaignData.
 *
 * @param {Function} referrerOverride - This function is called if the effective referrer value differs from
 *   the current document.referrer value. The only argument provided is the effective referrer value. 
 * @param {Function} sendCampaignData - This function is called for every running campaign on the page. 
 *   The function is called with all the relevant ids and names. 
 */
var initNewOptimizelyIntegration = function(referrerOverride, sendCampaignData) {
  // There can only be one effective referrer on a page. This boolean makes sure the 
  // redirect overwrite only happens once. Multiple referrerOverwrites might result in undesired behavior. 
  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 activeCampaigns = state.getCampaignStates({
      isActive: true
    });
    var campaignState = activeCampaigns[id];

    var campaignName = campaignState.campaignName;
    var campaignId = id;
    var audienceNames, audienceIds;
    if (campaignState.audiences.length > 0) {
      audienceNames = campaignState.audiences.map(function(audience) {
        return audience.name
      });
      audienceIds = campaignState.audiences.map(function(audience) {
        return audience.id
      });
    } else {
      audienceNames = ['everyone_else'];
      audienceIds = [0];
    }
    var experimentName = campaignState.experiment.name;
    var experimentId = campaignState.experiment.id;
    var variationName = campaignState.variation.name;
    var variationId = campaignState.variation.id;
    sendCampaignData(
      campaignName, 
      campaignId, 
      audienceNames, 
      audienceIds,
      experimentName,
      experimentId,
      variationName, 
      variationId, 
      campaignState.isInCampaignHoldback
    );
  };

  /**
   * At any moment, a new campaign can be activated (manual or conditional activation). 
   * This function registers a listener that listens to newly activated campaigns and 
   * handles them. 
   */
  var registerFutureActiveCampaigns = function() {
    window.optimizely = window.optimizely || [];
    window.optimizely.push({
      type: 'addListener',
      filter: {
        type: 'lifecycle',
        name: 'campaignDecided'
      },
      handler: function(event) {
        var id = event.data.campaign.id;
        newActiveCampaign(id);
      }
    });
  };
  
  /**
   * If this code is running after Optimizely on the page, there might already be
   * some campaigns active. This function makes sure all those campaigns are 
   * handled. 
   */
  var registerCurrentlyActiveCampaigns = function(){
    var state = window['optimizely'].get && window['optimizely'].get('state');
    if (state) {
      var activeCampaigns = state.getCampaignStates({
        isActive: true
      });
      for (var id in activeCampaigns) {
        newActiveCampaign(id);
      }
    }
  };
  
  registerCurrentlyActiveCampaigns();
  registerFutureActiveCampaigns();
};

/**
 * A wrapper around the logic for both the classic and new Optimizely integration. 
 * @param {Function} referrerOverride - This function is called if the effective referrer value differs from
 *   the current document.referrer value. The only argument provided is the effective referrer value. 
 * @param {Function} sendExperimentData - This function is called for every running experiment on the page. 
 *   The function is called with all the relevant ids and names. Used for classic Optimizely. 
 * @param {Function} sendCampaignData - This function is called for every running campaign on the page. 
 *   The function is called with all the relevant ids and names. Used for new Optimizely. 
 */
var initOptimizelyIntegration = function(referrerOverride, sendCampaignData) {
  initNewOptimizelyIntegration(referrerOverride, sendCampaignData);
}

initOptimizelyIntegration(referrerOverride, sendCampaignData);

</script>

Is the above code newer than the code on this documentation page?

This code throws an error on pages which do not have Optimizely implemented on them.

On line 150, window['optimizely'].get fails if window['optimizely'] does not exist. Changing the line to the following resolves this:

var state = window['optimizely'] && window['optimizely'].get && window['optimizely'].get('state');

The two code examples are the same, I ran them through diffchecker