Install
Learn to install Tealium for JavaScript (Web).
Install
Universal Data Object (utag_data
)
The Universal Data Object (UDO) is a JavaScript object called utag_data
in which dynamic data from your webpage is passed to the Tealium tag. The properties in this object are named using plain, vendor neutral terms that are specific to your business.
The following is an example declaration of utag_data
, which is done prior to loading the Universal Tag utag.js
:
<!-- Tealium Universal Data Object -->
<script type="text/javascript">
var utag_data={
"page_type" : "section",
"site_section" : "men",
"page_name" : "Men's Fashion | Acme Inc.",
"country_code" : "US",
"currency_code" : "USD"};
</script>
Learn more:
Universal Tag (utag.js
)
The Universal Tag is a small piece of JavaScript code called utag.js
that contains all of the generated code necessary to load third-party tags onto your site. It enables Tealium iQ Tag Management to fire tags by inserting the following code into the page:
<!-- 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 utag.js
file path contains the following attributes:
Attribute | Description | Example |
---|---|---|
account |
Tealium account name | companyXYZ |
profile |
Tealium profile name | main |
environment |
Tealium environment name | prod |
Learn more about utag.sync.js
.
Get the Code
To locate and get the code for installing Tealium on your site:
- In the client-side admin menu, click Code Center. The Code Center dialog appears.
- Leave the default Javascript Type set to Asynchronous (recommended)
- In the Tealium Script tab, click the Select All button to select the code snippet
- Copy the selected Universal Tag code to your clipboard
Code Placement
Paste the Universal tag code immediately after the opening <body>
tag on every page of your website. This positioning 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>
<!-- code -->
</head>
<body>
<TEALIUM CODE SNIPPET GOES HERE>
<!-- code -->
</body>
Learn more about the order of operations to understand how the Universal Tag utag.js
loads.
Validate Installation
Use the following tools to validate that your utag.js
installation is working properly.
Universal Tag (utag) 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. It’s similar to Web Companion, but is focused on the data captured by each tracking event within utag.js
.
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 installing and using 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.
Account Information
The current account, profile, version, and environment that the page is running is displayed under this tab.
Target Environment (Disabled by Default)
The environment detected in the page code is outlined in orange. The currently viewed environment is highlighted in blue. To change the environment, click the target environment you wish to load, then click Refresh Page.
- To enable this feature, turn on the Web Companion setting in your publish settings.
- Learn about other methods of switching environments.
Tags & Extensions Tabs
This tab shows which Tags loaded and whether they successfully sent requests. The Extensions that are successfully completed are also displayed.
Timers
The load and send times of each Tealium JavaScript library are displayed at the bottom of the tab.
Saving Changes
Changes applied to the profile through the Web Companion are queued at the bottom of the bookmarklet and are not committed until you click the Save… button. If you do not wish to commit a change, you may also remove that change from the queue by clicking on the X button next to the appropriate change.
Learn more about installing and using Web Companion.
This page was last updated: July 13, 2023