Search
Clear search
Close search
Google apps
Main menu

Serve Optimize via Google Tag Manager

An alternate method.

AUDIENCE

This is article is for users that wish to serve the Optimize tag type from Google Tag Manager.

 

  • If you don’t use Tag Manager, see this article.
  • The recommended Optimize and GTM method can be found in this article.

If you use Google Tag Manager (GTM) to deploy Google Analytics (GA) and wish to use GTM’s native Optimize tag, follow the instructions 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

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.

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 - www.example.com"
  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.
  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>
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>

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?