Optimizely Synchronous Implementation
This post outlines the steps to load Optimizely Synchronous via the utag.sync.js container. The utag.sync.js runs early in the page load when it is included in the <head></head> section of the page’s HTML. To current users of the Optimizely Sync Tag we highly recommend switching to this form of implementation as the tag has been deprecated. Only existing tag instances are supported.
Tealium’s best practice is to load all tags Asynchronously.
IMPORTANT: Optimizely Tool is unable to detect utag.sync.js
At the time of writing, Optimizely’s tool is NOT able to detect their Synchronous script when served via a Tag Management System. Running the tool on a page where Tealium iQ is serving the script causes it to display an error message. Optimizely is working quickly to resolve this issue, until which point it is safe to ignore the error message. Our recommendation would be to use the Ghostery tool to verify whether or not Optimizely Synchronous is loading on the page as expected.
Loading Optimizely Sync using utag.sync.js container (RECOMMENDED)
This method assumes the utag.js file is coded Asynchronously on the page.
STEP 1: Enable utag.sync.js file creation
- In the admin menu, click Configure Publish Settings . The Publish Configuration dialog appears.
- Scroll down to the Implementation listing and enable the Generate utag.sync.js toggle.
- Click Save to apply the setting.
STEP 2: Add the utag.sync.js script to all pages where tests will be performed. Here’s how to access the script:
- In the admin menu, click Code Center. The Code Center dialog appears.
- In the left panel of the Code Center dialog, select the environment of your choice. The corresponding code is displayed in the right panel.
- Select the Sample HTML tab and copy the
utag.sync.jsscript. - Copy the script and add it to the <head></head> section of your page’s HTML.
STEP 3: Configure Optimizely Project number
- In the admin menu, click Manage Templates.
- Drop down the template listing and select uTag Sync (Profile).
- Paste the below block of code in the text editor.
document.write('<script type="text/javascript" src="//[cdn.optimizely.com/js/12345678.js](http://cdn.optimizely.com/js/12345678.js)"></scr'+'ipt>');
- Replace
12345678with the project number provided to you by Optimizely. - Click Save Profile Template and close the template window.
STEP 4: Save/Publish your profile.
Now, on the page, the utag.sync.js file will load at the very top because it is inserted in the <head></head> of the HTML. This will synchronously load the Optimizely JavaScript file very early in the page load and the A/B tests will be initiated very early as well. Then, later in the page load process, the utag.js file will load and the rest of your tags will load asynchronously.
This page was last updated: July 8, 2016