Use Optimizely X API within Google Tag Manager for sending experimental data to GA

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

In my previous post I have described a solution that allows you to mitigate FOOC (flash of original content) while using Google Tag Manager to perform A/B tests. That post also contains a tip on how to use Optimizely X API to pass your experimental data to Google Analytics within a Custom JS Variable. However, the tip (though it works just fine) serves just as a quick fix. So, in this post I’d like to offer a complete guide on using Optimizely X API within Google Tag Manager for sending your experimental data to GA.

Before we begin

First, I’d like express my thanks to Robert McGredy, a Technical Support Engineer at Optimizely Inc., for his impeccable assistance with testing the below solution. I’m also indebted to Optimizely Engineer team for letting me publish this guide here before it appears in the official Optimizely Knowledge Base.

Second, in order to have the below solution working properly, you will need to inject the Optimizely snippet directly to your source code like it’s officially recommended here. Plus, be sure to create a custom dimension in Google Analytics. It will contain your experimental data.

Finally, before making any alterations to the below script, please be sure to check the Optimizely X API official documentation.

Now, when we’re done with the “formal” introduction, let us see how to use Optimizely X API within Google Tag Manager to pass the experimental data to Google Analytics.

Preliminary setup

We will need:

  1. Three data layer variables
  2. Two custom event triggers
  3. One custom HTML tag and two UA event tags

Step 1

First, let’s create data layer variables and name them like “optimizely-referrer”, “optimizely-dimension-number” and “optimizely-dimension-value”. Here’s an example.

optimizely x api within google tag manager: data layer variables

Step 2

Next, you need to create two Custom Event triggers like this.

optimizely x api within google tag manager: event 1

optimizely x api within google tag manager: event 2

Step 3

Furthermore, you should create two UA Event tags.

THE 1st EVENT TAG

optimizely x api within google tag manager: ua tag 1

Be sure to:

  1. set the Non-Interaction Hit value to true
  2. use data layer variables (step 1) as it is shown on the picture above
  3. attach the Optimizely Campaign Decided event trigger to this tag

Thus, you will pass experimental data to GA within a custom dimension.

THE 2nd EVENT TAG

optimizely x api within google tag manager: ua event tag 2

As you can see, here we use the optimizely-referrer variable for the GA referrer field (see details below). To make this tag fire, attach your Optimizely Referrer Override event trigger to it.

The script

Now, when all the preparatory work is done, you need to paste the following script into a Custom HTML tag and make it fire on all pages where you run your experiment.

This is the core of the whole solution. I believe there’s no need in detailed explanations here since there are comprehensive comments on each part of the script. Should any questions concerning the script’s operation peculiarities arise, feel free to ask them in the comment section.

Finally, to make sure the solution works properly, follow the below QA steps.

Quality Assurance

Yet, there’s no need to publish your workspace. All of these steps can be done in preview mode.

Step 1

Create a new campaign that you would like to integrate with Google Universal Analytics and turn on the UA integration from the Optimizely Dashboard. If you already have a campaign, you will need to turn on the UA integration.

Step 2

Within the campaign set the desired custom dimension where you would like Optimizely send data.

optimizely x api within google tag manager: set dimension

Step 3

Run the campaign, open up your Network panel in your browser and navigate to the page where the campaign is running.

Step 4

Filter for “collect” to only show google-analytics requests.

Step 5

Look in the “Headers” section of each request for the cdX value, where the X is whatever dimension number you set in step 2.

You should see the following output if the integration is working properly: campaign_name:experience_name:variation_name:holdback.

optimizely x api within google tag manager: network panel

Furthermore, you can use Tag Assistant to make sure the experimental data is sent to Google Analytics.

optimizely x api within google tag manager: tag assistant

Step 6

If the solution works correctly, publish your workspace.

That’s it! Now you should start seeing your experimental data in Google Analytics!

Summary

As you can see, using Optimizely X API within Google Tag Manager is easy. With slight alterations, you can make use of this guide to send experimental data to other services. For example, Yandex Metrica.

Again, if you have any questions, you can contact me via Google+ or Twitter or simply make use of the comment section.

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn