Tealium Tools: Universal Tag (UTAG) Debugger

Tealium Tools: Universal Tag (UTAG) Debugger

by Community Manager on ‎08-14-2016 10:50 AM - edited on ‎07-26-2018 04:22 PM by (16,360 Views)
This tool provides an easy method for marketers and developers to validate the data layer and tracking events in real-time on their site.
 
In this article:
Table of Contents Placeholder

How it Works

The Universal Tag (UTAG) Debugger is a tool used for validating the Universal Data Object and event tracking calls. The UTAG Debugger is similar to Web Companion, with the difference being that it is focused on the data layer and the data captured by each tracking event within utag.js.

Install the Tealium Tools Extension

To use this tool, you must first add it your Chrome browser using the Tealium Tools extension. To install this extension on Chrome or Firefox, see Tealium Tools Browser Extension.

Paste JSON to Custom Tools

After you have installed the browser extension, use the following steps to cut and paste the JSON to your Custom Tools:

  1. Click the Tealium icon in the upper right of your browser to open Tealium Tools.
  2. Click the Custom Tools tab.
  3. From the Custom Tools tab, cut and paste the following JSON:
    {
        "id" : "teal.sol.debug",
        "title" : "UTAG Debugger",
        "description" : "Universal Tag Debugger",
    "no_ui" : true, "scripts" : { "utag_monitor" : { "js" : "void(window.open(\"\",\"utagmon\",\"width=600,height=600,location=0,menubar=0,status=1,toolbar=0,resizable=1,scrollbars=1\").document.write(\"<script language='JavaScript' id='utagmon' src='//tags.tiqcdn.com/utag/tealium-solutions/main/prod/utag.4.js?opt_show_enrich=0&opt_show_meta=0&opt_show_query=0&opt_show_jspage=0&opt_show_tiq=1&opt_show_cookie=0&_cb=\"+Math.random()+\"'></\"+\"script>\"));", "auto_inject" : true } } }
  4. When complete, a new button with the tool name will display under the "Custom Tools" tab.

Create a Bookmarklet

You can optionally create a bookmarklet from which to launch the tool, as follows:

  1. Create a bookmarklet using the following code:
    javascript&colon;void(window.open("","utagmon","width=600,height=600,location=0,menubar=0,status=1,toolbar=0,
    resizable=1,scrollbars=1").document.write("<script language='JavaScript' id='utagmon'
    src='//tags.tiqcdn.com/utag/tealium-solutions/main/prod/utag.4.js?
    opt_show_enrich=0&opt_show_meta=0&opt_show_tiq=1&opt_show_dom=0&opt_show_jspage=0&opt_show_cookie=0&_cb="
    +Math.random() +"'></"+"script>"))
  2. Drag and drop the bookmarklet onto your Bookmarks bar.
    UTAG Debugger Bookmarklet Instructions.jpg
  3. Your bookmark is now ready to use.

Using the UTAG Debugger Tool

Use the following steps to begin using the UTAG Debugger tool:

  1. Navigate to your desired website.
  2. Open Tealium Tools and click the Custom Tools tab.
  3. Click the Um button.
    The Universal Tag Monitor tool displays.
    If you created a bookmark to use, simply click the bookmarklet in your toolbar.
    utagmonitor.jpg

    The top section displays which utag.js file was detected on the page and contains the following:

    • account/profile/environment path)
    • the version of utag,
    • a number of display options for changing what data will display in the viewing area.

Options

The following options are available to help you use and navigate the tool:

  • Bookmarklet – you can re-save your display options by dragging the bookmarklet link from the top-right of the pop-up back to your toolbar
  • Events the tracking events detected on the page will either be "view" events or "link" events, toggle these checkboxes to filter the display
  • Show Data the UDO data will always be displayed, but additional data sources collected by utag can be displayed by toggling these checkboxes

Data Variables

The following data variables are available:

utagmon-fullheader.jpg
  • TiQ built-in data collected by utag.js, including DOM attributes and variables prefixed with "ut." eg. "ut.profile"
  • Cookie all first party cookies available in the page
  • JS Page JavaScript page variables defined in your data layer (variables other than utag_data)
  • Querystring query string variables found in the URL
  • Meta all meta data values available in the page
  • AudienceStream variables populated by data layer enrichment 

Event Display Area

The event display area automatically updates as you navigate or trigger in-page events. New pages are listed as "utag_view" events and in-page events are listed as "utag_link" events.

utagmon-event-display.jpg

The example above shows two (2) pages visited and one (1) event triggered. This results in two (2)  utag_view entries and one utag_link, which are labeled #1, #2, and #3 in the image. The most recent activity  always displays at the top.