Installing Google Optimize the Right Way with GA and GTM

Installing Google Optimize the Right Way with GA and GTM

Are you ready to get started with Google Optimize? After setting up your Optimize account, the next step is to install the provided code snippet on your website. It sounds simple, but in our experience many people get stuck at this stage due to the complexity of integrating with their other analytics products—specifically Google Analytics and Google Tag Manager.

If you are already using GA and GTM, you will need to ensure that your Optimize code peacefully coexists with your current implementation. The placement and configuration of the Optimize page-hiding code, GA snippet, GTM container, and data layer all matter. Placing code in the wrong order or using the wrong configuration settings can break your GA tracking, prevent tags from firing through GTM, invalidate your A/B tests, or at worst disable your entire web analytics implementation.

Luckily, we’re here to help! We have put together a step-by-step guide to help you get Optimize up and running alongside your existing GA and GTM implementation.

Combining Google Optimize, GA, & GTM Code Snippets

At this point, we’re assuming you have already created an Optimize account and linked it to your Google Analytics property. If you haven’t, follow the steps in this Help Centre article first. Once your account is created and linked, you’ll be ready to proceed with the steps below. We’ll go through each piece of code in the order it should appear on the page. A full code example is included at the end.

1. Data Layer Initialization

If you are explicitly initializing your data layer for GTM, this code needs to come first. This ensures that your data layer variables are available for use in experiment targeting in Optimize. Google recommends placing the code as high as possible in the HEAD section of the page, but after the <meta charset> declaration.

<head>
<meta charset="utf-8">
<script>
window.dataLayer = window.dataLayer || [];
//If necessary, push info into data layer here with dataLayer.push()
</script>

2. Page-Hiding Snippet

The page-hiding snippet helps prevent page flicker when loading experiment variants, providing a better end-user experience. For more information about how page-hiding works, see this Help Centre article. The page-hiding snippet must be configured with your Optimize container ID.

Note that both Optimize and GTM container IDs begin with “GTM-“. Replace GTM-XXXXXX in the code below with your Optimize Container ID.

<!-- Page hiding snippet for Optimize -->
<style>.async-hide { opacity: 0 !important} </style>
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>

3. Analytics-Optimize Snippet

The Analytics-Optimize snippet is a modified version of a base GA analytics.js tracking snippet. There is an added “require” line that loads the Optimize plugin, and the usual “pageview” function is removed (This assumes that you have a GA pageview tag firing from GTM). This snippet is what actually loads Optimize.

Replace UA-YYYYYYY-Y with your GA Property ID, and replace GTM-XXXXXX with your Optimize Container ID.

If you have cross-domain tracking configured and the “allowLinker” field set to “true” in your GA tag in GTM, then you need to include {allowLinker : true} in the create function below. Also, ensure that your GA tag in GTM has the cookieDomain field set to “auto”.

<!-- Analytics tracking code with Optimize plugin -->
<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-YYYYYYY-Y', 'auto', {allowLinker: true}); //Insert GA Property ID
ga('require', 'GTM-XXXXXX'); //Insert Optimize Container ID
</script>

4. GTM Container Snippet

This is the standard GTM container snippet for the HEAD section. Replace GTM-ZZZZZZ with your GTM Container ID.

Although it is possible to deploy Optimize through a tag in GTM, we do not recommend this approach as it will often result in significantly increased latency. The method detailed in this post does not require any configuration within GTM to enable Optimize.

<!-- 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-ZZZZZZ');</script>
<!-- End Google Tag Manager -->

Example Implementation

When you put all the pieces together, you will have a combined code snippet for Optimize, GA, and GTM that looks like the following. Note that we have also shown the noscript snippet for GTM in the BODY, although it is not impacted by the Optimize implementation.

<head>
<meta charset="utf-8">
<script>
window.dataLayer = window.dataLayer || [];
</script>

<!-- Page hiding snippet for Optimize -->
<style>.async-hide { opacity: 0 !important} </style>
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>

<!-- Analytics tracking code with Optimize plugin -->
<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-YYYYYYY-Y', 'auto', {allowLinker: true}); //Insert GA Property ID
ga('require', 'GTM-XXXXXX'); //Insert Optimize Container ID
</script>

<!-- 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-ZZZZZZ');</script>
<!-- End Google Tag Manager -->

//Other scripts and tags in HEAD
...
</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ZZZZZZ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
...

Still have questions? Let us know in the comments or get in touch. We would be happy to help you get started with Optimize testing and personalization.

By |2018-12-04T17:02:11+00:00June 14th, 2018|6 Comments

6 Comments

  1. Clinton L Gorman July 3, 2018 at 12:12 pm - Reply

    Awesome tutorial! I got stuck adding Optimize via GTM, so this is a nice way to do it.

    I’ve already added my GA via GTM. So the Analytics-Optimize snippet does not replace the original Analytics code, correct? It’s added as a separate snippet?

    If this snippet does replace the GA code, would I need to modify the GA snippet inside my GTM dashboard?

    • Marc Soares July 4, 2018 at 9:15 am - Reply

      Hi Clinton,

      That’s correct, the Analytics-Optimize snippet does not replace your GA tag in GTM. As described in step 3, you should ensure that the allowLinker and cookieDomain values match between your GA tag in GTM and the Analytics-Optimize snippet.

      Marc

  2. Vinita July 23, 2018 at 5:46 am - Reply

    Hey Marc,

    Can you please tell how to implement google optimize snippet if we are using ga-lite script? Any help will be highly appreciated.

    • Marc Soares July 23, 2018 at 12:34 pm - Reply

      Hi Vinita,

      Is there a reason that you are not using the standard implementation of Google Analytics? Since ga-lite is an unsupported implementation, it may not support Google Optimize. You will have to contact the ga-lite creator to inquire about Optimize support.

      We recommend always using an officially-supported implementation of Google Analytics.

      Marc

  3. Ilana December 4, 2018 at 2:43 pm - Reply

    Everything about our implementation appears correct, however since implementing our bounce rate has fallen to basically zero, indicating that something is amiss. What about the Optimize implementation could have caused this?

    • Marc Soares December 4, 2018 at 5:10 pm - Reply

      Hi Ilana,

      Are you using GTM for your GA tracking? If so, make sure you do not have ga('send', 'pageview'); in your Analytics-Optimize snippet. Your code should look like what’s shown in Step 3 above.

      If your bounce rate fell to zero, it sounds like you have duplicate pageviews being sent to GA, which would be caused by leaving the pageview function in your code.

      Marc

Leave A Comment