Use Tealium iQ with Optimizely snippet

📘

Note

See Optimizely's Third-Party Add-Ons & Platform Integration Terms.

This topic describes how to implement the Optimizely snippet if you use Tealium iQ, synchronously and asynchronously.

When you set up Optimizely for the first time, you implement the Optimizely snippet: a single line of code that lets you start running A/B tests. There are two ways to implement Optimizely within Tealium: synchronously and asynchronously. This article describes both approaches.

📘

Note

In general, Optimizely recommends loading the snippet outside of a tag manager.

If you must load Optimizely through a tag manager, see pitfalls and implementation suggestions and contact your Customer Success Manager to discuss the implications.

Synchronous loading

To load Optimizely synchronously, the Tealium snippet must also be loaded synchronously. Edit your template in Tealium iQ.

1. Click the drop-down list near your name and select Manage Templates.

2. Under Edit Your Existing Template, 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 place the analytics tracking calls in the appropriate tags or extensions within Tealium.

Asynchronous loading

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 still loads 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.

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 place the analytics tracking calls in the appropriate tags or extensions within Tealium.
2. Confirm that you updated Tealium to the latest utag.js template.
3. Within Tealium, select the Tags tab and click Add Tag.
4. Search for Optimizely (Async) and click Add.
5. Go to Vendor Configuration > Tag Configuration and click Extract from Code.
6. Paste in your Optimizely snippet and click Extract.
7. Click Advanced Settings and set Wait Flag to No.
8. In the Custom Script Source field, add your Optimizely snippet, starting with the two slashes, such as //cdn.optimizely.com/js/12345678.js.
9. Add a note to indicate that you are using Optimizely as a blocking tag.
10. Confirm that Optimizely is first in the list of tags in Tealium.