How to Install Google Optimize for Best Performance

How to Install Google Optimize for Best Performance

Whether you are just getting started with Google Optimize or are an experienced user, it is critical to ensure that the installation of Optimize on your website is—well—optimal!

We have previously detailed how to install Google Optimize alongside Google Analytics and Google Tag Manager. This method was a bit complicated since Optimize needed to piggyback on the Google Analytics script, and a separate “page-hiding” snippet was needed to avoid page flicker. However, we can now update and simplify our recommendation with the standalone optimize.js snippet.

As a reminder, the placement and configuration of your Optimize snippet, GTM container, and data layer are all important. Placing code in the wrong order or using the wrong configuration settings can break your GA tracking, prevent tags from firing through GTM, invalidate your A/B tests, or at worst disable your entire web analytics implementation.

Here’s a step-by-step guide to help you get Optimize up and running alongside your existing implementation.

How to Install Google Optimize

At this point, you should have already created an Optimize account and linked it to your Google Analytics property. If you haven’t, follow the steps in this Help Centre article first. Once your account is created and linked, you’ll be ready to proceed with the steps below. We’ll go through each piece of code in the order it should appear on the page. A full code example is included at the end.

1. Data Layer Initialization

If you are explicitly initializing your data layer for GTM, this code needs to come first. This ensures that your data layer variables are available for use in experiment targeting in Optimize. The data layer snippet should be placed immediately after the opening <head> tag on the page. If you are not setting any data layer variables, this step can be omitted.

<head>
<script>
window.dataLayer = window.dataLayer || [];
//If necessary, push info into data layer here with dataLayer.push()
</script>

2. Google Optimize Snippet

You can find your Optimize container snippet from the container settings area in Google Optimize. This script runs synchronously to ensure that Optimize can load experiments before your page renders. A separate anti-flicker (or page-hiding) snippet is therefore not required.

In the code below, replace OPT-XXXXXX with your Optimize Container ID. Note that Google Optimize now assigns an “OPT-” prefix for new containers, but container IDs with a “GTM-” prefix will still work.

<!-- Google Optimize -->
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXX"></script>
<!-- End Google Optimize -->

If you are initializing the data layer as shown in Step 1, then the Optimize snippet should immediately follow. Otherwise, the Optimize snippet should be placed immediately after the opening <head> tag.

3. GTM Container Snippet

This is the standard GTM container snippet for the <head> section. Replace GTM-ZZZZZZ with your GTM Container ID.

Although it is possible to deploy Optimize through a tag in GTM, we do not recommend this approach as it will often result in increased latency.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ZZZZZZ');</script>
<!-- End Google Tag Manager -->

Example Implementation

When you put all the pieces together, you will have a combined code snippet for Optimize and GTM that looks like the following.

<head>
<script>
window.dataLayer = window.dataLayer || [];
</script>

<!-- Google Optimize --> 
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXX"></script>
<!-- End Google Optimize -->

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ZZZZZZ');</script>
<!-- End Google Tag Manager -->

...
</head>

Still have questions? Let us know in the comments or get in touch. We would be happy to help you get started with Optimize testing and personalization.

By |2020-05-05T11:53:38-04:00May 4th, 2020|2 Comments
Categories: Google Optimize

2 Comments

  1. Bob June 3, 2020 at 3:34 am - Reply

    Hey,
    I installed GO using GTM, but once i run a test i can see the “A” version for a sec and then it changes to the “B” version.
    I tried adding the flickering code google suggest but it doesn’t help.

    Do you have any idea why it happens?

    Thanks

    • Marc Soares June 3, 2020 at 9:39 am - Reply

      Hi Bob,

      We recommend installing Optimize with the new snippet as detailed in the article above. This will provide the best performance for loading your experiments.

      If you are deploying Optimize through GTM, you can expect more latency. If you have also installed the anti-flicker snippet, make sure you have configured it correctly to work with GTM. You will need to populate the anti-flicker snippet with your GTM container ID (https://support.google.com/optimize/answer/7100284#tag-manager-users). Also ensure that your GTM snippet is placed as high in the of the page as possible.

      Hope that helps!
      Marc

Leave A Comment