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.

This method assumes the utag.js file is coded Asynchronously on the page.

STEP 1: Enable utag.sync.js file creation

  1. In Tealium iQ, click Save/Publish in in the upper-right corner.
  2. The Save/Publish window will appear. Click Configure Publish Settings in the upper right corner.
  3. The Publish Configuration settings will appear. Make sure the General Publishing tab is selected.
  4. Scroll down to the Implementation listing and enable the Generate utag.sync.js toggle.
  5. 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:

  1. Click your email-address/name in the top-right corner and select Code Center.
  2. In the left panel of the Code Center, select the environment of your choice. The corresponding code is displayed in the right panel.
  3. Select the Sample HTML tab and copy the utag.sync.js script.
  4. Copy the script and add it to the <head></head> section of your page’s HTML.

STEP 3: Configure Optimizely Project number

  1. Click your email-address/name in the top-right corner and select Manage Templates.
  2. Drop down the template listing and select uTag Sync (Profile).
  3. Paste the below block of code in the text editor.
document.write('&lt;script type="text/javascript" src="//[cdn.optimizely.com/js/12345678.js](http://cdn.optimizely.com/js/12345678.js)"&gt;&lt;/scr'+'ipt&gt;');
  1. Replace 12345678 with the project number provided to you by Optimizely.
  2. 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.

Was this page helpful?

This page was last updated: July 8, 2016