Technical

Integration Guide
Version 1.7

Table of Contents
Introduction ........................................................................................................................... 3
Tealium Universal Tag ............................................................................................................ 4
Asynchronous vs. Synchronous ........................................................................................................ 4
Tealium Universal Data Object ............................................................................................... 5
Technical Guidelines ......................................................................................................................... 5
Example Code .................................................................................................................................. 5
Best Practices ................................................................................................................................... 6
Page Specific Data ................................................................................................................................ 6
Product Arrays ..................................................................................................................................... 6
Array Alignment ................................................................................................................................... 7
Event Tracking ........................................................................................................................ 7
Page View Tracking .......................................................................................................................... 7
Event Tracking .................................................................................................................................. 8
Full Example Page Code .......................................................................................................... 8

Introduction
Tealium is the leader in enterprise tag management, a new class of application that
enables digital marketers to more easily deploy their mission-critical online solutions,
while also providing a hub for managing and exchanging digital data.
This document provides instructions on integrating the Tealium Universal Tag (utag)
and the Universal Data Object (UDO) with your website. Included are guidelines for
placing the Tealium code snippet on your pages, best practices for implementing a
Universal Data Object, and advanced features for dynamic tracking.

Tealium Universal Tag

Install Tealium by adding the Tealium Javascript tag to your pages. It is best to place
the code immediately after the opening body tag to allow for the greatest amount of
flexibility and compatibility. Here is an example of the code you would add:
<script type="text/javascript">
(function(a,b,c,d){
a='//tags.tiqcdn.com/utag/[ACCOUNT]/[PROFILE]/[ENV]/utag.js';
b=document;c='script';d=b.createElement(c);d.src=a;
d.type='text/java+c;d.async=true;
a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)
})();
</script>

The path to the utag.js file comprises the following attributes:

ACCOUNT: the name of your account in Tealium iQ

PROFILE: the name of the profile in Tealium iQ for this website
ENV: the publish environment: dev, qa, or prod (or custom)

NOTE: You can find the code snippet specific to your account and profile in Tealium iQ
under Admin Menu > Code Center.

Asynchronous vs. Synchronous

Tealium recommends using an asynchronous method of loading the Universal Tag. This
ensures that Tealium will not interfere with the loading of your web content which
provides an overall better visitor experience.

Tealium Universal Data Object

The Universal Data Object (UDO) is a JavaScript object variable named utag_data in
which data from your webpage can be passed to Tealium. It is important to determine
what data you want to capture on each page type (home pages, search pages, product
pages, etc.) and ensure the appropriate variables are populated within the UDO. The
UDO is the primary source of data that Tealium sends to the tags of your third-party
vendors.
Important: The UDO must be defined and populated prior to loading utag.js.

Technical Guidelines
When developing your UDO variables, there are certain guidelines to follow to avoid
errors or inconsistencies in your implementation and to conform to JavaScript and
Tealium standards.
1. No Spaces: Do not add spaces between the words of a variables name,
instead use the underscore character ('_').
2. Double Quotations: Make sure values for a variable are surrounded by
double quotes. If a value contains double-quotes be sure to escape them with
a backslash eg. utag_data.page_name = "On Sale: \"Red Hot\" Deals!";
3. No Extra Code: Do not add code to the Universal Data Object script block. If
that additional code fails then the UDO may not be parsed correctly, which
can interfere with the proper execution of the Tealium tag.
4. Properly Format Arrays: When a variable contains more than one value,
format the values into an array. Each element of the array must be
surrounded by its own set of double quotes. Make sure the collection of
values in the array are surrounded by square brackets.

Example Code
The following serves as an sample UDO as it would appear on your page. This
particular example shows variables that might appear on a "Shopping Cart" page.

<script type="text/javascript">
var utag_data={
"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, just be
sure that all data has been set prior to loading utag.js.
<script type="text/javascript">
utag_data["page_name"] = "View Cart";
</script>

Best Practices
Page Specific Data

When populating the Universal Data Object, only include the variables pertinent to that
page type. This reduces clutter in your page code. Below is an example of a search
page UDO. Notice that it does not contain product or order variables.
<script type="text/javascript">
var utag_data={
"page_name"
: "Search Results",
"page_type"
: "search",
"search_results" : "42",
"search_keyword" : "tennis shoes"
};
</script>

Product Arrays

Tealium expects product variables to be populated as arrays, even when a single

product is being set. Below are examples of setting a product ID variable with three
items and with one item.

// Multiple products (eg. cart page)

"product_id" : ["PROD123", "PROD456", "PROD789"],
// Single product (eg. product detail page)
"product_id" : ["PROD123"],

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 of each array corresponds to the
first product. Data associated with "Product 1", such as the ID, the price, and the
quantity, each appears as the first element in each array.

// Product 1 - ID=PROD123, Price=3.00, QTY=1

// Product 2 - ID=PROD456, Price=5.00, QTY=1
// Product 3 - ID=PROD789, Price=10.00, QTY=3
"product_id"
: ["PROD123", "PROD456", "PROD789"],
"product_price"
: ["3.00", "5.00", "10.00"],
"product_quantity" : ["1", "1", "3"]

Event Tracking
While the base Tealium Universal Tag will automatically track standard page views,
there is often the need to track dynamic events. Dynamic events can include anything
that occurs after the page has loaded, such as click tracking, video interactions, or
AJAX functionality.
The Tealium Universal Tag exposes two Javasript functions that allow a website to
manually trigger a page view or a dynamic tracking event: utag.view() and utag.link().
Each function takes one parameter--a Javascript data object (similar to utag_data).

Page View Tracking

utag.view()

Typically used for AJAX page flows where the URL does not refresh as the user
navigates the site.
The UDO declared on the initial page load (utag_data) is not re-purposed with
these calls. You must explicitly pass a data object to this function.
The Universal Tag automatically triggers this function on every page load.

Example:
utag.view({
"page_type" : "checkout",
"page_name" : "Checkout: Select Payment Method"
});

Event Tracking
utag.link()

Triggers a non-page view event.

The jQuery OnHandler extension in Tealium iQ can be used to trigger this event
in place of coding this function onto your page.
Best practice is to set a variable called "event_type" to help control tag behavior

Example:
utag.link({
"event_type"
"product_id"
"product_quantity"
"product_unit_price"
});

:
:
:
:

"cart_add",
["PROD123"],
["2"],
["12.99"]

Full Example Page Code

The code below is a sample of how the Tealium UDO and tag might appear on a product detail page in a
production environment:
<html>
<head>
<title>Product: Green Hawaiian Shirt</title>
</head>
<body>
<script type="text/javascript">
var utag_data = {
"page_type"
: "product",
"page_name"
: "Product: Green Hawaiian Shirt",
"section_1"
: "clothes",
"section_2"
: "men",
"section_3"
: "shirts",
"product_id"
: ["GRN_HI_SH_001"],
"product_name"
: ["Green Hawaiian Shirt"],
"product_category"
: ["Men's Shirts"],
"product_subcategory" : ["Tropical"],
"product_price"
: ["55.00"]
};
</script>
<script type="text/javascript">
(function(a,b,c,d){
a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/prod/utag.js';
b=document;c='script';d=b.createElement(c);d.src=a;
d.type='text/java'+c;d.async=true;
a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
})();
</script>
<!-- Page Content -->
</body>
</html>