Install Optimize with analytics.js

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 display experiences to your website visitors. This article will guide you through the process of adding Optimize to the existing analytics.js snippet on your website.

Other installation methods

Note: If you don't have Google Analytics installed on your website, start here.

  • If you use the Optimize snippet (optimize.js), start here.
  • If you use Google Tag Manager (GTM), start here.
  • If you use global site tag (gtag.js), start here.
  • If you use analytics.js (formerly "Universal Analytics" or "UA"), keep reading.
The Optimize snippet (optimize.js) or Google Tag Manager (GTM) are recommended for all new Optimize implementations.

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 "OPT-" or "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  can look like either of these:

OPT-A1B2CD
GTM-A1B2CD

Note: You will see container IDs referred 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").

Advanced configuration options

By default, the data layer initiated and referenced by Google Tag Manager, is called dataLayer. If you use a different name for your data layer, you can use it in Optimize in one of two ways:

1. If you load Optimize via Google Analytics, the syntax is:

ga('require', 'OPT_CONTAINER_ID', {dataLayer: 'CUSTOM_DATALAYER_NAME'});

Note: Replace OPT_CONTAINER_ID with your Optimize container ID and replace CUSTOM_DATALAYER_NAME with your custom dataLayer name.

2. If you load Optimize via gtag.js, append the dataLayer query parameter to the gtag request:

https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID&l=CUSTOM_DATALAYER_NAME

Note: Replace GA_MEASUREMENT_ID with your Google Analytics property ID (or "measurement ID") and replace CUSTOM_DATALAYER_NAME with your custom dataLayer name.

Anti-flicker snippet with custom dataLayer name

If you follow the steps in the Optimize snippet installation article (especially our installation best practices), your web page should load Optimize before other resources that are required to display the page. When your page loads Optimize first, you won't see flicker and you should not install the anti-flicker snippet.

If you notice page flicker, the first step is to follow the steps in the Optimize snippet installation article (and the best practices section) before doing any other troubleshooting. Specifically, you must ensure that the Optimize snippet is installed as high as possible in the <HEAD> of your website. Doing this addresses most flicker issues.

If you notice page flicker – despite following the steps above – the most effective way to mitigate it is to temporarily hide the page while the Optimize container loads. This is accomplished by adding the anti-flicker snippet as the first script on your page(s).

Code sample

<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','CUSTOM-DATALAYER-NAME',4000,
{'OPT_CONTAINER_ID':true});</script>

Note: Replace CUSTOM-DATALAYER-NAME with your custom DataLayer name and replace OPT_CONTAINER_ID with your Optimize container ID.

Tagging best practices

For optimal performance, place the Optimize snippet at the top of the <HEAD> tag on every web page you wish to optimize.

The only items that should appear above the Optimize snippet are:

  1. Any dataLayer initialization code. Note: the dataLayer variable should never be reassigned after the anti-flicker snippet (when used).
  2. Any scripts that declare JavaScript variables, functions, or set cookies you use in Optimize, like jQuery or JavaScript libraries used in implementation or targeting. Note: jQuery isn't installed by Optimize by default.
  3. The optional anti-flicker snippet, when used to mitigate page flicker.
You can target dynamic pages and web apps with 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.

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

Требуется помощь?

Войдите в свой аккаунт, чтобы мы могли предоставить вам дополнительные варианты поддержки и быстрее решить вашу проблему.