Install Optimize with optimize.js

How to add Optimize to your website using Optimize.js.
Optimize is installed by adding a small snippet of code to your website to display new experiences to your visitors. This article will guide you through the process of installing the optimize.js snippet on your website.

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 installations

If you have a previous Optimize snippet installed on your website, you must remove it before proceeding.

How to remove the Optimize snippet

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.

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.

Snippet placement 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.
Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue