How to Implement Google Optimize with a Tag Management System

Subscribe to our monthly newsletter to get the latest updates in your inbox
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. 
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-ABC123':true});	// Replace with your Optimize container ID
</script>

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. 
<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]|, Function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-123456-7', 'auto'); // Replace with your Analytics tracking ID 
 ga('require', 'GTM-ABC123'); // Replace with Optimize container ID

</script>

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. 
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-DEF456');</script>
<!-- End Google Tag Manager -->
GTM also requires adding a noscript snippet after the opening body tag. 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-DEF456"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

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.