Google Optimize has updated its preferred installation method, which makes the installation much more straightforward! You might not be installing Google Optimize that often, but if you have tried installing it before and encountered mismatch problems, you will probably appreciate this change as much as I do.
Contents:
The different methods
The old method: Analytics.js or gtag.js
The new method: Optimize.js
Risk for flicker through Google Tag Manager
I already have Optimize implemented, should I update it?
Installing Optimize the new way: Step by step guide
1. Get the anti-flicker snippet
2. Get the Optimize snippet with your container ID
3. Add it to the page
The different methods
The old method: Analytics.js or gtag.js
With the old method, Optimize is added to the page by modifying the analytics code, and it looks a little different depending on whether you are using the Universal Analytics tag (analytics.js) or the global site tag (gtag.js).
If Google Analytics is implemented through GTM, you still need to add an analytics snippet to the page without a pageview send and with the same Analytics tracker configuration settings as in your Analytics tag in GTM. If they don’t match, you will get an “Analytics configuration mismatch” message in Google Optimize.
A common mismatch problem: “The following tracker configuration properties do not have the same configurations: allowLinker.”
The new method: Optimize.js
So what’s changed? Well, instead of adding a modified analytics snippet, you will now add the Optimize.js snippet which only consists of one row and does not need any more configuration than your Optimize container ID. You can use the same snippet regardless if Google Analytics is implemented through GTM or directly on the page.
<script src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXX"></script>Risk for flicker through Google Tag Manager
The above methods both require code to be added directly on the page, but there’s also the possibility to install Optimize through GTM. However, putting a snippet of code directly on the page is preferred over this method. To avoid flickering, the Optimize snippet should be placed as early in the <head> tag of the page as possible. By implementing Optimize through GTM, Optimize will need to wait for GTM before loading, adding a bit of loading time and increasing the risk of flickering.
Flickering is when the user can see a flash of the original before the variation is loaded, which can affect their behaviour e.g. by making them think the site is broken.
I already have Optimize implemented, should I update it?
The other implementation methods will continue to work and you don’t need to be in a hurry to change it. The biggest reason to change the existing installation is if both of these conditions are true for you:
- You are loading Optimize using the modified global site tag (gtag.js)
- The gtag isn’t used for anything else but Optimize (e.g. Google Analytics is loaded through GTM)
In this case, you should change to the Optimize snippet and remove the gtag. If you are not using the gtag library for anything else, you will only be loading unnecessary resources by using this method.
Installing Optimize the new way: Step by step guide
What you need:
- A Google Analytics property installed on the page
- An Optimize container linked to the Google Analytics property
1. Get the anti-flicker snippet
Although this step is optional, we recommend using the anti-flicker snippet to help ensure better user experience, especially if you plan on using the asynchronous version.
The anti-flicker snippet hides the page until the Optimize container is downloaded, which reduces the risk of the user seeing a flash of the original content before the experiment is loaded.
<!-- Anti-flicker snippet (recommended) -->
<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-XXXXXX':true});</script>Change GTM-XXXXXX to your Optimize container ID.
The anti-flicker snippet has a timeout value. If the Optimize container is not loaded within that time, the experiment will not be shown and the user will be excluded from the experiment. By default, this timeout is set to 4000, i.e. 4 seconds, but we recommend changing this to for example 2000. The Optimize container will probably load a lot faster than that (hopefully, or you have page speed issues), but if the site content would be hidden for 4 seconds, that would heavily affect your user experience and bounce rate. (Up to 40% of the visitors will abandon the page if it loads for over 3 seconds).
Note: You don’t need the anti-flicker snippet if you use Activation events to trigger the test and not first page load.
2. Get the Optimize snippet with your container ID
Now we just need the Optimize snippet. Either copy the snippet below and add your Container ID:
<script src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXX"></script>Change GTM-XXXXXX to your Optimize container ID.
Or you can find the Optimize snippet with your container ID by clicking Settings in your container.
3. Add it to the page
To optimize performance and avoiding flickering, the Optimize snippet should be placed as high up in the <head> tag as possible, with a few exceptions.
The placement order should look like this:
- The <meta charset> tag
- Data layer initialization (make sure this isn’t reassigned after the anti-flicker snippet)
- Any scripts that declare JavaScript variables or set cookies that you want to use in Optimize experiments. For example, JavaScript libraries that are to be used in the experiment or in targeting, like jQuery. Keep these to a minimum.
- Anti-flicker snippet
- Optimize snippet
- Tag Manager container snippet.
- Other JavaScript, etc.
Now you are ready to start testing! Do you have other questions about A/B testing, check out the answers to our 21 most frequently asked questions about A/B testing.
