Skip to main content

We are currently experiencing an issue that is preventing customers from submitting support tickets. Please contact us at (866) 819-4486 if you need immediate assistance.

x
Optimizely Knowledge Base

Implementing Optimizely with Tealium iQ or Ensighten

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.

 
Important:

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. 

 
Tip:

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:

<head>
   <script type="text/javascript" src="//cdn.optimizely.com/js/12345678.js"></script>
</head>
<body>
   // Insert Tag Manager Code Here
</body>

Tealium iQ

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.

  1. Click the drop-down in the top-right where your name is displayed, then click Manage Templates


     
  2. In the Edit Your Existing Template drop-down, select uTag Sync (Profile) UID:sync.


     
  3. You’ll now see a code box. Paste in the following under the existing text:
    document.write('<script type="text/javascript" src="//cdn.optimizely.com/js/12345678.js"></script>');

 
Note:

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:

  1. In the Tealium Tag Marketplace, search for the Google Universal Analytics tag.
     
  2. Turn on the integration by setting Enable Optimizely Integration to On.

     
  3. 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:

  1. 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.
     
  2. Also, make sure that you’ve updated Tealium to the latest utag.js template (v 4.010 or later)
     
  3. Add a new tag for Optimizely. Within Tealium, click the Tags tab, then the Add Tag button. Search for “Optimizely (Async)” and click Add.



     
  4. 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.


     
  5. Before you go to the next step (Load Rules), click the Advanced Settings dropdown. Set Wait Flag to No.


     
  6. 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


     
  7. We recommend adding a "Note" to your tag notes as a comment to indicate you are using Optimizely as a blocking tag.


     
  8. Make sure Optimizely is first in the list of tags in Tealium.

Ensighten

Load Optimizely synchronously in Ensighten

If you're using Ensighten, you can deploy Optimizely's snippet synchronously. Here's how:

  1. Within Ensighten Manage, create a new deployment.
     
  2. In the Project Script URL field, add the portion of your Optimizely snippet between //cdn and .js, as in the image below:


     
  3. Set the Condition to Global and the Execution to Immediate.
     
  4. Set the order of priority so that Optimizely fires before other tags, including your analytics tags and any other asynchronous tags.

Signal

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:

<script src=”//s.btstatic.com/tag.js” type=”text/javascript”> { ‘site’ : ‘xxxxxxx’, ‘mode’ : ‘sync’ } </script>

Other Signal integrations running from the bootstrap could be conflicted if you shift from asynchronous to synchronous. Please contact your Signal representative with information about the vendor you would like to deliver synchronous content through. In some instances, Signal can specify which code runs Synchronously and which runs Asynchronously in a single tag.

Running analytics tags synchronously post-content can cause load time discrepancies.

Integrating Optimizely with Signal

Signal supports Optimizely implementations for A/B testing, adding/removing to audiences, and assigning dimensions. All of these have pre-configured tag templates in the Signal UI.

  1. From the Tags area (click on the left), select the Add a Tag button:

  2. Search for Optimizely in the template list and click on the appropriate template. 
  3. Ensure that you have your Optimizely Project ID, Audience ID(s) and Dimension ID(s) to enter into the template. Contact your Signal Client Service representative with any implementation questions.

 

Server Direct Integrations

Signal can support server direct integrations removing the need to deliver data through the browser. Currently, the vendor and client implementations vary. To discuss your specific use case, please contact your Client Service representative.