This guide covers the installation of the Tealium tag management solution for web sites. This installation requires two components: the Universal Tag (utag.js) and the Universal Data Object (utag_data). Install both of these components on every page of your site.
In the Tealium Script tab, click Select All to select the code snippet
Copy the selected Universal Tag code to your clipboard
There are three environments to support a proper release cycle: Dev, QA, and Prod. This allows you to install the QA instance of utag.js in your non-production environment and the Prod instance on your live production site. With this setup you can test changes in QA before releasing them to Prod.
The environment path determines which instance of your Universal Tag to load.
Paste the Universal Tag code immediately after the opening <body> tag on every page of your site. This position provides the best compatibility with the greatest number of vendors and allows third-party tracking to complete before the visitor navigates to the next page.
The data layer is the foundation of your Tealium solution that comprises all of the variables that are collected across your site and the visitor interactions that are tracked.
You must load the data layer object on every page of your site, populate it dynamically based on the variables needed for each page type, and load it prior to the Universal Tag.
The following is an example declaration of utag_data that might appear on a search results page:
Use the utag.link() function to track events such as non-page views, page interactions, and other dynamic page events. Event tracking collects information about a visitor’s interactions within a page.
The following example tracks when a user clicks a social share button:
The utag.view() function is triggered automatically on every page load. It tracks page views, virtual page views, Ajax page flows, and single-page applications. Calling this function triggers the corresponding page tracking functionality within your configured vendor tags.
The following is a content site example in which a visitor searched for “jeans”:
To uniquely identify each type of interaction to be tracked, use the reserved variable tealium_event. This variable is referenced throughout Tealium iQ to configure load rules, extensions, and data mappings. For all other event data, use variable names of your choosing.
The suggested tealium_event values include, but are not limited to:
Best practices associated with with implementing and managing your data layer include:
Variable naming conventions
Use lowercase, singular, underscore-separated variable names.
Use meaningful variable names that avoid vendor specific naming.
Prefix boolean variable names with is_ or has_.
Use string values for all variables.
For boolean values, use string values "1" and "0" instead of true and false.
For numeric values, use string values such as "1234.56" instead of 1234.56.
For arrays, use comma-separated strings such as ["prodID1", "prodID2", "prodID3"].
Page type identifiers
All pages of your site should include a variable called page_type. This is used to determine the type of page the user is viewing which can be useful for configuring load rules, extensions, and data mappings.
Third-party data layer objects
You might already have a data layer object implemented on your site, such as the W3C Data Object or your own custom object. Convert these objects to the Universal Data Object (UDO) utag_data using one of the available data layer converters.
Set utag_data before utag.js
In the page code, the Universal Data Object must be declared before the Universal Tag. This ensures that the Universal Tag has all the data layer variables needed to evaluate load rules, extensions, and tags.
Web Companion is a browser tool that allows you to check your tag configuration, inspect data on your site, and create and test new configurations quickly and easily. Launching this tool quickly verifies that the utag.js library is loading properly on your site.