Universal Tag Debugger

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 displays the data layer and the data captured by each tracking event within utag.js.

The data objects displayed in the tool are captured after extensions scoped to All Tags - Before Load Rules and before extensions scoped to All Tags - After Load Rules. Learn more about order of operations.

Install

Tealium Tools

To install as a Tealium Tool, you must first install the Tealium Tools Browser Extension.

After you install the extension, use the following steps to add the custom tool:

1. Click the Tealium icon in the upper-right of your browser to open Tealium Tools.
2. Go to the Custom Tools tab and click the square for + Custom Tools, then click Add Custom Tools.
3. Next, copy and paste the following JSON code in the field for Add by JSON Definition then click Add Custom Tool:

   {
       "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 on the Custom Tools tab.

Bookmarklet

You can optionally create a bookmarklet to launch the tool.

To create the bookmarklet, copy the following code into the URL of the new bookmark:

javascript: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>"))

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 Ud button.
   The Universal Tag Debugger tool appears.
   If you created a bookmark to use, simply click the bookmarklet in your toolbar.

   

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 upper-right corner of the popup 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:

• iQ – Built-in data collected by utag.js, including DOM attributes and variables prefixed with ut (for example: 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.

The example above shows two pages visited and one event triggered. This results in two utag_view entries and one utag_link. The most recent activity always appears at the top.