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. There are two ways to implement Optimizely within Tealium: synchronously and asynchronously. This article describes both approaches.
In general, we recommend loading the Optimizely 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.
To load Optimizely synchronously, the Tealium snippet itself must also be loaded synchronously, and you'll need to edit your template in Tealium iQ.
- Click the drop-down menu at the top-right, near your name, and select Manage Templates.
- In the Edit Your Existing Template drop-down menu, select uTag Sync (Profile) UID:sync.
- Paste the following code in the Template Config code sandbox under the existing text:
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.
To enable tags for Google Universal Analytics:
- In the Tealium Tag Marketplace, search for Google Universal Analytics.
- Set Enable Optimizely Integration to On.
- 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.
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.
To set up Optimizely asynchronously and run it as a “blocking” tag in Tealium:
- 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.
- Confirm that you updated Tealium to the latest utag.js template (version 4.010 or later).
- Within Tealium, select the Tags tab and click Add Tag.
- Search for “Optimizely (Async)” and click Add.
- In the Tag Configuration menu, under Vendor Configuration, click Extract from Code.
- Paste in your Optimizely snippet and click Extract.
- Click the Advanced Settings drop-down menu and set Wait Flag to No.
- In the Custom Script Source field, add your Optimizely snippet, starting with the two slashes (for example, //cdn.optimizely.com/js/12345678.js).
- Add a note to indicate that you are using Optimizely as a blocking tag.
- Confirm that Optimizely is first in the list of tags in Tealium.