How to integrate Optimizely with GTM & Universal Analytics

If you want to integrate your Optimizely experiment and variation data with Google’s Universal Analytics via Google Tag Manager, you will soon see that the official documentation assumes a custom‑coded implementation. It then instructs you to edit your GA pageview tag directly. If you are using Google Tag Manager, then you obviously will not want to follow this guidance as you probably have the Google Analytics pageview tag in a tag template. It is always advisable to keep custom JavaScript and HTML tags to a minimum, and using the built-in Google Analytics pageview tag template. Moreover, the integration suggested by Optimizely requires a new Custom Dimension slot for each experiment, which can quickly exhaust your available slots and requires setup before each experiment which can often be overlooked.

However, there is a better way! With the approach detailed below, you don’t need to customise any tag templates in Google Tag Manager, nor will you have to remember to set up Custom Dimensions in Google Analytics before every experiment. This approach uses Event tracking for all the Optimizely experiments in Google Analytics which can then be used throughout your Google Analytics reports.

So how do we send experiment information from Optimizely into Universal Analytics using Google Tag Manager?

(This is the tech bit, so jump to step 1 below if you just want to get to the integration bit!)

Firstly, let’s explain the “integration” script that Optimizely provide and ask you to use:

window.optimizely = window.optimizely || []; window.optimizely.push("activateUniversalAnalytics");

The first line here looks for the existing global variable, named “optimizely” and sets it to an empty array if it doesn’t exist. Nothing too unusual there as this is created if you are running Optimizely, having inserted the required Optimizely script tag they supply (e.g. <script src="//cdn.optimizely.com/js/123456789.js"></script>) at the top of your head in the html of your page.

The second line causes the appropriate experiment and variation data from Optimizely to be exposed and (where appropriate) custom dimensions to be set (not sent).

The official documentation from Optimizely describes how you may insert this “activation” between the lines of code in your Google Analytics script where the tracker is initialised and the pageview hit is made. However, if you’re using a pageview template, you will not be able to make such an edit. Instead, we need to do the “activation” and then send an event to Google Analytics with the relevant Optimizely experiment data (as a Custom Dimension too, if you like) by using a sequenced Cleanup Tag in the tag template.

Step 1)

Add the following code as a new tag of type “Custom HTML” in GTM and name it “JS - cleanup - Optimizely”):<p>window.optimizely = window.optimizely || [];<br> window.optimizely.push(&quot;activateUniversalAnalytics&quot;); <br> if (window.optimizely.data !== undefined) {<br> var oData = window.optimizely.data;<br> var activeExperiments = oData.state.activeExperiments;<br> if (oData.state.activeExperiments &amp;&amp; oData.state.activeExperiments.length) {<br> activeExperiments = oData.state.activeExperiments;<br> var mCnt = activeExperiments.length;<br> var mExp = '';<br> var tCount = 0;<br> for (var i=0;i&lt;(mCnt);i++) {<br> mExp = activeExperiments[i];<br> var curTest = oData.experiments[mExp].name;<br> var curVar = oData.state.variationNamesMap[mExp];<br> var curVarID = oData.state.variationIdsMap[mExp];<br> tCount += 1;<br> dataLayer.push({<br> 'event': 'optimizely',<br> 'eventCategory': 'Optimizely',<br> 'eventAction': 'Experiment &quot;' + curTest + '&quot; | ID: ' + mExp,<br> 'eventLabel': 'Variation &quot;' + curVar + '&quot; | ID: ' + curVarID<br> });<br> }<br> }<br> }<br>
NOTE: Although Google Tag Manager will prompt you to add a firing trigger, save the tag with none.

Step 2)

The new tag created in step 1 will push the Optimizely data into a data layer, so we will then need to create the corresponding Variables in Google Tag Manager. Here we have used the standard Google dataLayer taxonomy, so if you already have these variables saved, you can skip this step!

There are 4 variables that will need to be created, all with the type of "Data Layer Variable":

• dataLayer.eventCategory (Data Layer Variable Name = eventCategory)
• dataLayer.eventAction (Data Layer Variable Name = eventAction)
• dataLayer.eventLabel (Data Layer Variable Name = eventLabel)
• dataLayer.eventValue (Data Layer Variable Name = eventValue)

Step 3)

Now in your Google Analytics pageview template tag, go to the Tag Sequencing part and select to fire a Cleanup Tag it fires and choose the “JS - cleanup - Optimizely” HTML tag you've just created in step 1:

Step 4)

Lastly, we then need to actually send the Optimizely experiment variation into Google Analytics as an Event. Now create a new Google Analytics Event template tag and also create a new Trigger to fire on the “optimizely” data layer event trigger. Then add the new Variables you've just created in step 2 in their respective fields for the Event:

Step 5)

Preview the changes and test on your site. If everything is working, then you're good to publish!

Step 6)

Sit back and watch the data roll in!

Here’s a better way to integrate Google Analytics with Optimizely, using Google Tag Manager.