How to Implement Google Optimize with a Tag Management System

Google Optimize for TMS_Blog Header

When Google released their new A/B testing platform Google Optimize, everyone in the industry was ecstatic. A free tool from Google that natively integrates with Google Analytics (GA) AND Google Tag Manager (GTM)? Heck yes, sign me up! Despite all of the positive momentum for Optimize, one constant issue keeps coming up for its users. Many companies have reported tracking issues when firing Optimize via a tag management system (TMS). The common response was something along the lines of “But how could this be? GA and Optimize fire from the same container, my tag manager can’t be the issue.”

It turns out that indeed this was the problem. Google has confirmed that implementing Optimize tag from inside a TMS leaves your tests prone to reporting latency issues. To help you avoid this issue (or migrate your code if you’ve already set up Optimize via your tag manager), we’ll walk you through the proper code format for launching Optimize alongside a TMS.

The proper code format requires three different snippets of code, in this order:
1 – Page-hiding snippet
2 – Analytics-Optimize hybrid code
3 – Tag manager code

For our example let’s use these hypothetical ID #’s for each platform

Optimize – GTM-ABC123
Google Analytics – UA-123456-7
*Google Tag Manager – GTM-DEF456

*This post applies for any TMS, but for our example we’ll stick to GTM.

The code needs to be placed in the head of each page you’ll be testing. Please note that if you need any Javascript to load before an Optimize test (i.e. for custom targeting), that Javascript needs to go before any of the following snippets.

1 – Page Hiding Snippet

This code is to eliminate any flickers on your testing pages (additional information here). In the previous code format Google requested that you place the GTM container ID in this snippet. However, now that we’re no longer firing Optimize via GTM, this snippet needs to contain the Optimize container ID.

2 – Analytics-Optimize Hybrid Snippet

This is where Optimize needs to fire. The code is nearly identical to a GA pageview tag, except we strip out the final line that would send a pageview to GA (if you use hard-coded GA be sure to add that pageview line to this code). You’ll need to add your GA Property ID and the Optimize container ID at the bottom of this snippet.

3 – GTM/TMS Snippet(s)

The last code snippet represents the TMS, which in this example is GTM. GA pageviews will fire from the tag manager, but Optimize will no longer be in this container. Be sure to follow the directions from your TMS on proper code implementation. For GTM, that means adding the main script first.

GTM also requires adding a noscript snippet after the opening body tag.

Final Step – Remove Optimize from GTM

Once all of the necessary code has been added, it’s time to strip Optimize out of our container. For GTM users, this means going into the GTM interface and selecting the Optimize tag.

GTM_1

Click on the top right menu and select Delete.
GTM_2
Be sure to Preview your container in an Optimize test to make sure the test is running smoothly with your new code edits. Once you’ve verified the new code works, go ahead and publish your changes in GTM.

While this new code format can be a headache, at the end of the day now your tests will run smoothly and your data will be more accurate.

Print Friendly
Tim Gillman