Anti-Flicker Snippetgoogle optimizegoogle tag manager
Installing the Anti-Flicker Snippet for Google Optimize
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...
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 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,
{'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 responses to “Installing the Anti-Flicker Snippet for Google Optimize”
Leave a Reply
Posted by
Conor Ross
Conor specialises in data visualisation, designing and creating bespoke data dashboards and automated reports with Looker 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.
Read more from Conor RossBrowse by Category
- Social Media
- SEM
- SEO
- Google Ads
Digital Marketing
- Google Analytics
- Google Tag Manager
- Google Opimize
Digital Analytics
Optimise your website and marketing campaign performance with Ireland’s leading digital analytics agency
Sign up to our newsletterEnjoyed reading this article? Find more like it below…
Posted by
Michael Wilson
Mar 24th 2016
Digital Analytics Insights
2 min read
Outbound Link Tracking via Google Tag Manager
Want to know which links your visitors are clicking on on your website and where they head off to? If you have a link to a third party website, by...
Posted by
Kyle Crooks
Mar 4th 2023
Digital Marketing Insights
4 min read
Spot-on Advertising: 8 Things We Learned Running Spotify Ads
According to Spotify, around 1/3 of the global online population uses the platform, with at least 60% of users engaging daily – ranking Spotify as one of the top platforms...
Posted by
Conor Ross
Jan 16th 2020
Digital Analytics Insights
3 min read
Navigation Buttons in Google Data Studio
Guide Users Through Your Data Dashboards Creating an intuitive user experience is a hugely important aspect of web design, and there is no reason that the same principles shouldn’t be...
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?
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
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?
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