What is the Anti-Flicker Snippet?

Clearly, flicker is detrimental because, for your experiment to be valid, you don’t want a user seeing multiple test variants, within one session.

So, what can you do?

Well, luckily, in the A/B testing platform, Google Optimize, the anti-flicker snippet — previously called the page-hiding snippet — can remedy this issue.

How Do I Know If I Need to Install the Anti-Flicker snippet?

To activate the anti-flicker snippet within Optimize, it needs to be installed. However, installation is not always required.

One important question many testers have is: how do I know if I need to install the anti-flicker snippet?

In true CRO style, the answer is it depends. . . on two factors:

1. If you installed the Google Optimize synchronous or asynchronous snippet
2. When you installed Google Optimize (which snippet version you’re running)

Synchronous vs. Asynchronous Snippet

When installing Google Optimize, you can choose to run the application synchronously or asynchronously. 

It’s important to understand these terms because it will help you identify which Google Optimize snippet you need to install on your site.

Synchronous Snippet

In very basic, simplified terms:

Synchronous means data is sent in blocks or frames and the transmission of this data is constant. As a result, the page won’t load until everything has rendered. 

Here’s a visualization of how that looks; you can see, the page display is synchronized with the completion of Optimize loading:

When running A/B tests, this transmission method means the site won’t load until all variants have rendered, so flicker won’t occur. That’s good news for the validity of your test data.

But, the trade-off is, the site may load much slower than desired — which could negatively impact conversion results.

Asynchronous Snippet

Asynchronous installation is the opposite. Data is sent in bytes or characters, and the transmission is not constant. As such, first the page loads, then all the elements on the page start to appear.

When A/B testing, the mode means the site may load element by element, with each test version loading and displaying before the site fully renders.

Here’s a visualization of how that looks:

This mode can be much faster — since you don’t need to wait for everything to load before it displays. But, the trade-off is, it can cause flicker. 

Which Mode Should You Use?

Depends on When You Installed Google Optimize

In the past, Google’s answer for dealing with page load delays, and flicker, was to recommend using the synchronous snippet — which loads faster — along with the anti-flicker snippet, to remove the flicker.

However, as of April 27, 2020, Google Optimize updated its installation snippet to a new JavaScript (JS) code. This date is very important to take note of because any documentation you find on the web prior won’t likely have the new snippet installation instructions and might cause you a lot of confusion.

After April 27, 2020: Likely don’t need to install anti-flicker snippet

With this new code, it’s now recommended you install Google Optimize’s default synchronous snippet.

The default synchronous snippet is recommended for most sites because, overall, it features the best performance and has minimal impact on your website’s page rendering speed.

By using the synchronous snippet, you should NOT need to also install the anti-flicker snippet. That’s because the page won’t load until all the variants have rendered — which has the same effect as the anti-flicker snippet. And, thanks to the new JS code, the page load speed is much faster, and also simpler to install. Win-win-win!

Asynchronous with anti-flicker snippet for VERY slow loading sites

However, if your site loads notoriously slowly, and there’s not much you can do to easily fix that problem, you might want to consider running the asynchronous snippet, then manually installing the anti-flicker snippet.

A word of caution. This installation can be tricky. But the step-by-step tutorials (below) have been created to help guide you through every detail.

Synchronous snippet PLUS anti-flicker snippet for advanced audience targeting

If you’re doing advanced targeting, using Google Analytics audiences or ad targeting, the Google Optimize resource hub suggests you may need to do an advanced installation, using the synchronous snippet, then adding the anti-flicker snippet.

Prior to April 27, 2020: Install anti-flicker snippet

If you installed any version of Google Optimize prior to April 27, 2020, you’re running an older installation snippet version.

Your installation likely used the asynchronous snippet, without the anti-flicker snippet. You’ll, therefore, likely need to install the anti-flicker snippet.

A Word of Caution: Before You Proceed With Installation

Complicated Installation

If you’re in the unfortunate situation where you do need to install the anti-flicker snippet, start by taking a deep breath.

It can be very complicated. . .

However, to reduce coding errors and nightmares, there is a recommended course of action. It involves moving the Google Optimize installation code into GTM (if you haven’t already done so), and then installing the anti-flicker snippet, using container IDs, in your site’s theme header.

This installation method is considered quite complex, but is best to do, especially if you have a large site, and/or multiple stakeholders accessing your Google optimization products.

You’ll see exactly how to do this installation in the step-by-step instructions by watching the instructional video below given by Todd Gamber, Chief Data Engineer at Confidence Interval, a specialized data analytics and marketing consulting firm.

Slows Page Load Speed

Unfortunately, installing the anti-flicker does slow your page load speed because both variants need to load in the background before the page shows. 

This fact can be problematic, especially for already slow-loading sites. Unfortunately, there’s not much you can do to remedy the situation. 

The trade-off is, with the anti-flicker snippet, your experiment results won’t be convoluted. 

If you’re interested in learning more about this issue, and what slows down a site, you can listen to this short video interview on The Dark Side of Using the Anti-Flicker Snippet:

How Do I Install the Anti-Flicker Snippet?

If you choose to install the Optimize snippet directly within GTM — which is the recommended option — you’ll need to follow a 2-step process. 

Step #1: Move the Optimize Snippet into GTM

The first step requires you to disable the current Google Optimize snippet and re-install it into GTM (assuming you haven’t already installed Optimize in GTM). You will then need to configure the GTM tag. Here are step-by-step instructions for how to do so:

Note, these video instructions show how to disable the Optimize script within WordPress, using a header/footer code plugin. However, the process is similar for all other website platforms. 

Step #2: Add the Anti-Flicker Snippet to the Theme Head

With the Optimize snippet installed in GTM, you next need to enter the anti-flicker snippet in your site’s theme header, using the GTM container ID.The anti-flicker snippet code is available here. Here are step-by-step instructions for how to install the anti-flicker snippet in your site’s theme header, using the GTM container ID:

Note, these video instructions show how to enable the anti-flicker snippet within a site theme header within WordPress. However, the process is similar for all other website platforms. 

Once the anti-flicker snippet is hard-coded into your site, you won’t need to add it again. It will remain active for all future Optimize experiments.

However, if your website theme gets updated, or major changes are made to your website, the anti-flicker snippet may become deactivated and may need to be reinstalled.