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>
var 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 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>
var 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-06-14T09:14:06+00:00 June 14th, 2018|0 Comments

Leave A Comment