Optimize installation overview

How to add Optimize to your website.

Optimize is installed by adding a small snippet of code to your website to display new experiences to your visitors.

Prerequisites

If you haven't completed the initial Optimize setup, please do so before installing the snippet on your website. Here's a checklist of what you need:

  1. A Google Analytics account and property.

  2. Google Analytics installed on your website.

  3. An Optimize account and container linked to the Google Analytics property.

  4. Edit access to your website HTML to add the Optimize snippet.

You must complete all of the steps above before installing the Optimize snippet on your website. You can review these steps in more detail in our Set up Optimize article.

Remove previous Optimize installations

If you've previously tagged your website with Optimize, you must remove any previous Optimize snippets from your website before proceeding.

How to remove previous Optimize snippets

Removing Optimize depends on a) how it was installed on your website and, b) how Google Analytics was implemented. Once you've got this information, follow the instructions below to remove the Optimize snippet.

Optimize
installed via
Google Analytics
measurement via
Instructions
GTM Remove the Optimize tag via Tag Manager. Learn more.
analytics.js GTM Remove the analytics.js snippet from the page.
gtag.js GTM Remove the gtag.js snippet from the page. Learn more.
gtag.js gtag.js Remove the “optimize_id” configuration parameter from your gtag.js snippet (see Example A below).
analytics.js analytics.js Remove the "ga(‘require’, ‘OPT_CONTAINER_ID’)" line (see Example B below).

Example A

If Optimize is installed via gtag.js and GA measurement is performed by gtag.js, remove the “optimize_id” configuration parameter from your gtag.js snippet.

Change it from:

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

to:

gtag('config', 'GA_TRACKING_ID');

Example B

If Optimize is installed via analytics.js and the page is (only) tracked by analytics.js, remove the "ga('require" line from your analytics.js snippet.

Change it from:

ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('require', 'OPT_CONTAINER_ID');
ga('send', 'pageview');

to:

ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');

If you previously installed the anti-flicker snippet, you should remove it at the same time.

Pick a method

There are two ways to install Optimize, depending on how you deploy Google Analytics:

  1. Using the Optimize snippet (optimize.js)
  2. Using Google Tag Manager (GTM)

Method 1: Install Optimize with optimize.js

Start with the basic installation, if you notice page flicker, try the Advanced installation.

Basic install: optimize.js

Choose the snippet for your needs and place it at the top of the <HEAD> tag on your web page(s).

EXAMPLE 1: Synchronous snippet

The synchronous (sync) version of Optimize is recommended for most users because it features the best performance and has a minimal impact on your website's rendering speed.

You don't need the anti-flicker snippet when using the synchronous snippet in most cases.

CODE SAMPLE

<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>

Note: Replace OPT_CONTAINER_ID with your Optimize container ID.

EXAMPLE 2: Asynchronous snippet

The asynchronous (async) snippet doesn't block your website to load Optimize, so it has the least impact on your website's rendering speed. You can mitigate page flicker by adding the anti-flicker snippet.

CODE SAMPLE

<script async src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>

Note: Replace OPT_CONTAINER_ID with your Optimize container ID.

Advanced install: optimize.js + anti-flicker snippet

We generally expect the new snippet to be fast and therefore not require the use of the anti-flicker snippet when the Optimize snippet is used in synchronous (sync) mode. We recommend using the synchronous version with anti-flicker if you expect to use Google Analytics audiences, Ad targeting, or 'Time since first arrival' (behavior targeting) in the future.

Choose the snippet for your needs, place it at the top of the <HEAD> tag on your web page(s), but after any dataLayer initialization code.

EXAMPLE 3: Synchronous snippet + anti-flicker

<!-- Anti-flicker 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,
{'OPT_CONTAINER_ID':true});</script>

<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID" onerror="dataLayer.hide.end && dataLayer.hide.end()"></script>

Note: Replace OPT_CONTAINER_ID with your Optimize container ID.

EXAMPLE 4: Asynchronous snippet + anti-flicker

<!-- Anti-flicker 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,
{'OPT_CONTAINER_ID':true});</script>


<script async src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID" onerror="dataLayer.hide.end && dataLayer.hide.end()"></script>

Note: Replace OPT_CONTAINER_ID with your Optimize container ID.

Method 2: Install Optimize with Google Tag Manager (GTM)

Note: If you use the global site tag (gtag.js), follow these instructions instead.

If you want to deploy Optimize with Google Tag Manager, follow the instructions below. If you use another tag management system (TMS), follow their instructions to add Optimize to your existing Google Analytics tag.  

Note:
If Optimize is installed via Tag Manager, use the page view trigger type. Page hiding will not work properly if the Optimize tag isn't using a page view trigger because DOM ready and window loaded take too long to load the Optimize container.

Custom tracker settings

Users of custom tracker settings must use the shared Google Analytics Settings variable in Tag Manager and Analytics to ensure that all tracker settings match between tags.

Step 1: Collect the necessary information

You need the following information to install Optimize:

  1. Your Analytics tracking ID.
  2. Your Optimize container ID.
  3. Confirm that your Tag Manager and Analytics tracker settings use the shared Google Analytics Settings variable.

Step 2: Configure Optimize in Tag Manager

Once you have the information above, follow these steps to configure Optimize in Tag Manager:

  1. Sign in to Tag Manager and select an account.
  2. Click Tags > New.
  3. Click Tag Configuration > Google Optimize.
  4. Enter your Optimize container ID.
  5. Select a Google Analytics Settings variable.
  6. Click Save and save the tag without triggers.
  7. Open the Analytics page view tag for the Analytics property linked to your Optimize container.
  8. Click Tag Configuration > Advanced Settings > Tag Sequencing.
  9. Check the box to fire a tag before this tag fires. Under the Setup Tag heading, click the menu and select the desired Optimize tag.
  10. Configure the Optimize tag to fire once per page, then save it.
  11. Publish your Tag Manager container for the changes to take effect.

Learn more in the Tag Setup Guide for Optimize in the Tag Manager help center.

Snippet placement best practices

For optimal performance place your Tag Manager tag at the very top of the <head> of every page you wish to optimize.

The only items that should appear above the global site tag are:

  1. Data layer initialization. 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 that you wish to use in Optimize experiences. For example jQuery or any JavaScript library that you wish to use in implementation or targeting. Note: jQuery isn't installed by Optimize by default.
  3. The optional anti-flicker snippet which can be used to avoid flicker.

Check your Optimize installation

The best way to ensure that Optimize is running smoothly is to create a simple personalization, then use installation diagnostics and preview mode to confirm that it renders as you expect in your browser.

  • Installation diagnostics allow you verify your Optimize installation by clicking Check installation in the information panel. A diagnostic message will notify you if any issues are detected. Learn more.
  • Preview mode allows you to validate that your experience looks correct before starting it. Learn more.
  • Google Tag Assistant is a Chrome extension that automatically validates the implementation of the global site tag (gtag.js) on any given page. Learn more about Tag Assistant.

Troubleshoot page flicker

The instructions above will be adequate for most websites. If you notice page flicker while running Optimize, move the global site tag or Tag Manager installation higher in the <head> of the page. If flicker is still noticeable, install the anti-flicker snippet and customize it to suit your needs.

Additional implementations

The Optimize snippet (optimize.js) and Google Tag Manager (GTM) are the recommended tagging methods for new implementations.

If you deploy Google Analytics with the global site tag (gtag.js) see this article and if you use Universal Analytics (analytics.js) please refer to this article to install Optimize on your website with analytics.js.

Was this helpful?
How can we improve it?