The Doobie Brothers
It has been a Long Train Runnin’, but it is finally here. Google has updated the very confusing direction they’ve previously given for deploying the Google Optimize snippet. We wrote about the previous possible deployment approaches in Google Optimize Snippet Installation Best Practices. Google recently published a help article titled Install Optimize with optimize.js that inventories their latest guidance.
Keep it simple with the synchronous snippet
The simple “Synchronous snippet” option is the best option for the majority of scenarios. This synchronous option generally prevents the need to add the anti-flicker snippet. The support content notes you would only need to add the anti-flicker snippet “if you expect to use Google Analytics audiences, Ad targeting, or ‘Time since first arrival’ (behavior targeting) in the future“. Why? The extra queries back to Google from the locally running Google Optimize script in these listed scenarios will likely cause some latency in the snippet being ready to make any applicable on-page variant changes.
Synchronous scripts delay page rendering. Normally, you want to load third-party scripts asynchronously to prevent such delays, as does Google Tag Manager (GTM). When Google Optimize is installed via GTM, the page can render before the Google Optimize script loads, causing flickering when the script eventually loads and a variant page change is executed. When you want the Google Optimize script to be ready to execute variant page changes as close to when the page initially renders as possible, you load the script synchronously. That’s what Google is doing with this simple “Synchronous snippet” option.
You’ll notice that newly created Google Optimize containers now have a prefix of OPT instead of GTM. This is a practical (and welcome) change to make Google Optimize & GTM container ID references visually discernible.
The details
Be sure to employ the best practices listed below, adding the snippet to the top of the <HEAD> tag, and being purposed where you place the data layer and scripts that declare variables used by Google Optimize.
Synchronous snippet
The synchronous (sync) version of Optimize is recommended for most users because it features the best performance and has a minimal impact on your website’s rendering speed.
You don’t need the anti-flicker snippet when using the synchronous snippet in most cases.
<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>
Advanced install: optimize.js + anti-flicker snippet
We generally expect the new snippet to be fast and therefore not require the use of the anti-flicker snippet when the Optimize snippet is used in synchronous (sync) mode. We recommend using the synchronous version with anti-flicker if you expect to use Google Analytics audiences, Ad targeting, or ‘Time since first arrival’ (behavior targeting) in the future.
<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><script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID" onerror="dataLayer.hide.end && dataLayer.hide.end()"></script>
Snippet placement best practices
For optimal performance, place the Optimize snippet at the top of the<HEAD>tag on every web page you wish to optimize. The only items that should appear above the Optimize snippet are:
1. Any dataLayer initialization code.
Note: the dataLayer variable should never be reassigned after the anti-flicker snippet (when used).
2. Any scripts that declare JavaScript variables, functions, or set cookies you use in Optimize, like jQuery or JavaScript libraries used in implementation or targeting.
Note: jQuery isn’t installed by Optimize by default.
3. The optional anti-flicker snippet, when used to mitigate page flicker.