• Expand/CollapseMenu
Help

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.

NOTE: Tealium's best practice is to load all tags Asynchronously. See this POST on how to implement Optimizely Asynchronous. For an understanding of the trade-offs between Asynchronous and Synchronous loading of testing tools see this POST.

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 (screenshot below). 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.

IBM_OPT (1).gif 

 

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

  1. In Tealium iQ, click the "Save/Publish" button in in the upper right corner.
  2. The Save/Publish window will appear. Click the "Configure Publish Settings" button 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 then enable the "Generate utag.sync.js" toggle.
  5. Click "Save" to apply the setting.

    utag.sync toggle.png

STEP 2: Add the utag.sync.js script to all pages where tests will be performed. Here's how to access the script:

  1. Drop down your email-address/name in the top right corner and select 'Code Center'.

    code center menu.png

  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.

    code-center-showing-sync-js.png

STEP 3: Configure Optimizely Project number

  1. Drop down your email-address/name in the top right corner and select 'Manage Templates'.

    manage template.png

  2. Drop down the template listing and select "uTag Sync (Profile)".
  3. Paste the below block of code in the text editor.
    document.write('<script type="text/javascript" src="//cdn.optimizely.com/js/12345678.js"></scr'+'ipt>');
  4. Replace "12345678" with the project number provided to you by Optimizely.
  5. Click 'Save Profile Template' and close the template window.

    utag sync code.png

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.

Version history
Last update:
‎07-08-2016 02:40 PM
Updated by:

Copyright All Rights Reserved © 2008-2022

Public