- 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 correctly integrate with Google Tag Manager, 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):
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.