This article explains the order of operations for the Universal Tag (utag.js) and how it relates to the components configured in iQ Tag Management.
In this article:
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:
Request and Response
The browser requests the page located at a URL and the raw web page content (HTML) is returned.
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.
The browser then renders the web page (DOM) on the screen.
The default order of operations of utag.js:
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.
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.
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. The data from this object can be used in your iQ configuration.
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.
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.
After the load rules are evaluated the "All Tags - After Load Rules" extensions are run. The effects of these extensions can impact all tags.
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.
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.
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.
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.
After the tags are run the "All Tags - After Tags" extensions are run.
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.
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 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 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.
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 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.
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 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.