Search
Clear search
Close search
Google apps
Main menu

Deploy Optimize

How to add Optimize to your website.

In order to run Optimize experiments, you need to add the Optimize snippets to your website. The main Optimize snippet is a line of code that’s added to your existing Google Analytics tracking code. This line of code loads the specified Optimize experiment container as a Google Analytics plugin. The page-hiding snippet reduces the risk of page flicker and timeouts on slow connections.

In this article:

Prerequisites

  1. Complete the steps in the Set up Optimize article.
  2. Universal Analytics (analytics.js) installed on your website.
  3. Permission to make changes to your website.
  4. Basic HTML editing experience.

Get the Optimize snippet

The recommended way to deploy Optimize is to add it to your existing Google Analytics tracking code directly on your website, not through a tag management solution.

Get the Optimize snippet:

  1. Go to your Experiments page.
  2. Locate the Container information panel (on the right side of the page).
  3. Click Install Optimize snippet.
  4. Click the blue VIEW SNIPPET button.
  5. Follow the on-screen instructions.

The snippet dialog contains your modified Analytics tracking code and the optional page-hiding snippet, customized with your Optimize container ID. Both are ready to be deployed on the web pages that you wish to experiment on.

Step 1: Deploy the modified Analytics tracking code

To begin running experiments on your website you need to add the modified Analytics tracking code to your page’s HTML code. You can add the code to all of your web pages or just the pages that you wish to experiment on.

To deploy Optimize, copy the modified Analytics tracking code from the dialog box in Optimize and place it as early as possible in the <HEAD> and before any other tracking scripts (not used in experiments).

Learn more about the order of the snippets below.

Step 2: Deploy the page-hiding snippet

In addition to the modified Analytics tracking code, we recommend that you also install the page-hiding snippet which reduces the risk of page flicker. This section of code helps also ensures that users on slow connections have a better experience by only showing experiment variants when the Optimize container loads within the set timeout.

Learn more about customizing the page-hiding snippet, including how to change the timeout value.

Tagging best practices

Placement of the Optimize code snippets is important. Generally, the order of the tags should be:

  1. Any JavaScript (e.g. jQuery) that you wish to use in Optimize experiments. We recommend you keep these to a minimum.
  2. Initialization of any variables needed for targeting (data layer, JavaScript, cookies, etc).
  3. Page-hiding snippet.
  4. Modified Analytics tracking code with Optimize plugin.
  5. Tag Manager container snippet.
  6. Other JavaScript, trackers, and ad tags.

Here are some best practices to keep in mind when adding the code to your web pages:

  1. The page-hiding snippet should be placed immediately before the modified Analytics tracking code (after the <meta charset> declarations).
  2. Move your Google Analytics tracking code up to the <HEAD>, if it's not already there. It should immediately follow the page-hiding snippet, if possible.
  3. The following should come before the modified Analytics tracking code:
    • <meta charset>
    • Data layer initialization.
    • Setting cookies.
    • Any scripts that you may want to use or that declare JavaScript variables that you wish to use in Optimize experiments. For example, jQuery and JavaScript used to target an Optimize variant.
    • Page-hiding snippet.
  4. The following should come after the modified Analytics tracking code:
    • Other trackers, analytics tags, ad tags and/or tags deployed by a tag-management system.
    • Other scripts that you won’t target Optimize experiments against.

You can also target variables that are set after Optimize plugin loads, for example with dynamic pages or web apps, by using Activation Events.

Example: Modified Analytics tracking code

The Optimize plugin is a single line of code, containing your Optimize container ID, that looks like this:

ga('require', 'GTM-XXXXXX');

When added to your Analytics tracking code the modified code looks like this:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-X', 'auto');
  ga('require', 'GTM-XXXXXX');
  ga('send', 'pageview');

</script>

Note: Replace GTM-XXXXXXX with your Optimize container ID, and UA-XXXXXXX-X with your Analytics tracking ID.

Example: Modified Analytics tracking code with page-hiding

The following is an example of an HTML page with page-hiding snippet and the modified Analytics tracking code:

<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>
<!-- Modified Analytics tracking code with Optimize plugin -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXXXX-X', 'auto');
    ga('require', 'GTM-XXXXXX');
    ga('send', 'pageview');
    </script>

Note: Replace GTM-XXXXXX with your Optimize container ID and replace UA-XXXXXXXX-X with your Analytics tracking ID.

Next steps

After you deploy the modified Analytics tracking code on your web page(s), you’re ready to create your first A/B, redirect or MVT test. 

Was this article helpful?
How can we improve it?