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 combined Analytics-Optimize snippet and the optional page-hiding snippet, customized with your Optimize container ID. Both snippets are ready to be deployed on the web pages that you wish to experiment on.

Step 1: Deploy the Analytics-Optimize snippet

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

To deploy Optimize, copy the combined Analytics and Optimize snippet from the dialog box 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 combined Analytics-Optimize snippet, 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 snippets is important. Generally, the order of the tags should be:

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

Here are some best practices to keep in mind:

  1. The page-hiding snippet should be placed immediately before the Analytics-Optimize snippet on the page (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 Analytics-Optimize snippet:
    • <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 Analytics-Optimize snippet:
    • 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 the Analytics-Optimize snippet loads on the page – perfect for use with dynamic pages or web apps. Learn more about Activation Events.

Example: Combined Analytics-Optimize snippet

The Optimize snippet 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 combined Analytics-Optimize snippet 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: Combined Analytics-Optimize snippet with page-hiding

The following is an example of an HTML page with page-hiding and the combined Analytics-Optimize snippet:

<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>
<!-- Analytics-Optimize snippet -->
    <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 combined Optimize-Analytics snippet 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?