Adding utag.js to your site

Adding utag.js to your site

by Community Manager ‎09-28-2016 10:11 AM - edited ‎10-01-2018 10:26 AM (25,095 Views)

This article shows how to add Tealium iQ Tag Management to your website. The installation comprises Tealium's client-side JavaScript library, utag.js, and a data layer object called utag_data.

Need a refresher?

In this article: 

Table of Contents Placeholder

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-English, vendor neutral terms that are specific to your business.  

utag_data should be defined and populated prior to loading the Universal Tag.

Example:

<!-- 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>

Additional Reading:

Universal Tag (utag.js)

The utag.js JavaScript library is Tealium's universal tag that replaces third-party tags with a single snippet of code. The utag.js file contains all of the generated code necessary to load third-party tags onto your site.

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 within your account ("main" is the default)
  • Environment - one of three default publish environments: dev, qa, or prod
<!-- Tealium Universal Tag -->
<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>

Your specific snippet can be retrieved from the Code Center of your account.

Additional Reading:

Code Placement

The Tealium code is designed to be placed after the opening <body> tag (as opposed to the <head> tag). 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 utag.js code can be placed anywhere within the <body>, although the top is the preferred location. The sooner the page can begin loading utag.js the sooner your tags will be ready to run when the page has been rendered.

Additional Reading: