Track

Track Views

This section explains how to track page views using utag.view(). Page view tracking gathers information about the navigation path a visitor takes. A tracking call is made each time a web page is loaded or the main content of the screen is changed.

The default installation of utag.js automatically tracks page views on the DOM-ready event.

utag.view()

This method tracks page views, virtual page views, and other AJAX page flows. Calling this method triggers the corresponding page tracking functionality within your configured vendor tags. utag.js automatically triggers this method on every page load.

utag.js is commonly used for Ajax page flows where the URL does not refresh as the user navigates the site. For example, single-page checkout or single-page application.

The Universal Data Object (UDO) declared on the initial page load, utag_data, is not re-purposed with these calls. You must explicitly pass a new data object to this method.  

Best practice is to use the variable tealium_event to identify important page view events and page_type to uniquely identify page templates.

utag.view(data_object, callback, [uid_array]);

The following example demonstrates a “Product Quick View” tracking call, with a callback function. It is only tracked by tags 34 and 12:

utag.view({
    "tealium_event": "product_view",
    "page_type"    : "product_quick_view",
    "page_name"    : "Quick View: Shirts: Lucky Shirt",
    "product_id"   : ["12345"],
    "product_name" : ["Lucky Shirt"]},
    function() { utag.DB("Product Quick View has been tracked"); },
    [34, 12]);

Single Page Applications

On single page applications where the page loads utag.js only once per visit, you suppress the automatic page view tracking call to allow your application to make these calls directly.

To override the automatic page tracking add this line to your page prior to loading utag.js: 

window.utag_cfg_ovrd = {noview : true};

Once your application is loaded (and utag.jsis loaded), trigger utag.view() tracking calls in your page code. These calls are typically be triggered at the DOM-ready event or any event that causes a content view refresh. Learn more about the available settings to adjust the behavior of utag.js.

The utag_data object declared on initial page landing is not re-purposed with these calls. If data from the initial page landing needs to be used it needs to be re-declared and passed again in the method call.

Global and Tag-scoped Extensions are executed during these calls. Pre-loader and DOM Ready extensions are not executed during these calls.

Track Events

This section explains how to track events using utag.link(). Event tracking collects information about your visitors’ interactions within a page. While page view tracking gathers information about the navigation path a visitor takes, event tracking monitors what visitors do in-between navigation steps.

utag.link()

This method tracks non-page views, page interactions, and other dynamic events that might occur on a page. Calling this method triggers the corresponding vendor tracking functionality within your configured tags. 

utag.link(data_object, callback, [uid_array]);

The following is an example of an “Add to Cart” event, without a callback function, tracked by all tags: 

utag.link({
    "tealium_event"    : "cart_add",
    "product_id"       : ["12345"],
    "product_name"     : ["Lucky Shirt"],
    "product_quantity" : ["2"],
    "product_price"    : ["12.99"]});

tealium_event

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. Use additional variables names of your choosing for all other event data.

The suggested tealium_event values include, but are not limited to:

Use the Tealium Events extension to set up more standard events.

The following example adds additional information related to the event in the tracking call:

utag.link({
    "tealium_event"  : "social_share",
    "social_network" : "LinkedIn",
    "shared_link"    : "https://tealium.com/"});

Implementation Options

Just as page view tracking requires a data layer object to give context about which page is being tracked, event tracking also requires a data layer object be included in the tracking calls. Include variables relevant to the event in the data object of the tracking call.

The following sections describe the approaches for implementing Tealium’s event tracking into your website.

jQuery and HTML5

Use the jQuery Extension to track basic interactions within a page, such as clicking, expanding, and selecting. Use HTML5 data attributes to implement informational properties of tracked elements. Requires a web page with semantic HTML.

• Best used for link clicks, button clicks, form field interactions.
• Not recommended for Ajax page flows, or form submissions.

An element with data attributes might look like this in the page code:

<a href="/logout" data-click_name="Sign Out" data-click_category="header">Log out</a> 

Reference these attributes in the jQuery Extension to track clicks on this link and to set the relevant event data using the “JS Code” option.

• Use a selector to identify elements with a specific data attribute. For example, a[data-click_name].
• Set a variable using the “JS Code” option to reference a data attribute in the clicked element. For example, $(this).data('click_name').

Page Code

Used for tracking dynamic page content refreshes, Ajax pages, modal form submissions or any event that requires a round-trip request/response to the client’s web server to fetch additional data not already present on the page.

• Best used for modal forms, product quick view, single page websites, add to cart from non-product pages.
• Not recommended for link tracking.

Video Tracking

Video tracking often requires a custom solution coding to the specifications of the video platform API.

Learn more about Tealium’s current solutions for YouTube video tracking.