How utag.sync.js works | Install | Preview of Tealium Docs

Prerequisites

To complete the steps described in this article, you must have the following permissions:

Manage Tag Templates
This permission is required to add and manage tag templates.
JavaScript Draft Promotion
This permission is required to publish JavaScript extensions.

How it works

Before you begin, it is important to learn the differences between synchronous (sync) and asynchronous (async) JavaScript and how it relates to your iQ Tag Management installation. (Learn more).

The utag.sync.js script described in this article is an additional file that you can add to your pages to support A/B and multivariate testing tags, such as Adobe Target or Optimizely. The script is placed in the <head> section of your page code and loads synchronously to comply with the most common vendor requirements. The file content is managed in iQ Tag Management.

This feature is required when using the Tealium Flicker-Free Adobe Target solution.

Enable utag.sync.js

By default, the utag.sync.js file is not published when you save and publish your iQ Tag Management account/profile. It must first be enabled, saved, and applied at the profile level.

Use the following steps to enable the utag.sync.js script:

Click Save/Publish.
Click Configuration Publish Settings.
From the General Publishing tab, scroll down to the Implementation section and toggle the Generate utag.sync.js File option to On.
Click Save.
Save and Publish your changes to the desired environments.

You must publish the latest version of this profile to all of your publish environments. Failure to do so will prevent any page referencing the utag.sync.js file from loading.

Once enabled, the utag Sync scope is visible in the Scope drop-down list for a JavaScript or Advanced JavaScript extension.

Edit the utag.sync.js File

You can add code using one of the following two methods:

Recommended: Use an extension set with the utag Sync scope
Edit the tag template.

Add, edit, or modify the content of your utag.sync.js file, as follows:

Navigate to the JavaScript Code or Advanced JavaScript Code extension for which you want to modify the file.
Click the name of the extension to expand.
Select utag Sync from the Scope drop-down list.
In the Configuration section, place your cursor in the edit box and add, edit, or modify content as needed.
Save and Publish your changes.

Add utag.sync.js to Your Site

The utag.sync.js script is designed to be placed in the <head> section of a page. For the best user experience as the page renders, the script should be placed in the same location that your vendor code would typically load to ensure that the vendor code loads before the content of the page.

The path to the utag.sync.js file contains the following parameters:

account
The name of your iQ Tag Management account.
profile
The name of the profile in your iQ Tag Management account. The default value is main.
environment (env)
One or more publish environments: Dev, QA, Prod, or Custom.

Example:

<script src="https://tags.tiqcdn.com/utag/[account]/[profile]/[env]/utag.sync.js"></script>

Use the following steps to retrieve your specific script from the Code Center for your account:

In the admin menu, click Code Center. The Code Center dialog appears.
The Tealium Script tab displays code that you can use to cut and paste into your file.
Click the Sample HTML tab to view sample HTML for the utag.sync.js placement.
Cut and paste the sample HTML for use on your page as needed.
Click OK and then click Cancel to close the window.

Accessing the Universal Data Object (UDO)

The utag.sync.js file will likely load before the Universal Data Object (utag_data), therefore the code may not be able to reference those variables. Ensure that you thoroughly test any custom code that you intend to use.

Publishing to production

Once utag.sync.js is enabled in the profile, all subsequent publishes to the Prod environment include this file. Advanced and Basic JavaScript extensions can be restricted from publishing to specific environments, which provides you with more control over the environments to which you deploy your sync changes.