Quick Start Guide for Websites | Getting Started for Websites

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.

Install

Universal Tag

The Universal Tag is a JavaScript file called utag.js that contains the generated code necessary to load your tag management configuration on your site.

<!-- Tealium Universal Tag -->
<script type="text/javascript">
  (function(a,b,c,d) {
      a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/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 file path to utag.js will be unique to your account. Throughout this guide, replace the placeholder values ACCOUNT, PROFILE, and ENVIRONMENT with your account, profile, and environment.

For example, if your account name was your-company, and you were using the default profile named main, the file path to the QA instance would be:

//tags.tiqcdn.com/utag/your-company/main/qa/utag.js

Learn more about installing the Universal Tag (utag.js).

Get the Code

If you don’t know your account and profile name, use the Code Center in iQ Tag Management to get the installation code (or ask your Tealium administrator):

In the client-side admin menu, click Code Center. The Code Center dialog appears.
Leave the default JavaScript Type set to Asynchronous (Learn about synchronous vs. asynchronous JavaScript)
In the Tealium Script tab, click Select All to select the code snippet
Copy the selected Universal Tag code to your clipboard

Environments

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.

QA
//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/qa/utag.js
Prod
//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/prod/utag.js

Learn more about using the Code Center to get your installation code.

Code Placement

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 following example shows the code placement:

<head>
  ...
</head>
<body>
<!-- Tealium Universal Tag -->
<script type="text/javascript">
  (function(a,b,c,d) {
      a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/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>
  ...
</body>

Learn more about the order of operations to understand how the Universal Tag loads.

Data Layer

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.

The Universal Data Object (UDO) is a JavaScript object called utag_data in which dynamic data from your site is passed to the Tealium tag. The properties in this object are named using plain, vendor-neutral terms that are specific to your business.

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:

<script type="text/javascript">
  var utag_data={
      "tealium_event"  : "search",
      "page_name"      : "Search Results",
      "search_results" : "42",
      "search_keyword" : "Tealium shirt"
  };
</script>

Learn more:

Track

Events

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.

Tealium provides the data layer variable tealium_event to name your tracked events. It is used within JavaScript event listeners to track events when a user interacts with website elements such as clicking a button.

The following example tracks when a user clicks a social share button:

<a href="#" name="share" onclick="utag.link({'tealium_event': 'social_share', 'social_network': 'LinkedIn'});">Share</a>

Learn more about tracking events.

Views

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”:

utag.view({
    "tealium_event": "search",
    "search_keyword": "jeans",
    "search_results": "42"
});

The following is an ecommerce site example that tracks a step of a checkout flow:

utag.view({
    "tealium_event": "page_view",
    "page_type": "checkout",
    "page_name": "Checkout: Payment Method",
    "cart_total_items": "2",
    "cart_total_value": "125.00"
});

Learn more:

Tealium Event Variable

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:

Value of `tealium_event`	Event Description
`page_view`	View a page
`search`	Search a product
`product_view`	View a product
`cart_add`	Add a product to the shopping cart
`purchase`	Complete a purchase
`user_login`	User login
`social_share`	Share a link on a social site

Learn more:

Best Practices

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_.

Data values

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.

Learn more about data layer best practices.

Testing and Validation

Use the following tools to validate that your installation is working properly.

Universal Tag Debugger

The Universal Tag Debugger (or “utag debugger”) provides an easy way to validate your data layer and tracking calls in real-time as you navigate your site.

The tracking calls made by utag.js are displayed and updated in the tool as you navigate or trigger in-page events.

Learn more about the Universal Tag Debugger.

Web Companion

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.

Learn more:

Live Events

In Tealium EventStream, use the Live Events feature to manage and inspect incoming events in real-time. Verify that the events you send from your data source are being received.

To use Live Events you must add the Tealium Collect tag to your iQ Tag Management configuration.

Learn more: