How to Add Page Hiding Snippet via Google Tag Manager

After running some tests with Google Optimize, I come to know that page hiding snippet is quite important to add. If you are reading this, you might have experienced the page flicker problem.

Page hiding snippet actually hides the page until the experiment is started. If you are displaying two versions of a single page, then this is strongly recommended to add. If you have added Google Optimize via Google Tag Manager, then it’s pretty tricky to add the hiding snippet.

In this article, I will explain how to add page hiding snippet via GTM.

There are actually two ways you can add the page hiding snippet. First is simply by adding the page hiding snippet directly on your website just above the GTM code. However, this doesn’t always work, so we will have to switch to Google Tag Manager.

 

Add Page Hiding Snippet via GTM

We all know that custom HTML tag can be used to setup any tracking code. We will be using custom HTML tag to add the page hiding snippet. Let’s do this:

1. Open your GTM account

2. Create a new tag and choose the tag type as Custom HTML

create an custom html tag

3. Click advanced settings and choose this tag to fire once per page

tag firing options

4. Save this tag without adding any trigger.

5. Open Google Optimize tag and set the previous page hiding tag to fire before this tag. You will do this via tag sequencing

fire page hiding before optimize

Save this tag.

6. Open Google Analytics pageview tag and set the optimize tag to fire before the GA pageview tag. Remove all pages trigger from this tag too.

fire optimize before ga pageview

Save this tag.

So the sequence you will have to follow is:

Page Hiding Snippet >> Google Optimize >> Google Analytics Pageview

Once you do this, preview and debug changes before setting them live. If you don’t add this correctly, then the page flickering problem will remain the same and even increases often. If you have any queries please ask us directly on Twitter.