Part 2: Integrating Optimizely with Google Tag Manager

We recently blogged about Integrating Optimizely with Google Analytics and now we’re following up the series with a post on integrating Optimizely with Google Tag Manager. If you are stuck trying to figure out a way to 'update the tracking code' and start seeing your Optimizely data flow into Google Analytics then read on to find out how Google Tag Manager can help.

Option 1 (basic solution): use a Custom HTML tag

Getting a basic Optimizely integration with Google Analytics is easy using Google Tag Manager. Rather than using Google Tag Manager's built-in Google Analytics tag, create a Custom HTML tag and paste the Google Analytics tracking code with extra lines for the Optimizely integration. Add a trigger to fire on all pages and you're set!

You've now integrated Optimizely with Google Analytics using Google Tag Manager. However, if you're a Google Tag Manager purist like we are, and prefer to use the built-in Google Analytics tag, then the above solution will not work. So what else can you do?

Option 2 (better solution): use the data layer

The data layer is a snippet of JavaScript code that is used to pass information from your website into Google Tag Manager. You can then create tags and triggers that use this information. Google Tag Manager will always create a data layer even if you are not using one on your website. Passing information from Optimizely to Google Analytics is a really neat way of using the data layer. Here's how it's done:

1. Set up a custom dimension in Google Analytics

First, you need to create a custom dimension, just like the one we showed in part one of this blog series.

2. Configure Optimizely

To get started in Optimizely, open the editor for each experiment you want to integrate with Google Analytics via the data layer, then open the 'Options' menu just above the visual editor and select 'Experiment JavaScript'. In the text area, paste the following JavaScript code – then click 'Apply'.

dataLayerIntegration = function(experiment, variation, index){ var dataLayer = window.dataLayer || [];

dataLayer.push({ "event" : "optimizely integration", "optimizely cd" : index, "optimizely experiment" : experiment + ": " + variation }); }

Take note of 'event', 'optimizely cd' and 'optimizely experiment' properties, which will be important later when you set up Google Tag Manager. Here's how it should look:

TIP: If you're on an Enterprise Plan, you should consider pasting the JavaScript in the 'Project JavaScript' instead. This will allow you to upload the code just once, without needing to edit the Experiment JavaScript for each individual experiment. To set this up, return to the project home page and select the 'Settings' tab, then open the 'JavaScript' subtab and paste the code in the 'Project JavaScript' and finally click 'Save' to apply.

So far, you've defined the dataLayerIntegration function in either the Experiment or Project JavaScript. Now, you will need to go into each variation of your experiment and invoke the function.

Open the editor for each experiment and then for every variation click on 'edit code' at the bottom right of the editor to bring up the variation code of your experiment. Add a new line to the code to invoke the dataLayerIntegration function.

dataLayerIntegration(experiment, variation, index);

Substitute experiment, variation and index with the name of your experiment, the variation of the page and the index of the Google Analytics custom dimension. For example, your Home page banner test has two variations and will be tracked into the custom dimension index 1 – the code should look like:

For original page:

For variant page:

3. Integrate Google Tag Manager

Now that you have the data layer set up in Optimizely, you will need to create two user-defined variables in Google Tag Manager to extract the custom dimension index and the experiment variation. Setting this up is fairly simple:

1. Log in to your Google Tag Manager account
2. Select the container used on your website
3. Open the 'Variables' menu and under 'User-Defined Variables' click 'New'
4. Select the 'Data Layer Variable' type and in the 'Data Layer Variable Name' field type in 'optimizely cd' exactly as it is named in the data layer
5. Click 'Create Variable', name your variable and click 'Save'
6. Repeat for the 'optimizely experiment' property in the data layer

You will also need to create a trigger to fire your Google Analytics tag after the Optimizely data layer has loaded. To do this:

1. Click on the 'Triggers' menu and click 'New'
2. Select 'Custom Event'
3. Enter 'optimizely integration' in the 'Event name'
4. Click 'Create Trigger', name your trigger and click 'Save'

Now that you've come this far, it's time to set up your Google Analytics tag to send the Optimizely data to Google Analytics. In addition to your existing pageview tag, you're now going to create another Google Analytics tag.

1. This time under 'Track Type' select 'Event'
2. Enter 'optimizely' and 'integration' under the 'Category' and 'Action' tracking parameters respectively
3. Set the value of 'Non-Interaction Hit' to 'True' so that this event doesn't affect your website's bounce rate
4. Now, expand the 'More settings' dropdown menu, expand the 'Custom Dimensions' submenu and click 'Add Custom Dimension'
5. Press the '+' button next to 'Index' and 'Dimension Value' and select the 'optimizely cd' and 'optimizely experiment' variables respectively
6. Apply the 'optimizely integration' trigger that you created earlier, name your tag and then click 'Create Tag'

Your completed tag should look like this:

And that's it! You now have Optimizely integrated with Google Tag Manager. Not only are you able to complete the integration with Google Analytics, but having your Optimizely experiment captured in the data layer and your user defined variables will now give you the capability to integrate Optimizely with any other third-party tags you may be using on your website.

Caveats

You may be wondering, “Why do I have to create a Google Analytics event tag? Why can't I just use my Pageview tag?” You're right, you can use your pageview tag, but it will require more effort to set this up. In order to set this up effectively, you will have a few things to consider: pages where an experiment is running; pages that don't have experiments running; and page load time, because the pageview tag will need to be delayed to complete the Optimizely integration.

So, how did you go setting this up? Let us know in the comments below.