To understand how Tealium’s Tag Management System (TMS) loads, we should look at how a
browser loads a web page.
1. First, the browser requests the web page’s HTML (Hyper Text Markup Language) document.
2. The browser begins to download and parse the HTML document starting at the top-left and
continuing down to the bottom-right. As the browser reads through the HTML it encounters various
elements that make up the content of the web page. These elements can be any images, links,
text, or scripts like utag.js.
3. The browser continues to download these elements as it encounters them while it downloads
the HTML document itself. In the case of regular scripts, the browser must stop downloading the
HTML and interpret the script before continuing on to the rest of the HTML. Smart scripts, like
utag.js, have a built-in halt that pauses the script and allows the browser to continue downloading
the HTML. The halt is released when the browser signals that the HTML has been fully
downloaded and parsed into the Document Object Model (DOM). This signal is typically called
‘DOM Ready’ (more on this later).
4. The browser begins to render the web page on the visitor’s screen.
Order of Operation
The utag.js operations flow in a very specific order and understanding that order can prevent errors in
your implementation.
1. Run Extensions scoped to “Pre-Loader” and set Privacy Manager cookie
2. Process Data Layer
3. Evaluate Load Rules
4. Run Extensions scoped to “All Tags” and the Privacy Manager Extension
5. Load Bundled Vendor Tags and Vendor Tags with their Wait Flag set to “Off”
6. Load Vendor Tags, their Extensions, and Mappings
7. DOM Ready and the Send Function
8. After Page Load: utag.view() and Advanced Configurations
Processing of utag.js:
Step 1: Pre-Loader Extensions & Privacy Manager Cookie
Pre-Loader extensions run first. Since Pre-Loader extensions run before everything else, it is vital
that they not rely on any of the Tealium elements (data layer, other extensions, etc.) that run later.
Attempting to do so could result in the page loading improperly, or not at all. The order in which PreLoader extensions are processed is based upon their order in Tealium iQ. The Tealium Privacy cookie is set at this point, if it does not yet exist.
Step 2: The Data Layer is Built
The utag_data object, also referred to as the Universal Data Object (UDO), passes data from your
web page to Tealium iQ. The variables and data contained in utag_data are combined with data from
the rest of the web page, 1st-party cookies, and the DOM to create the utag.data object. While the
utag.data object contains all the web page’s data, only the data you identify as data sources are used
in the Tealium iQ console for mappings.
Step 3: Load Rules
The Load Rules are evaluated. The Load Rules determine if particular Tags load on any given
web page. If a Load Rule determines that a Tag should not load on a web page, that Tag and any
extensions scoped to it do not load. At this point, all of the data on the page may not be available as
the browser has not yet finished parsing. The Load Rules are re-evaluated later, when the rest of the
page’s data is available, to make certain they evaluate correctly.
Step 4: Extensions Scoped to “All Tags” & Privacy Manager
Any extensions scoped to “All Tags” run. These extensions execute in the order in which they appear
in Tealium iQ. This scope indicates that the data that come from these extensions are available to all
the Tags in your profile.
The Privacy Manager Extension, if enabled, runs with the extensions scoped to “All Tags”. The
Privacy Manager provides your visitors a way to manage their privacy settings for the various
Tags in use on your site. The visitor is provided with the option to opt in or out (depending on your
configuration) of Tags, if they so choose. It is essential the Privacy Manager runs before any other
Tag in order to abide by local restrictions or laws regarding visitors’ privacy.
The first thing the Privacy Manager does is to check for the Tealium Privacy cookie to determine the
privacy settings. Depending on your visitor’s preferences, the Privacy Manager may prevent some or
all of your Tags from loading. The Privacy Manager saves the visitor’s privacy settings in the Privacy
Manager cookie for the next time he or she visits your site.
Step 5: Bundled Tags and Tags With the Wait Flag set to “No”
Two types of Tags load at this point: bundled Tags and Tags with their Wait Flag set to “No”. Bundling Tags means that all of the Tag requests are placed into one large request The Wait Flag is an advanced setting that allows you to choose whether or not the Tag waits for the DOM Ready signal before it begins loading.
These Tags will load based on the initial evaluation of Load Rules and visitor privacy settings set by
the Privacy Manager.
Step 6: Vendor Tags, their Extensions, and Mappings:
Depending on whether or not the Load Rules permit, the vendor Tag libraries load next. If any of
those Tags have extensions scoped to them individually, those extensions load along with the Tag.
After the Tag libraries and Tag-specific extensions are loaded, the page data variables you identified
as data sources are mapped to the vendor Tags’ destination variables. As discussed earlier, even
though the Tag libraries load, they don’t do anything until the DOM Ready signal is received.
Step 7: DOM Ready and the Send Function
When the browser sends the DOM Ready signal, DOM Ready-scoped extensions and Tag-specific
extensions execute and data source mappings are processed. The Send function collects the final
vendor Tag requests together and sends them to each of the vendor services. The order in which you
have placed your Tags in Tealium iQ is the order in which the data is sent to each vendor.
Step 8: After Page Load: utag.view() and Advanced Configurations
We can use tealium web companion (tealium tools extension for Chrome), in order to look what is load on our page.
