Install Optimize with analytics.js

This article includes information about a legacy snippet that isn't supported for new installations.

The Optimize installation overview Includes instructions on how to install Optimize on your website.

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.

We strongly recommend using the optimize.js installation method as it offers the best performance and is the easiest way to install Optimize.

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 the Google tag (gtag.js), start here.
• If you use analytics.js (formerly "Universal Analytics" or "UA"), keep reading.

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 TAG_ID with your tag ID.

The Analytics administrative interface only provides code in the Google tag (gtag.js) format and doesn't support 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('create', 'GA_MEASUREMENT_ID', 'auto');
ga('require', 'OPT_CONTAINER_ID');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Note: Replace OPT_CONTAINER_ID with your Optimize container ID and replace TAG_ID with your tag 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:

• Any dataLayer initialization code. Note: the dataLayer variable should never be reassigned after the anti-flicker snippet (when used).
• 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.
• The optional anti-flicker snippet, when used to mitigate page flicker.

If you use a content security policy, see Optimize security requirements to make sure your content security policy allows for the domain in the snippet on your site (i.e., google-analytics.com or googleoptimize.com).

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.

Related resources

• Deploy Optimize using gtag.js
• Optimize and Google Tag Manager
• Deploy the anti-flicker snippet
• Using the Optimize anti-flicker snippet – Google Developers, Optimize
• Renaming the data layer – Google Developers, Tag Manager
• Add analytics.js to your site – Google Developers, Analytics