Office workers around a table

Optimizely + Google Analytics Integration Using Google Tag Manager and the Data Layer

Tyson Kirksey  |  March 12, 2014

Optimizely + Google Analytics

Optimizely, our favorite A/B testing tool, has a terrific built-in integration with Google Analytics that can be easily turned on in the Experiment Settings menu, as seen below. If you are using the Classic, asynchronous version of Google Analytics and you have implemented Optimizely and Google Analytics in the standard positions, this should work great for you. 

 

 

 

However, many organizations are moving their GA code inside of a container tag using something like Google Tag Manager (which we recommend highly). There are many benefits to moving tags off the page and into a tag management system, but one of the drawbacks is that Optimizely does not at this time support an integration with Google Tag Manager.

So...sorry for the bad news, there is nothing that can be done. Hah! Just kidding! See all this text below...of course I'm going to show you how to easily pull Optimizely experiment information into Google Tag Manager so you can insert it into Google Analytics (and even Universal Analytics) using custom variables, event tags or custom dimensions! (You knew I wouldn't let you down, right?)

The great news is that Optimizely has a robust JavaScript API that can be easily accessed using some simple JavaScript code. 

GTM Tag to Pull Active Experiment Data

In Google Tag Manager using a Custom HTML tag, we can easily find out if the visitor is included in any active experiments. The variable window['optimizely'].data.state.activeExperiments is an array of all of the active experiments that a visitor is included in. So the first thing we want to do in our Custom HTML tag is determine if this variable contains any information. If it does, then we go on to pull in specific information about the experiments and variations. 

Now that we have any active experiment IDs, we can pull the experiment names using the window['optimizely'].data.experiments[experimentId].name variable. So we'll loop through and grab those experiment names.

Now, the only thing left is getting the experiment variation names. This is simple also, and follows the same process using window['optimizely'].data.state.variationNamesMap variable.

Here is the code for the Custom HTML tag so far:

Now that we know all that great stuff about what Optimizely is doing, we simply need to send that data into the GTM DataLayer and then it's available to be used in tags, macros, etc.. 

Here is the full code for the Custom HTML tag you need:

<script>

if(window['optimizely'].data.state.activeExperiments.length > 0)

{

var index;

var exp_name;

var exp_variation;

var exp_id;

var var_id;

//loop through all active experiments

for (index=0;index < window['optimizely'].data.state.activeExperiments.length; ++index) {

//get active experiment and variation names and IDs

exp_id = window['optimizely'].data.state.activeExperiments[index];

exp_name = window['optimizely'].data.experiments[exp_id].name;

exp_variation = window['optimizely'].data.state.variationNamesMap[exp_id];

var_id = window['optimizely'].data.state.variationIdsMap[exp_id];

//push info to dataLayer

dataLayer.push({'event':'set-optimizely',

'experiment-name':exp_name,

'experiment-id':exp_id,

'variation-name':exp_variation,

'variation-id':var_id

});

}

}

</script>

 

Now, to use this data we'll need to create some macros in Google Tag Manager that allow us to access the data layer variables and put them in tags. You'll need one macro for each of the four variables (experiment-name, experiment-id, etc..).  Here's how that looks:

 

 

Now it's easy to add a macro to a tag. Here's an example of Custom Variable (on the back of an Event) with the Optimizely information:

 

 

So there you have it! If you use Google Tag Manager and Optimizely (two of our favorite tools!), you can now easily integrate the two. 

One last clarifying note: I am not recommending implementing Optimizely through Google Tag Manager. The best placement is very high on the page in the section. If you do want to try Optimizely through GTM, please read our post, Specifying Tag Execution Order with Google Tag Manager.


Tyson Kirksey headshot

Tyson Kirksey

Tyson began working in the SEO field in 2003, when tags really mattered and Yahoo! nearly bought Google (oops!). Along with his vast experience in search engine optimization, Tyson has knowledge of programming and web development. He has successfully managed high-profile accounts including LaQuinta Hotels, Compass Bank, Pizza Hut and MetroPCS. He is certified with Google Analytics, Google AdWords and Microsoft AdCenter. He is a graduate of Harding University with a bachelor’s in Interactive media. In his spare time, he enjoys spending time with his family and playing golf.

Become a Nerd

Sign up to receive tips and updates about all things digital marketing.

Leave a Comment