Install the anti-flicker snippet

If you notice page flicker, adding this snippet can help.

Note: Users of Activation events who don't fire changes on the first load don't need to worry about this.

Introduction

If you follow the steps in the Optimize snippet installation article (especially our installation best practices), your web page should load Optimize before other resources that are required to display the page. When your page loads Optimize first, you won't see flicker and you shouldn't install the anti-flicker snippet.

If you notice page flicker, the first step is confirm that you followed all of the steps in the Optimize snippet installation article (and the best practices section) before doing any other troubleshooting.

Specifically, you must ensure that the Optimize snippet is installed as high as possible in the <head> of your website. Doing this addresses most flicker issues.

Snippet placement best practices

For best performance place the Optimize tag at the very top of the <head> on every page you wish to run experiences on.

The only items that should appear above the global site tag are:

  1. Data layer initialization. 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 that you wish to use in Optimize experiences. For example jQuery or any JavaScript library that you wish to use in implementation or targeting. Note: jQuery isn't installed by Optimize by default.
  3. The optional anti-flicker snippet which can be used to avoid flicker.

If you still notice flicker after checking your Optimize snippet's location in the <head>, follow the directions below to install the anti-flicker snippet.

Mitigate page flicker

If you notice page flicker – despite following the steps above – the most effective way to mitigate it when loading Optimize is to temporarily hide the page while the Optimize container loads. This is accomplished by adding the anti-flicker snippet as the first script on your page(s).

How it works

Optimize displays variants to your website visitors by modifying the DOM (Document Object Model). In some instances, changes are made to elements that are already visible to the end user. These visible changes are referred to as page flicker.

Page flicker occurs when a web page briefly appears with the browser's default styles before loading an external CSS stylesheet which re-renders it causing the restyled elements to momentarily 'jump' on the page.

Deploy the anti-flicker snippet

To install the anti-flicker snippet:

  1. Copy the full code below and add it to every page with Optimize as early in the <HEAD> as possible, but after any dataLayer declaration, if used.
  2. Ensure that the global site tag (gtag.js) or Tag Manager container immediately follows the anti-flicker snippet.

Example: Anti-flicker snippet

<HTML>
<HEAD>
<!-- 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>

Note: Replace OPT_CONTAINER_ID with your Optimize container ID, Tag Manager users, see the next section.

You must initialize the dataLayer above the anti-flicker snippet or the performance of your site will be negatively impacted. Don't override the data layer later in the page.

Customize the anti-flicker snippet

The anti-flicker snippet includes a settable timeout functionality that stops trying to apply the experiment changes if too much time has passed. When the timeout expires, the page will unhide, the user won't see the new experience, and they'll just see the default content instead.

Learn more about customizing the anti-flicker snippet.

Tag Manager users

Note: If you’re using Google Tag Manager to deploy Optimize, populate the anti-flicker snippet with your Tag Manager container ID, not your Optimize container ID.

Adding the Optimize tag to your Tag Manager container will prevent page flicker until Optimize loads, but your page will not be affected if you later disable that tag.

Learn more about how to Install Optimize with Google Tag Manager.

Name Check

Page flicker is also known as JavaScript flicker, DOM flicker, Flash of Unstyled Content (FOUC), and Flash of Unstyled Text (FOUT). The anti-flicker snippet was previously known as the page-hiding snippet.

Related resources

Was this article helpful?
How can we improve it?