We use cookies. You have options. Cookies help us keep the site running smoothly and inform some of our advertising, but if you’d like to make adjustments, you can visit our Cookie Notice page for more information.
We’d like to use cookies on your device. Cookies help us keep the site running smoothly and inform some of our advertising, but how we use them is entirely up to you. Accept our recommended settings or customise them to your wishes.
×

CRO Best Practices: Implementing Optimize

This is the first part of our CRO Best Practice series, focused on setting up the Google Optimize platform snippet. For instructions on setting up Optimizely, see CRO Best Practices: Implementing Optimizely.

This article provides an updated guide on how to hardcode Optimize with the new Optimize snippet (launched 27/04/20).

How Should I Implement Optimize?

There are a couple of ways to implement Optimize. It can either be implemented via GTM, or it can be hardcoded straight onto the site. As best practice - and to provide the best experience for your users - it is strongly recommended the Optimize snippet is hardcoded on the site.

Pre-requisites

Before you start, make sure you have the following:

  • An Optimize account set up
  • Access to the site code or to developers that can make changes

Synchronous or Asynchronous?

The new Optimize snippet is 3X to 4X faster than previous installation methods, and it is a lot easier to implement. The new snippet is a single line and look like this:

<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>

By default, this snippet will load Optimize synchronously which is different from how Optimize is loaded by other methods.

The snippet can be converted into an asynchronous snippet by adding “async” into the script header.

<script async src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>

Replace 'OPT_CONTAINER_ID' with your Optimize Container ID.

Remove any previous Optimize snippets and replace it with the new snippet at the very top.

If you’re unsure of which version to use, below is a table that outlines the key differences between the two versions:

 

 

Synchronous (sync)

Asynchronous (async)

Coverage vs Speed?

Prioritize experiment eligibility/coverage with a small performance hit. More visitors will be eligible for experiments

Prioritize page loading speed over experiment eligibility/coverage. Visitors that timeout may be ineligible for experiments.

Suitable for..

High-speed connections (5G, 4G/LTE).

Lower-speed connections (3G or slower).

Should you add the anti-flicker snippet?

Yes – If you're targeting Google Analytics audiences, Google Ads, or 'Time since first arrival' (behaviour).

 

No – If you aren't using any of the targeting types mentioned above, you don't need to install the anti-flicker snippet.

Optional. In most cases you don't need to install the anti-flicker snippet.

Generally, it is recommended to load the snippet asynchronously as this minimises any impact on page load speed and site performance but depending on the current site set up and priorities, it may be more suitable to use the synchronous version of the snippet.

What is the Anti-Flicker Snippet?

The Anti-flicker snippet (also known as the Page Hiding snippet) is used to minimize page flicker that users could experience while the changes are being applied. This will temporarily hide the page, for up to 4 seconds, while the Optimize container loads. The timeout setting is adjustable if necessary.

Previously, the anti-flicker snipper was highly recommended for implementation, however with the new Optimize snippet, Google have mentioned this is no longer required unless you are experiencing a flicker.

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

Replace 'OPT_CONTAINER_ID' with your Optimize Container ID.

This should be placed immediately before the Optimize snippet. The dataLayer should never be reassigned any time after the anti-flicker snippet.

Order of Snippets

During implementation, it is very important to have the order of the snippets set up correctly. The only thing that should appear before the Optimize snippet is:

  1. Any data layer initialization.
  2. Any scripts that declare JavaScript variables, functions, or set cookies that you wish to use in Optimize experiences. This includes jQuery or any JavaScript library that you wish to use in implementation. (Note: jQuery isn't installed via Optimize by default.)
  3. The optional anti-flicker snippet

The order of the snippets should be as follows:

<head>
	<meta charset>
	// JavaScript variables or DataLayer declarations
	// Anti-flicker snippet (optional)
	// Optimize snippet
	// Hardcoded GA Snippet / GTM snippet <script portion>
	…
</head>

<body>
	// GTM snippet <no script> portion
	…
</body>

In summary…

Our best practice implementation for Optimize is hardcoding the snippet straight onto the site using the asynchronous snippet as this minimises any impact on page load speed and site performance (however there may be cases where the synchronous version is better suited for implementation).

The Anti-flicker snippet is optional that further helps prevents page flickering and provides your visitors with a seamless user experience. It is not necessary to implement this unless you are experiencing a flicker with the new snippet.

Now that you’ve implemented Optimize, you can start running some exciting A/B tests and personalised experiences on your site!

Join the Discussion

Get instant blog updates by email.