How should I implement Optimize?
There are a couple of ways to implement Optimize. It can either be implemented via GTM, or it can be hardcoded straight onto the site. As best practice - and to provide the best experience for your users - it is strongly recommended that the Optimize snippet is hardcoded on the site.
The Optimize snippet is just a modified version of the Google Analytics tracking code to load the Optimize plugin.
There are currently 2 versions of the Optimize Snippet:
-
- The classic analytics.js snippet
- The newer, more recent gtag.js snippet
The correct version to use depends on how GA has been implemented on the site:
-
- Via analytics.js library (hardcoded)
- Via gtag.js (hardcoded)
- Via GTM (using a Tag manager)
In this article, we’ll dive into the best practice implementation of hardcoding the Optimize snippet onsite, and how to approach this depending on your setup.
Pre-requisites for Google Optimize
Before you start, make sure you have the following:
- An Optimize account set up
- GA installed on your site
- Access to the site code or to developers that can make changes
- Basic HTML/JavaScript editing experience
What is the Anti-Flicker Snippet?
The Anti-flicker snippet (also commonly known as the Page Hiding snippet) is used to minimize page flicker that users could experience while the changes are being applied. This will temporarily hide the page, for up to 4 seconds, while the Optimize container loads. The timeout setting is adjustable if necessary.
Regardless of the chosen implementation method, it is strongly recommended to also implement the Anti-flicker snippet. This will prevent users seeing a flicker on the page while the Optimize changes are applied and ultimately help prevent users seeing the original variation before the changes appear.
Anti-flicker snippet
<!-- 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,
{'OPT_CONTAINER_ID':true});</script>
Replace 'OPT_CONTAINER_ID' with your Optimize Container ID.
This should be placed immediately before the Optimize snippet. The dataLayer should never be reassigned any time after the anti-flicker snippet.
1. I’ve hardcoded GA via analytics.js
If Analytics has been hardcoded on site using the analytics.js library, simply add a line of code to your Google Analytics tracking code to load Optimize: ga('require', 'OPT_CONTAINER_ID');
analytics.js
<!-- Modified 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-XXXXXXXX-X', 'auto');
ga('require', 'OPT_CONTAINER_ID');
ga('send', 'pageview');
</script>
Add the code to every page of your website as high up in the <head> tag as possible and make sure to:
- Replace 'OPT_CONTAINER_ID' with your Optimize Container ID (make sure this is your Optimize Container ID and not your GTM ID)
- Replace and update UA-XXXXXXX-X with your GA Property ID
2. I’ve hardcoded GA via gtag.js
If Analytics is hardcoded via the gtag.js library, simply add in the following parameter in your Google Tracking code to load the Optimize container: {'optimize_id': 'OPT_CONTAINER_ID'}
gtag.js
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X', {'optimize_id': 'OPT_CONTAINER_ID'});
</script>
Add the above code to every page of your website as high up in the <head> tag as possible.
Make sure to:
- Replace UA-XXXXXXXX-X with your Google Analytics tracking ID
- Replace OPT_CONTAINER_ID with your Optimize container ID.
3. I’ve implemented GA via GTM
If GA has been implemented via GTM, then either one of the above snippets can be used (Google recommends the newer gtag.js snippet).
Important: When implementing GA via GTM, it’s important to make sure that the custom trackers between the GA and Optimize tags match.
This can be found in the Google Settings variable in GTM.
If any one of the following are specifically set in the Settings variable, then this must also be included in the Optimize tag:
- clientId
- sampleRate
- siteSpeedSampleRate
- alwaysSendReferrer
- allowAnchor
- allowLinker
- cookieName
- cookieDomain
- cookieExpires
- cookiePath
- legacyCookieDomain
- legacyHistoryImport
- storeGac
analytics.js
Note: The pageview command has been removed
gtag.js
Order of Snippets
During implementation, it is very important to have the order of the snippets set up correctly. The only thing that should appear before the Optimize snippet is:
- Any data layer initialization.
- Any scripts that declare JavaScript variables, functions, or set cookies that you wish to use in Optimize experiences. This includes jQuery or any JavaScript library that you wish to use in implementation. (Note: jQuery isn't installed by Optimize by default.)
- The anti-flicker snippet which can be used to avoid flicker.
The order of the snippets should be as follows:
In summary…
The Optimize snippet is a line of code added to your existing Google Analytics code snippet that loads the Optimize container. Our best practice implementation for Optimize is hardcoding the snippet straight onto the site – how you approach this is dependent on how Google Analytics has been implemented on the site.
Although, the Anti-flicker snippet is optional, we highly recommend having this to prevent any page flickering and to provide your visitors with a seamless user experience.
Now that you’ve implemented Optimize, you can start running some exciting A/B tests and personalised experiences on your site!
Authored by:
