Install Optimize

How to add Optimize to your website.

Optimize is installed by adding a small snippet of code to your website to display Optimize experiences (tests and personalizations) to your visitors.

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.

Pick a method

There are two recommended methods of installing Optimize depending on how you deploy Google Analytics:

  1. Method 1 – If using the global site tag (gtag.js).
  2. Method 2 – If using Google Tag Manager (GTM).

Method 1: Install Optimize with the global site tag (gtag.js)

Note: If you use Google Tag Manager, follow these instructions instead.

Step 1: Install the global site tag with Analytics

Note: If you've already tagged your website with the global site tag and Analytics, skip ahead to Step 2 to add your Optimize container ID.

To install Optimize, you need the global site tag (gtag.js) with Google Analytics. You can get the global site tag from the Google Analytics admin console (Admin > Property column > Tracking Info > Tracking Code) or by customizing the example below.

Example: Global site tag with Google Analytics

The following tag loads the gtag.js library, establishes GA_TRACKING_ID as the default Google Analytics property ID, and sends a pageview hit to Google Analytics.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

 

Note: Replace GA_TRACKING_ID with your Google Analytics tracking ID.

Learn more about how to set up Analytics tracking in the Analytics help center.

Step 2: Add Optimize to the global site tag

Once you have the global site tag (gtag.js) with your Google Analytics tracking ID, you need to add your Optimize container ID to the gtag('config' line, e.g.:

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

You can get your customized global site tag populated with your Analytics and Optimize IDs in Optimize (under Container > Container setup > Install Optimize).

Example: Global site tag with Google Analytics and Optimize

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>
 

Note: Replace GA_TRACKING_ID with your Google Analytics tracking ID and replace OPT_CONTAINER_ID with your Optimize container ID.

Step 3: Install the global site tag on your website

To install the global site tag on your website paste the code snippet immediately after the <head> tag on every page that you wish to optimize.

  • If the global site tag is already installed on your website – add your Optimize container ID (see Step 2 above) and move your existing tag to the top of the <head>.
  • If the global site tag isn't installed on your website – install it at the top of the <head> on every web page you wish to optimize.

Note: Only one global site tag is needed per page.

Snippet placement best practices

For optimal performance place the global site tag at the very top of the <head> tag on 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 page-hiding 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.

Method 2: Install Optimize with Google Tag Manager

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 page-hiding 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 page-hiding snippet which can be used to avoid flicker.

 

Verify your Optimize installation

The best way to ensure that your Optimize installation is running smoothly is to create a small test personalization (which can be deleted later), then use installation diagnostics and preview mode to verify that it's running properly.

  • Installation diagnostics allow you verify your Optimize installation by clicking RUN DIAGNOSTICS in the experience information panel. A diagnostic message will notify you if any issues are detected. Learn more about installation diagnostics.
  • Preview mode allows you to validate that an experience looks correct before starting it. Learn more about preview mode.
  • Google Tag Assistant is an optional 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 global site tag (gtag.js) and Google Tag Manager are the recommended tagging methods for new implementations. If you use Universal Analytics please refer to this article to install Optimize on your website with analytics.js. We also have instructions on installing Optimize directly on the page alongside Tag Manager.

Note: Optimize will not work with the legacy ga.js library.

Advanced tagging techniques

Dynamic pages and web apps

You can target variables that are set after Optimize snippet loads – for example with dynamic pages and web apps – by using activation events.

Multiple Optimize or Tag Manager containers

You can use multiple gtag commands on one page by adding 'send_page_view': false to all of them – except one.

Example: Multiple gtag commands

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());


 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_1', 'send_page_view': false});

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

</script>

 

Notes: Replace GA_TRACKING_ID with your Google Analytics tracking ID and replace OPT_CONTAINER_ID_1 and OPT_CONTAINER_ID_2 with your Optimize container IDs.

If you use the optional page-hiding snippet you must configure it to pass all containers. Learn more about loading multiple containers on the Optimize developer site.

Custom dataLayer name

If you want to customize the dataLayer name you must pass the "l" parameter in the script and also change the gtag function.

Example: Custom dataLayer name

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>

 

Note: Replace GA_TRACKING_ID with your Google Analytics tracking ID and replace OPT_CONTAINER_ID with your Optimize container ID.

There are three changes highlighted in the example above:

  1. &l=myNewName is added to the <script>tag
  2. window.myNewName = window.myNewName || [];
  3. function gtag(){myNewName.push(arguments);}

If you use the anti-flicker snippet to reduce flicker, you must change the dataLayer name in the last line when using a custom dataLayer name. In the example below we changed 'dataLayer' to 'myNewName'.

Example: Custom dataLayer with anti-flicker

<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','myNewName',4000,
{'OPT_CONTAINER_ID':true});</script>

Note: Replace OPT_CONTAINER_ID with your Optimize container ID.

Was this helpful?
How can we improve it?