This article will help you:
- Implement the Optimizely snippet if you're using a Tag Management System
- Evaluate the tradeoffs of implementing Optimizely inside or outside of the TMS
- Implement Optimizely and your analytics tags using Tealium iQ or Ensighten
Are you thinking about using Ensighten or Tealium's iQ tag manager to load Optimizely's snippet?
Many Optimizely customers use Tag Management Systems (TMS) to manage multiple on-site tags, such as analytics and remarketing scripts, without involvement from IT departments. In this article, we’ll discuss the best ways to implement Optimizely with a Tag Manager, and describe the implementation process with Tealium iQ and Ensighten. For Google Tag Manager, see our separate GTM article.
Best Practices for Tag Managers
In this section, we'll walk through best practices and considerations for implementing Optimizely with a Tag Management System.
Load Optimizely Synchronously
If you’ve read our article on implementing Optimizely, you should be familiar with the idea that Optimizely needs to load in the <head> tag of your site, before any elements load on the page and before your analytics scripts run. This is how Optimizely loads variations and integrates with your analytics platforms.
To make sure that Optimizely loads and integrates correctly, you must make sure that Optimizely is able to finish loading before other tags on your page execute. This is known as 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 a tag manager (recommended, especially with Google Tag Manager)
- Use a tag manager that supports synchronous loading such as Tealium or Ensighten.
Why does Optimizely need to be loaded synchronously? Because we apply visual changes to your website, so Optimizely needs to load in the <head> tag, before your page elements load.
There are some potential pitfalls to loading Optimizely through a tag manager, especially a tag manager that doesn't support synchronous loading. These include:
- If you partially deploy Optimizely on your site, you may end up not deploying Optimizely on some pages where you want to track goals. This will cause goals not to track.
- There is some risk that another person in your organization who is unfamiliar with Optimizely may change your configuration and cause side effects.
- If you load Optimizely asynchronously, your analytics integrations may not function properly.
- If you load Optimizely asynchronously, you may see a "flicker" or "flash" effect, where the original page shows briefly before the variation loads.
This is why we typically recommend loading Optimizely outside of your tag manager if possible.
Currently, Tealium and Ensighten support synchronous loading.
Did you know you can use your TMS as a way to deploy data layer events in Optimizely that you might normally place on your page, like custom event goals? Trevor Fox at Swellpath provides a great walkthrough for how to use your Tag Manager to do this.
Where to load Optimizely and your tag manager on your page
When loading Optimizely and a Tag Manager on your site, we recommend loading Optimizely outside of your tag manager (especially if you're using Google Tag Manager). Place the Optimizely Snippet at the top of the <head> tag of your site, then place your Tag Manager below Optimizely, just as you would normally place your analytics tags below Optimizely.
Here is an example of how Optimizely and a tag manager might look in your site's code:
// Insert Tag Manager Code Here
There are two ways to implement Optimizely within Tealium: synchronously (preferred) and asynchronously by blocking all other tags from loading until after Optimizely loads.
Load Optimizely synchronously in Tealium
If you are able to load Optimizely synchronously within Tealium, choose this method over the asynchronous method described below. This is also the method that Tealium recommends as a best practice.
To load Optimizely synchronously, you’ll need to edit your template in Tealium iQ.
- Click the drop-down in the top-right where your name is displayed, then click Manage Templates
- In the Edit Your Existing Template drop-down, select uTag Sync (Profile) UID:sync.
- You’ll now see a code box. Paste in the following under the existing text:
Use your actual Optimizely snippet code in this script -- replace ‘12345678’ with your actual project ID.
Once you’ve done this, you can save and publish, then integrate Optimizely with your analytics platform. The only difference from adding these tags directly to your page is that you will place the analytics tracking calls in the appropriate tags or extensions within Tealium. For Google Universal Analytics, you can enable the tag by:
- In the Tealium Tag Marketplace, search for the Google Universal Analytics tag.
- Turn on the integration by setting Enable Optimizely Integration to On.
- Make sure the Tracker Name is the same as the Custom Tracker that you set in each Optimizely experiment that you integrate with UA. You can leave this empty, if you do so you should also leave this field empty in your Optimizely experiments.
Load Optimizely asynchronously in Tealium
We recommend only using this asynchronous method if you are not able to use the synchronous method. Using this method, you’ll run Optimizely asynchronously while blocking other tags (like analytics) from loading until Optimizely is finished loading.
Why does this need to happen? Because if Optimizely is still loading after other tags (like your analytics tags, or elements on your page) execute, you run the risk of “page flashing” or broken analytics integrations, as we describe above.
To set up Optimizely asynchronously, you’ll need to run it as a “blocking” tag in Tealium. Here’s how:
- First of all, make sure that you’ve already set up your analytics integrations in Optimizely. The only difference from adding these tags directly to your page is that you will place the analytics tracking calls in the appropriate tags or extensions within Tealium.
- Also, make sure that you’ve updated Tealium to the latest utag.js template (v 4.010 or later)
- Add a new tag for Optimizely. Within Tealium, click the Tags tab, then the Add Tag button. Search for “Optimizely (Async)” and click Add.
- You’ll now see the Tag Configuration menu. Under Vendor Configuration, click Extract from Code, and paste in your Optimizely Snippet. Click Extract to proceed.
- Before you go to the next step (Load Rules), click the Advanced Settings dropdown. Set Wait Flag to No.
- Still in the Advanced Settings section, scroll down to the Custom Script Source field. In this field, add your Optimizely Snippet, starting with the two slashes. For example: //cdn.optimizely.com/js/12345678.js
- We recommend adding a "Note" to your tag notes as a comment to indicate you are using Optimizely as a blocking tag.
- Make sure Optimizely is first in the list of tags in Tealium.
Load Optimizely synchronously in Ensighten
If you're using Ensighten, you can deploy Optimizely's snippet synchronously. Here's how:
- Within Ensighten Manage, create a new deployment.
- In the Project Script URL field, add the portion of your Optimizely snippet between //cdn and .js, as in the image below:
- Set the Condition to Global and the Execution to Immediate.
- Set the order of priority so that Optimizely fires before other tags, including your analytics tags and any other asynchronous tags.
Load Optimizely synchronously in Signal
In order to ensure clean content delivery with Optimizely, load Signal synchronously. Contact your Client Service representative to consult and provide the code as this is a non-standard deployment.
Example Synchronous code snippet: