The data layer is the foundation of your Tealium solution and will serve as the one true definition of your data across all digital assets and customer interactions. The data layer comprises all of the various data elements that will be collected across your site and the visitor interactions and events that will be tracked.
In this article:
Table of Contents Placeholder
Universal Data Object (UDO)
The data layer is implemented on your website as a JavaScript object called utag_data in which you expose data from the page to the Tealium tag. The properties in this object should be named using plain-English, vendor neutral terms that are tailored to your business.
Example declaration of utag_data :
<script type="text/javascript">
var utag_data={
"tealium_event" : "search", "page_name" : "Search Results",
"search_results" : "42",
"search_keyword" : "Tealium shirt"
};
</script>
The utag_data object variable should be defined and populated prior to loading the Universal Tag (utag.js).
When utag.js loads in the page it looks for the utag_data variable and uses its data to automatically trigger an page view tracking call with utag.view() . If you have a single page application, or are calling utag.view() manually, you might not need utag_data. Learn more about your page tracking options.
Syntax Guidelines
When implementing the UDO there are certain guidelines to follow, not only to avoid errors or inconsistencies in your implementation but also to conform to JavaScript and Tealium standards.
String Values Use string values for all variables, including boolean and numeric data.
Escape Quotes Enclose all values in double quotes or single quotes and escape any quotes that might appear in the value itself (eg. utag_data.page_name = 'It\'s All About the Data!'; ).
Boolean Values For boolean values use "1" and "0" to represent true and false. This is the simplest way to represent a boolean using strings.
Amount Values Use strings for all dollar amounts and exclude all currency symbols and commas eg. utag_data.order_total = "1234.00"; instead of "$1,234.00" .
Array Values Use array values for all product related variables. The Tealium library, and each vendor tag integration, is designed to use arrays for all product-related data (ID, price, quantity, etc.) eg. utag_data.product_id = ["P1234", "P4567", "P7890"];
Avoid Extra Code Do not add extra code to the UDO script block. If any code in the same script block fails, the UDO may not be defined correctly which might lead to unexpected data being passed to your vendor tags.
Examples
Standard Page
The following is a sample UDO as it would appear on a page. This specific example shows properties that might appear on a "Shopping Cart" page with two products in the cart.
<script type="text/javascript">
var utag_data = { "tealium_event" : "cart_add",
"country_code" : "US",
"currency_code" : "USD",
"page_name" : "Cart: View Shopping Bag",
"page_type" : "cart",
"product_id" : ["PROD123", "PROD456"],
"product_name" : ["Red Shoes", "Black Socks"],
"product_category" : ["Footwear", "Apparel"],
"product_quantity" : ["1", "2"],
"product_unit_price" : ["65.00", "4.75"],
"cart_total_items" : "3",
"cart_subtotal" : "74.00"
};
</script>
The UDO can be updated with additional values outside of the declaration block, as long as the data gets set prior to loading utag.js. UDO variables set after loading utag.js will be ignored.
<script type="text/javascript">
utag_data["page_name"] = "View Cart";
<script>
Page Specific Data
When populating the UDO, only include variables pertinent to the current page type. This reduces clutter in the page code and eliminates confusion about what data is expected. Below is an example of a search page UDO that omits unnecessary items such as product and order data.
<script type="text/javascript">
var utag_data={
"page_name" : "Search Results",
"page_type" : "search",
"search_results" : "42",
"search_keyword" : "tennis shoes"
};
</script>
Product Arrays
Product variables are to be populated as arrays, even when a single product is being set. Below are examples of setting the product ID variable with one product ID (eg. on a Product Detail page) and with three product IDs (eg. on a Shopping Cart page).
// Single product (eg. product detail page)
utag_data["product_id"] = ["PROD123"];
// Multiple products (eg. cart page)
utag_data["product_id"] = ["PROD123", "PROD456", "PROD789"];
Array Alignment
All product array variables should have the same number of elements to ensure data alignment. In this example, notice that the first element in each array corresponds to the first product. Properties associated with this product (such as ID, price, and quantity) all appear in the first element in each array, while the properties of the second product will appear in the second element in each array, and so on.
// Product 1: // ID = PROD123 // Price = 3.00 // QTY = 1 //
// Product 2: // ID = PROD456 // Price = 5.00 // QTY = 1 //
utag_data["product_id"] = ["PROD123", "PROD456"];
utag_data["product_price"] = ["3.00", "5.00"];
utag_data["product_quantity"] = ["1", "1"];
Additional Reading
Data Layer Variables in iQ Tag Management
An Introduction to the Data Layer
... View more