Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Implement the Optimizely snippet with Tealium iQ

relevant products:
  • Optimizely Classic
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

This article will help you:
  • Implement the Optimizely snippet if you're using Tealium iQ, synchronously and asynchronously

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. You can use a tag management system like Tealium iQ to implement the Optimizely snippet.

There are two ways to implement Optimizely within Tealium: synchronously and asynchronously. This article describes both, but Tealium and Optimizely recommend synchronous loading as a best practice.

Learn important best practices and pitfalls for implementing Optimizely with a tag manager, or to choose a different tag management system.

Synchronous loading

To load Optimizely synchronously, you need to edit your template in Tealium iQ.

  1. Click the drop-down menu at the top-right, near your name, and select Manage Templates.

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

  3. Paste the following code in the Template Config code sandbox under the existing text:

    document.write('<script type="text/javascript" src="//cdn.optimizely.com/js/12345678.js"></script>');

 
Note:

Use your Optimizely snippet code in this script: replace ‘12345678’ above with your actual project ID.

After you enter the Optimizely code, you can save, publish, and integrate Optimizely with your analytics platform. The only difference between using Tealium and adding tags directly to your page is that you'll place the analytics tracking calls in the appropriate tags or extensions within Tealium.

For Google Universal Analytics, here’s how to enable tags:

  1. In the Tealium Tag Marketplace, search for Google Universal Analytics.

  2. Set Enable Optimizely Integration to On.

  3. Enter the Tracker Name, which is the same as the Custom Tracker that you set in each Optimizely experiment that you integrate with Google Universal Analytics.

    If you leave the Tracker Name field empty, you should also leave the Custom Tracker field empty in your Optimizely experiment.

Asynchronous loading

Use the asynchronous method only if you cannot use the synchronous method.

With the asynchronous method, you run Optimizely asynchronously while blocking other tags and elements from loading until Optimizely is finished loading. You need to block the other tags because if Optimizely is still loading after items like analytics tags and page elements execute, your other analytics integrations could break.

You may also see a "flicker" or "flash" effect when the original page shows briefly before the variation loads.

Here’s how to set up Optimizely asynchronously and run it as a “blocking” tag in Tealium:

  1. Confirm that you 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. Confirm that you’ve updated Tealium to the latest utag.js template (version 4.010 or later).

  3. Within Tealium, select the Tags tab and click Add Tag.

  4. Search for “Optimizely (Async)” and click Add.

  5. In the Tag Configuration menu, under Vendor Configuration, click Extract from Code.

  6. Paste in your Optimizely snippet and click Extract.

  7. Click the Advanced Settings drop-down menu and set Wait Flag to No.

  8. In the Custom Script Source field, add your Optimizely snippet, starting with the two slashes (for example, //cdn.optimizely.com/js/12345678.js).

  9. Add a note to indicate that you’re using Optimizely as a blocking tag.

  10. Confirm that Optimizely is first in the list of tags in Tealium.