Install Optimize using analytics.js

This article is only for users of analytics.js that wish to add Optimize.

Optimize is a line of code that you can add to your existing analytics.js tag to run experiments and personalizations on your website. 

Note: This article is only for users of analytics.js that wish to add Optimize.
  • If you don't have Google Analytics installed on your website, start here.
  • If you use global site tag (gtag.js), start here.
  • If you use Google Tag Manager (GTM), start here.
  • If you use analytics.js (formerly "Universal Analytics"), keep reading.

Global site tag (gtag.js)

The global site tag (gtag.js) library is recommended for all new Google Analytics implementations.

Learn more about gtag.js on Google Developers.

Prerequisites

Before proceeding you must have an Optimize account and a container that's linked to a Google Analytics property. You can review how to do these in the Set up Optimize article. You also need edit access to your website's HTML in order to tag it with the Optimize snippet.

STEP 1: Get your analytics.js tag

You can find your analytics.js tag in the content management system (CMS) that hosts your website or simply by using your browser's view source command.

Your analytics.js tag will look like this:

<!-- Google Analytics -->
<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', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Note: Replace GA_MEASUREMENT_ID with your Google Analytics property ID (or "measurement ID").

The Analytics administrative interface only provides code in the global site tag (gtag.js) format and doesn't support the analytics.js.

STEP 2: Get your Optimize container ID

Your Optimize container ID is a 9-digit alphanumeric string beginning with "GTM-" that uniquely identifies it. The container ID is part of the Optimize snippet presented when you click INSTALL OPTIMIZE. You can also get your Optimize container ID under Container setup > Container information. Learn more about Optimize containers.

Your Optimize container ID will look like this:

GTM-A1B2CD

Note: You will see container IDs referred to generically to as  'OPT_CONTAINER_ID' in documentation.

STEP 3: Create your Optimize snippet

Create your Optimize snippet by replacing 'OPT_CONTAINER_ID' in the following line of code with your Optimize container ID:

ga('require', 'OPT_CONTAINER_ID');

STEP 4: Add Optimize to your analytics.js tag

Take the Optimize snippet that you created in Step 3, and add it to your analytics.js tag, directly before the line that starts with ga('create',

<!-- Google Analytics -->
<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('require', 'OPT_CONTAINER_ID');
ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Note: Replace OPT_CONTAINER_ID with your Optimize container ID and replace GA_MEASUREMENT_ID with your Google Analytics property ID (or "measurement ID").

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. Anti-flicker 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 anti-flicker 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 anti-flicker 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.
  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.

Next steps

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

Эта информация оказалась полезной?
Как можно улучшить эту статью?