UK +44 28 9078 5820 IRL +353 16373962 contact@glowmetrics.com

One of the easiest ways to set up Google Optimize is using Google Tag Manager. All you need to do is add a simple tag to your container, and you’re ready to start running A/B tests and personalised experiences. There is an optional, but recommended, step that many overlook at this stage: adding the Anti-Flicker Snippet, also known as the Page-Hiding Snippet. This process is slightly different if you’ve installed Optimize through GTM rather than other methods, so it’s important to make sure you get this right before setting a test or personalisation live.

The Anti-Flicker Snippet is a small piece of code that helps to maintain the user experience on your website when running a personalisation or experiment through Google Optimize. In some cases, a flicker can occur while the Optimize container loads in the changes you’ve made to the page. The magnitude of this flicker, or its occurrence in general, is very much dependent on the experience you’re running. This snippet temporarily hides the page until the Optimize container has fully loaded. While it may slow the loading time by a tiny fraction, it can make a huge difference to user experience.

 

Two Key Factors for the Snippet

Thankfully, installing the Anti-Flicker Snippet is not difficult. There are two key factors in installing the page-hiding snippet successfully: the container ID entered, and the position of the snippet.

1. The only aspect of the code snippet provided by Google that you’ll need to change is the ID number at the end of the code. However, what you’ll need to enter here is dependent on how you’ve installed Google Optimize. If you’ve installed Optimize using Google Tag Manager, you’ll need to add your GTM Container ID, not your Optimize Container ID. This is the most commonly made mistake when installing the anti-flicker snippet for temporary page hiding. If you’ve used a different method to install Google Optimize, then you’ll need to add your Optimize Container ID.

Simply replace OPT_CONTAINER_ID with the relevant container GTM-XXXXXXX, and you’re good to go.

 

<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>

 

2. The Anti-Flicker Snippet for Google Optimize must be placed as high on the page as possible, in the <head> of your website code. This ensures the snippet will cover as many instances of flickering as possible, however few or many that may be. The snippet must be added to every page with the Optimize code or the Optimize Tag installed and must be immediately followed by the Tag Manager container.

 

You can make sure that the snippet is present and functional by using the Run Diagnostics option in your Google Optimize settings, towards the bottom of the interface while viewing an Experience. Once the page-hiding snippet is verified alongside Optimize installation, you’re ready to launch a range of experiments and personalisations using Google Optimize, without risk of mitigating your variations’ performance with any flicker. This way, you can be safe in the knowledge that any observations and analysis conducted on your data is a result of the changes you’ve made, and not any confounding variables or factors. In other words, your data is much more reliable!

For more on Google Tag Manager, stick with the GlowMetrics Blog for upcoming articles this month. You can follow us @GlowMetrics on Twitter or check out our archive for even more guides, tips, and advice for GTM and Optimize. What other areas would like us to cover? Do you have a question about this article? Please feel free to leave a comment below and we’d be happy to help!