This describes the order of operations for the Universal Tag (utag.js) and how it relates iQ Tag Management (TiQ) components.

For information about using and providing feedback for the BETA version of Load Order Manager, see Load Order Manager (BETA).

In this article:

Table of Contents Placeholder

Understanding Web Page Processing Order

To understand how the Universal Tag (utag.js) loads, it is important to know how a browser loads a web page. Here are the main concepts to know that relate to utag.js:

  1. Request and Response
    The browser requests the page located at a URL and the raw web page content (HTML) is returned.

  2. Build
    The browser begins to parse the HTML document, from the top to the bottom. It must process various elements as they are encountered, such as images, links, text, or scripts like the Universal Tag (utag.js). The browser continues to download these elements as it encounters them while it downloads the HTML document itself.Synchronous scripts force the browser to stop and interpret the script before continuing. Asynchronous scripts, like utag.js, allow the browser to continue processing while the script is loaded. When the browser is done building it is commonly called the "DOM Ready" event.

  3. Render
    The browser then renders the web page (DOM) on the screen.

Order of Operations Overview

The default order of operations of utag.js:

  1. “Pre Loader” extensions
  2. Data Layer Processing
  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

The following sections provide a step-by-step overview of the order of operations of the Universal Tag (utag.js) to show how it processes the data layer and executes extensions and tags.

Within each scope, extensions and tags will run based on the order they appear in the iQ console.

Step 1: Pre Loader Extensions

Pre Loader extensions run first before anything else is processed. Due to this, it is important that they do not have dependencies on other parts of utag.js that run later (data layer, other extensions, etc.). Pre Loader extensions are processed based on their order in the iQ console.

Step 2: Data Layer Processing

Once Pre Loader extensions are complete, the Universal Tag is initialized and the data layer is processed. During this step the Universal Data Object (utag_data) is combined with data from the rest of the web page such as, first-party cookies, meta tags, query string parameters, and global JavaScript variables, to form the final data layer object, utag.data. The data from this object can be used in your iQ configuration.

Step 3: “All Tags - Before Load Rules"

After the data layer object is processed the "All Tags - Before Load Rules" extensions are run. The effects of these extensions can impact all tags and load rules.

Step 4: Load Rules

Load rules are evaluated to determine which tags, if any, should be loaded. If a tag is configured to load at the DOM Ready event, its load rule will be re-evaluated at that time using the current data object values.

Step 5: “All Tags - After Load Rules"

After the load rules are evaluated the "All Tags - After Load Rules" extensions are run. The effects of these extensions can impact all tags.

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

The Wait Flag is an advanced setting that controls if a tag should fire at the DOM-ready event (default) or immediately after load rules are evaluated. When the Wait Flag is set to "Off" the tag will fire using the initial evaluation of load rules, after the "All Tags - After Load Rules" extensions, and without waiting for the DOM-ready event.

Step 7: Load Vendor Tags

Tags are loaded into the page as requests to the corresponding utag.#.js files eg. utag.21.js. Tags are loaded asynchronously to optimize page performance and visitor experience.

Step 8: DOM Ready

Run Extensions scoped to "DOM Ready"

DOM Ready extensions run when the browser sends the DOM Ready event. The exact order of the 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 data mappings will be applied before the tag is triggered.

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

After the tags are run the "All Tags - After Tags" extensions are run.

Notes About Single Page Applications

If you use utag.view() manually to track views, load rules will be re-evaluated upon the call. 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 when calling utag.view().

Additionally, the behavior of load rule evaluation can be controlled using a configuration option within utag.js (utag.cfg.load_rules_at_wait) . 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

Data Mappings

When you map a Tealium variable to a vendor variable, you create a connection between them called a data mapping. Data mappings are how you configure what data gets sent to your tags.

DOM

DOM is an acronym for Document Object Model. The DOM is the hierarchical representation of a web page that provides a way 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 (tag-scope), 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 load rules, after load rules, or after the tags have fired.

Tag Bundling

Tag bundling is a setting that reduces the number of requests to fetch utag files. Rather than making individual requests for each tag (utag.#.js), the contents of those files are included (bundled) 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.

utag.view()

The utag.view() function is used 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.

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