Serve Optimize via Google Tag Manager

How to add Optimize to your website with Tag Manager.

In order to run Optimize experiments, you need to add the Optimize snippets to your website. The main Optimize snippet is a line of code that’s added to your existing Google Analytics tracking code. This line of code loads the specified Optimize experiment container as a Google Analytics plugin. The page-hiding snippet reduces the risk of page flicker and timeouts on slow connections.

How do you deploy Analytics?

How you deploy Optimize depends on how you deploy Analytics. Choose the option below that best describes your configuration:
Most users with a simple Analytics installation, and not using a Tag Management System (TMS) like Google Tag Manager, should use this article for the simplest installation of Optimize.
Advanced users who deploy Analytics with a TMS have two options:
  1. For the best performance we recommend deploying Optimize directly on the page. Learn more.
  2. For greater flexibility, but slightly less performance, you can deploy Optimize via Google Tag Manager by following the step below.
In this article:

The recommended method is to create a modified version of your Analytics tracking code and deploy it directly on the page. This allows the Optimize container to be initialized immediately on page load, without waiting for Tag Manager. This enables experiments to execute faster, reduces page load times, latency, and provides a better user experience.

Learn more about the recommended method.

Alternate method: serve Optimize via Tag Manager

While it’s possible to serve the Optimize plugin via Google Tag Manager, this configuration can result in increased latency on your website (especially on slower connections) or websites that must render a lot of images or are slow to load.

When Optimize is served via Tag Manager, the GTM container must be loaded before the Optimize container. The result is that Optimize experiments only execute after both the Tag Manager and Optimize containers are loaded.

If you’re comfortable with the limitations associated with this method, follow the steps below to serve Optimize via Tag Manager.

Step 1: Collect the necessary information

To deploy the Optimize tag directly in Tag Manager, you need the following information:

  1. Analytics property ID – from Analytics.
  2. Optimize container ID – from Optimize.
  3. Any Analytics tags in Tag Manager with custom Analytics tracker settings.

Use the shared Google Analytics Settings variable in Tag Manager and Analytics to ensure that your tracker settings match between tags.

The following fields must have the same value in both Tag Manager and Analytics:


Step 2: Configure the Optimize tag in Tag Manager

Once you have the information above, follow the Tag Setup Guide for Optimize in Google Tag Manager:

  1. Click Tags → New.
  2. Change the default name of "Untitled Tag" to a descriptive title, such as "Optimize -"
  3. Click Tag Configuration → Google Optimize.
  4. Enter your Google Analytics Tracking ID and your Optimize container ID (a.k.a. the Optimize snippet ID, available the Optimize Container setup panel.)
  5. Click More settings, and configure the Fields to Set and Advanced Configuration with the same values as your Google Analytics tags.
  6. Click Save, and proceed to save the tag without triggers.
  7. Open any Google Analytics Page View tags that are being triggered on load of pages where you want the Google Optimize tag to be fired. Note: Universal Analytics (analytics.js) or Global Site Tag (gtag.js) are required to use Optimize. Classic Google Analytics (ga.js) isn't supported.
  8. Click to edit the Tag Configuration, and open Advanced Settings → Tag Sequencing.
  9. Check the box to fire a tag before this tag fires, and select your Google Optimize tag as a “Setup Tag”.
  10. Click to Save your Google Analytics Page View tag, and repeat on any other Google Analytics Page View tags as relevant.

Step 3: Add the page-hiding snippet

Finally, install the page-hiding snippet on your web pages. While optional, it significantly reduces the risk of page flicker and helps provide a better experience to users on slow connections.

The Optimize page-hiding snippet looks like this:

<!-- Page hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};

Note: Replace GTM-XXXXXX with your Tag Manager container ID (not your Optimize container ID).

Add the page-hiding snippet to your page(s) as early in the <HEAD> as possible, immediately before your modified Google Analytics tracking code with Optimize plugin.

Learn more about the page-hiding snippet.

Was this article helpful?
How can we improve it?