Search
Clear search
Close search
Google apps
Main menu

Deploy the page-hiding snippet

Use page-hiding code to provide users with the best experience.

While the page-hiding snippet is technically optional, it's strongly recommended for most standard implementations.

In this article:

Alternatives

  • You can accept flicker if you test your site carefully, but if users see both versions, it may affect your test results.
  • Users of Activation events who don't fire changes on the first load don't need to worry about this.

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.

One of the most effective ways to mitigate the risk of page flicker when loading Optimize is to temporarily hide the page while the Optimize container loads. This can be accomplished by adding the page-hiding snippet as the first script on your page(s) – after the <meta charset> declarations and before your Optimize, Analytics and/or Tag Manager tags.

Additionally, the hiding 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 will not be added to the experiment, and will be shown the default content. Learn more about customizing the hiding snippet.

Deploy the page-hiding snippet

To install the page-hiding 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 modified Google Analytics tracking code immediately follows the page-hiding snippet.

The Optimize page-hiding snippet looks like this:

<HTML>
<HEAD>
<!-- Page hiding 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,
{'GTM-XXXXXX':true});</script>

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

Tag Manager users

If you’re using Google Tag Manager to deploy Optimize, populate the page-hiding snippet with your Tag Manager container ID, not your Optimize container ID. Learn more about using Optimize with a tag-management system

Customization options

Advanced users can customize the page-hiding snippet for various purposes. Learn more about how to use and customize the Optimize page-hiding snippet on Google Developers.

Was this article helpful?
How can we improve it?