Audience
This article is for customers that want to install Optimize with optimize.js (async).
Follow the steps below to install Optimize on your website.
Prerequisites
Before you can install the snippet on your website, you need the following:
- A Google Analytics account and property
- A Google Analytics property installed on your website
- A Google Optimize account and container linked to the Google Analytics property
- The ability to edit your website source code
You can review these steps in more detail in Set up Optimize.
Install Optimize with optimize.js (async)
The asynchronous (async) version of Optimize 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.
Place the Optimize snippet (below) at the top of the <HEAD> in your web page(s).
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:
- 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).
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 Google 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.
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_MEASUREMENT_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
to:
gtag('config', 'GA_MEASUREMENT_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_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
If you previously installed the anti-flicker snippet, you should remove it at the same time.