Install optimize.js (sync)

Audience

This article is for customers that want to install Optimize with optimize.js (sync).

Not sure if you should install sync or async? Read the Optimize installation overview first.

Follow the steps below to install Optimize 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.

Install Optimize with optimize.js (sync)

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.

Place the Optimize snippet (below) at the top of the <HEAD> in your web page(s).

<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>
Note: Replace OPT_CONTAINER_ID with your Optimize container ID.

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

 

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.

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.

Mitigate page flicker

Page flicker – also known as JavaScript flicker, DOM flicker, Flash of Unstyled Content (FOUC), and Flash of Unstyled Text (FOUT) – occurs when a browser engine renders a web page before all of information is retrieved, The page appears briefly with the browser's default styles before loading again after the new style rules are loaded and applied.

If you notice flicker on your web experience, first move your Optimize snippet to the top of the <HEAD> in your HTML. If flicker is still noticeable, install the anti-flicker snippet and customize it to suit your needs.

Remove previous Optimize snippets

 If you have a previous Optimize snippet installed on your website, you must remove it before re-tagging your site.

Not sure if you already have Optimize?
Use the Tag Assistant Chrome extension or view your web page's source code and search for your Optimize container ID. 

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.


 
Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue