Installing the Anti-Flicker Snippet for Google Optimize

Written by Conor Ross

Conor specialises in data visualisation, designing and creating bespoke data dashboards and automated reports with Google Data Studio. With a background in Psychology and Research Methods, he also works on projects focused on improving customer experience and website usability through A/B Testing and Personalisation in Google Optimize.
October 9, 2019

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!

4 Comments

  1. Surendra Dhote

    It’s not working for me. I have placed the same script and replaced ID with my original ones. Can you pls, share the exact code with your own container ID?

    Reply
    • Conor Ross

      Hi Surendra,

      Thanks for getting in touch. The code is slightly different depending on how you’ve installed Google Optimize onto the page. If you’ve installed Optimize using Google Tag Manager, you need to add your GTM Container ID, and if you’ve installed Optimize using a different method then it’s your Optimize Container ID that you’ll need. Have you tried it with both versions of the code?

      Other things to look out for are that this code snippet should be added to each page you require for Optimize, as early in the as possible, and that your Optimize snippet or GTM container immediately follow this anti-flicker snippet, once again depending on the method used.

      Google’s own installation guide for the anti-flicker snippet is also a good resource that may cover some other factors at play. You can view this here:- https://support.google.com/optimize/answer/7100284?hl=en

      Let us know we can provide any further information. We hope this helps to solve the issue you’re encountering here.

      Thanks,
      Conor

      Reply
  2. Markus Baumann

    Hey Conor,

    How have you implemented the anti-flicker snippet when both your data layer and Google Optimize are implemented via GTM? The snippet needs to be placed after the data layer is defined and before Optimize. GTM builds the data layer, so I assume the best solution is to remove Optimize from GTM, then implement as:

    1) GTM (incl. data layer)
    2) Anti-Flicker
    3) Optimize

    Do you see any other options?

    Reply
    • Conor Ross

      Hi Markus,

      Thanks for your query. The anti-flicker snippet will initialise the data layer as an empty array if it hasn’t been initialised already. You can find more details here on using and customising the snippet: https://developers.google.com/optimize

      We would also recommend referring to the following section of Google’s official Resource Hub for Optimize for the most up to date information on implementation: https://support.google.com/optimize/answer/7100284

      We hope these help with any issues you might be having implementing the snippet.

      Many thanks,
      Conor

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Enjoyed reading this article? Find more like it below…