Use a tag manager with Optimizely snippet

You should not use a tag manager to load Optimizely's snippet. Loading Optimizely Web Experimentation through a tag manager can cause issues such as page flashing, where the original version of your page is briefly displayed to visitors before the Optimizely experiment. It can also cause issues with your analytics integrations.

To deliver the best experience to your visitors, you should implement Optimizely outside of a tag manager.

If you must use a tag manager to load Optimizely Web Experimentation, the following sections describe potential pitfalls. Contact your Customer Success Manager to discuss implications for your site.

Load Optimizely Web Experimentation synchronously

Implement Optimizely Web Experimentation in the <head> tag of your site so that it loads before any other analytics tags run and before your page elements load. This is because Optimizely applies visual changes to your website.

To make sure that Optimizely loads and integrates correctly, make sure that Optimizely Web Experimentation can finish loading before other tags on your page execute. This is called synchronous loading because all tags load one after the other. To ensure synchronous loading:

Load Optimizely Web Experimentation in the tag of your page, outside of a tag manager(recommended, especially with Google Tag Manager).
Use a tag manager that supports synchronous loading such as Tealium or Ensighten (not Google Tag Manager).

Potential pitfalls and best practices

Here are some potential pitfalls to loading Optimizely Web Experimentation through a tag manager that does not support synchronous loading, especially Google Tag Manager:

If you partially deploy Optimizely Web Experimentation on your site, you may not deploy Optimizely Web Experimentation on some pages where you want to track goals or events. This will cause goals or events not to track.
Another person in your organization who is unfamiliar with Optimizely Web Experimentation may change your configuration and cause side effects.
If you load Optimizely Web Experimentation asynchronously, your analytics integrations may not function properly and you could see a "flicker" or "flash" effect, where the original page shows briefly before the variation loads.

Loading Optimizely Web Experimentation outside of your tag manager can help avoid these issues.

📘
Note
You can use your tag manager to deploy data layer events in Optimizely Web Experimentation that you might normally place on your page, like custom event goals. See Scale Optimizely Testing with Google Tag Manager from Trevor Fox.

If you load Optimizely Web Experimentation and a tag manager on your site, load Optimizely outside of your tag manager (especially if you use Google Tag Manager).

Place the Optimizely Web Experimentation snippet at the top of the tag of your site, then place your tag manager below the Optimizely snippet, just like you would normally place your analytics tags below Optimizely code.
```
<head>
   <script type="text/javascript" src="//cdn.optimizely.com/js/12345678.js"></script>
</head>
<body>
   // Insert Tag Manager Code Here
</body>
```

Load Optimizely Web Experimentation synchronously

Potential pitfalls and best practices

📘Note

📘
Note