How the Data Layer Works for Websites

[#1]

This article explains how the data layer works for websites by clarifying the various related terms and providing an overview of the flow of data from your website to your vendor tags.

First, let's define the various terms related to a website data layer and your installation of utag.js:

• Universal Data Object, UDO, utag_data 
  The JavaScript object implemented on your site to contain dynamic values that describe the page and visitor.
  Learn more about how the UDO works.
• Variable Types 
  Data available directly from your web page (other than your customized UDO) via DOM Data, Query Strings, Meta Data tags, Cookies, and JavaScript variables.
  Read more about the data layer variable types.
• utag.data 
  The final data object combining variables from the UDO with all other variable types available from the page. This data is used to evaluate load rules.
  Learn more about the built-in variables available in the UDO.
• "b" object 
  An internal JavaScript object that is a copy of utag.data to be used for each individual vendor tag. The "b" variable can be referenced in JavaScript Extensions.
  Read more about the "b" object and how it's used.

This graphic shows how individual variables come together to create your Data Layer and how that data flows out to your vendor tags.

Data Layer Flow

When a web page with Tealium iQ is rendered in a visitor's browser, this is how the data moves.

1. All required Variables are identified
2. Variables are combined into utag.data
3. utag.data is copied to the locally-scoped 'b' object as needed
4. Extension operations may be performed on Variables
5. Load Rules may evaluate Variable values to determine which Tags to load and fire
6. Final Variable values are mapped to destinations in Vendor Tags
7. Vendor Tags fire and pass Variable values to your vendors

Read more about the order of operations of the Tealium Javascript library.