Install the anti-flicker snippet

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

Introduction

If you follow our snippet installation articles and snippet placement best practices (below), 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.

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.

The most effective way to mitigate page flicker 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).

If you notice page flicker, confirm that you've followed all of the steps in our snippet installation articles (and best practices) before doing any other troubleshooting.

Specifically, ensure that the Optimize snippet is installed as high as possible in the <HEAD> of your website's HTML. Putting the snippet at the top of the <HEAD> addresses most flicker issues.

Audience

This article is intended for customers that have observed page flicker on their Optimize experience pages.

Do not install the anti-flicker snippet:

  • ...if your Optimize snippet isn't at the top of the <HEAD>.
  • ...if you haven't observed page flicker.
  • ...if you use activation events that don't fire changes on the first load.
  • ...with a tag management system (TMS) like Google Tag Manager (GTM).

AFS with a TMS?

Do not install the anti-flicker snippet with a tag management system (TMS) like Google Tag Manager (GTM).
The anti-flicker snippet should only be installed inline – directly on your web page – and never with a tag management system (TMS) or another asynchronous script. If you can't install the anti-flicker snippet inline you should skip it altogether.

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 your Optimize snippet 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,
{'CONTAINER_ID':true});</script>

Note: Replace CONTAINER_ID with your Optimize container ID. If you're using Google Tag Manager to deploy Optimize, replace CONTAINER_ID with your Tag Manager container ID.

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.

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.

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 page-hiding snippet was previously known as the anti-flicker snippet.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue