Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

Implement Optimizely with Google Tag Manager

 
relevant products:
  • Optimizely Classic

THIS ARTICLE WILL HELP YOU:
  • Implement the Optimizely snippet and Google Tag Manager on your site
  • Implement the Optimizely snippet in Google Tag Manager
  • Evaluate the benefits and drawbacks of implementing Optimizely in Google Tag Manager

When you set up Optimizely for the first time, you'll need to implement the Optimizely snippet: a single line of code that lets you start running A/B tests. This article explains how to use Google Tag Manager to implement the Optimizely snippet—including best practices.

Load Optimizely synchronously

To load and integrate correctly, Optimizely must finish loading before other tags on your page execute. This is called synchronous loading because all tags load synchronously, one after the other. There are two ways to ensure that this happens:

  • Load Optimizely in the head tag of your page, outside of Google Tag Manager

  • Use a different tag manager that supports synchronous loading, such as Tealium or Ensighten

Read our article on implementing Optimizely for best practices for implementing the Optimizely snippet on your site.

Load Optimizely and Google Tag Manager on your page

We recommend loading Optimizely outside of Google Tag Manager because Google Tag Manager does not support synchronous loading. Place the Optimizely snippet at the top of the head tag of your site, then add the Google Tag Manager script below the Optimizely snippet. In the opening of the body tag, add the Google Tag Manger snippet. For more information, check out the quick start guide from Google

Here's an example of how Optimizely and Google Tag Manager might look in your site's code (replace "GTM-XXXX" with your container ID):

<head>

<script type="text/javascript" src="//cdn.optimizely.com/js/12345678.js"></script>

<!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm...ertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXX');</script>
  <!-- End Google Tag Manager -->

</head>

<body>

<!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns....?id=GTM-KC9NS2"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

</body>

Load the Optimizely snippet in Google Tag Manager

If you do not have easy access to your site's source code to add the Optimizely snippet, you can inject the Optimizely snippet through Google Tag Manager. This option doesn't support synchronous loading, so there are a few tradeoffs you should know about:

  • If you partially deploy Optimizely on your site, you may end up not deploying Optimizely on some pages where you want to track goals (which means you won't track goals on those pages)

  • Another person in your organization who is unfamiliar with Optimizely may change your configuration in Google Tag Manager

  • If you load Optimizely asynchronously, you may see a flickering or flashing effect, which happens when the original page shows briefly before the variation loads

  • If you load Optimizely asynchronously, your analytics integrations may not function properly and may report inaccurate data

We do not recommend loading both the Optimizely snippet and your analytics integration through Google Tag Manager. However, if this is the only method available to you, you can learn about a workaround in this article. Otherwise, we recommend using a different tag manager that supports synchronous loading, such as Tealium or Ensighten.