Order of Operations

Order of Operations

by on ‎03-04-2015 10:52 PM - edited on ‎09-25-2018 08:57 AM by (18,444 Views)

This article explains the order of operations for the Tealium JavaScript library (utag.js) and how it relates to the components configured in iQ Tag Management.

Table of Contents Placeholder

Understanding Web Page Processing Order

To understand how the Tealium JavaScript library (utag.js) loads, we should look at how a browser loads a web page.

  1. First, the browser requests the web page’s HTML 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 images, links, text, or scripts like the Tealium script (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 synchronous scripts, the browser must stop downloading the HTML and interpret the script before continuing on to the rest of the HTML. Asynchronous scripts, like utag.js, allow the browser to continue downloading the HTML and resume loading when the browser signals that the HTML has been fully downloaded and parsed into the Document Object Model (DOM). This signal is commonly called the "DOM Ready" event.

  4. The browser then renders the web page on the visitor’s screen.

DOM Ready is a signal from the browser that it has downloaded and fully parsed the web page’s HTML into the DOM. Another event called "DOM Complete" indicates when all of the web page’s elements are available to interact with scripts like utag.js. Waiting for DOM Ready before performing any operations ensures that the data required by utag.js for your various third-party Tags are available. Moreover, waiting for DOM Ready also means that utag.js is not getting in the way of the web page loading for your visitor.

Overview

The default order of operations of utag.js:

  1. “Pre Loader” extensions
  2. Data Layer Processed
  3. "All Tags" extensions with execution "Before Load Rules"
  4. Load Rules
  5. “All Tags” extensions with execution "After Load Rules"
  6. Tags with the Wait Flag set to “Off”
  7. Standard Tags (utag.#.js files)
  8. DOM Ready:
    • Run Extensions scoped to "DOM Ready"
    • Trigger Vendor Tags:
      • Extensions scoped to the tag
      • Apply Data Mappings
      • Fire Tag
  9. Extensions scoped to "All Tags" with execution "After Tags"

Order of Operations Details

Step 1: Pre Loader Extensions

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 Pre Loader extensions are processed is based upon their order in the Tealium iQ console. The Tealium Privacy cookie is set at this point, if it does not yet exist.

Step 2: Process the Data Layer

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 variables are used in the Tealium iQ console for mappings.

Step 3: “All Tags” extensions with execution "Before Load Rules"

All extensions scoped to “All Tags” with the Execution of "Before Load Rules" run. These extensions execute in the order in which they appear in Tealium iQ. This scope indicates that the data that comes from these extensions are available to all the Tags in your profile and can affect Load Rules.

Step 4: Evaluate 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 5: “All Tags” Extensions with execution "After Load Rules"

All extensions scoped to “All Tags” with the Execution of "After Load Rules" (the default) 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.

Step 6: Load and Fire Tags with Wait Flag set to "Off"

The Wait Flag is an advanced setting that controls if the tag should fire at the DOM-ready event (default) or immediately as utag.js loads.  When Wait Flag is set to "Off" the tag will fire immediately without waiting for the DOM-ready event.

These tags will fire based on the initial evaluation of load rules.

Step 7: Load Vendor Tags

Based on the state of the load rules, additional vendor tags are loaded into the page via requests to their utag.#.js files eg. utag.21.js. These are also loaded asynchronously to optimize page performance and visitor experience.

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 variables are mapped to the vendor Tags’ destination variables. As discussed earlier, even though the tag libraries load, they do not do anything until the DOM-ready signal is received.

Step 8: DOM Ready

Run Extensions scoped to "DOM Ready"

When the browser sends the DOM Ready signal, DOM Ready-scoped extensions are run. These extension generally do not directly affect vendor tags since they run in parallel with tags and the exact order of operations between DOM Ready extensions and Tags cannot be guaranteed.

Trigger Vendor Tags

Each tag loaded on the page will be triggered. The extensions scoped to each tag will be run and the defined data mappings will be applied before the final pixel is generated. The order in which you have placed your Tags in Tealium iQ is the order in which they will be triggered on the page.

Step 9: Extensions Scoped to "All Tags" and "After Tags"

All extensions scoped to “All Tags” with Execution of "After Tags" run. These extensions execute in the order in which they appear in Tealium iQ. Actions taken in these Extensions generally cannot affect the data sent to the vendor.

Notes About Single Page Applications

If you use the utag.view() function to track views for page content dynamically loaded after the page has finished loading, load rules are re-evaluated. This is true only for utag.js versions 4.26 and later. Any versions of utag.js prior to 4.26 do not re-evaluate load rules for utag.view().

Additionally, the utag.js file has a configuration (utag.cfg.load_rules_at_wait) that will re-evaluate load rules at DOM Ready when set to true. This is an advanced customization and we recommend that you contact your Account Manager before implementing it. This configuration is only available with utag.js versions 4.26 and later.

Glossary of Terms

Variable Mappings

When you map a Tealium variable to a vendor destination, you create a data connection between them. Changing the value of a variable propagates the change to the corresponding destination variables. This becomes important in Tag Management because variable mapping is how you send data layer data to vendor tags via iQ configuration.

DOM

DOM is an acronym for Document Object Model. The DOM is the hierarchical representation of a web page that provides a way for a scripting/programming language, like JavaScript, to interact with a web page and all of its elements.

Extension Scope

Extension Scope indicates when an extension executes during the processing of utag.js. Extensions can be scoped to Pre Loader, All Tags, a specific vendor tag, or to the DOM Ready event.

Execution

Some extensions allow for a more granular setting of scope called Execution, which indicates if it should run before or after load rules or after the tags have fired.

Tag Bundling 

Tag Bundling is a setting that minimizes the number of requests to fetch utag files. Rather than making individual requests for each tag (utag.#.js files), the contents of those files are included in the original file, utag.js.

Wait Flag

The Wait Flag is an Advanced Setting that determines whether or not a tag waits for the DOM-ready signal before it executes. By default, this Flag is set to ‘Yes’. Setting this Flag to ‘No’ causes the tag to begin loading before the DOM-ready signal is sent. The various elements the tag relies on may not yet be available on the page if the browser has not finished parsing the DOM, so loading the tag before the DOM-ready signal could result in the tag loading improperly or not at all.

utag.view()

Tealium uses the utag.view() function to track page view events. When the utag.js file loads on a page, it automatically calls this function to track the initial page load as a page view event. Do not hard code a utag.view() call into your page’s source code, as it will send a second page view event, in addition to the one sent by the utag.js file, and distort your reports

 

utag.js-order-of-operations-simplified.jpg

 

utag Waterfall Non Ready Wait

utag-waterfall-non-ready-wait.png

utag Waterfall with Ready Wait

utag-waterfall-with-ready-wait.png