Tealium UDO Inspector

Tealium Employee

Getting The Code

javascript&colon;(function(){window.open("","UDO Inspector","width=600,height=514,scrollbars=1").document.write("<script language=\"JavaScript\" id=\"udoaudit\" src=\"//tags.tiqcdn.com/utag/adrian-test/tools/dev/utag.4.js?"+Math.random()+"\"><\/script>");}());

 

What can it do?

  1. Raw utag_data - Review the raw data layer in the page (utag_data)
  2. Beautified utag_data - A beautified version of the raw data layer
  3. Processed utag.data - The current processed utag.data object
  4. Diff - The ability to diff the utag_data and utag.data objects
  5. Tracking Calls - Being able to see all tracking (view/links/custom) calls with their data layer
  6. Utag Log - Shows the calls from the utag.DB statement in a scrolling window
  7. Load Rules - A re-evaluating screen to show which load rules have been activated

udo_in_header.png

At the top of the window, you have the values from:

    • Path - utag.cfg.path - domain / account / profile / env /
    • Ver - utag.cfg.v - utag loader version + timestamp of publish

Raw utag_data

So when you are on a site having to scroll through the source of a page can be a pain trying to find the raw data layer, so what the UDO Inspector attempts to do is to scrape the source of the page to find the raw utag_data (or whatever the udo_name has been set to)

raw_html.png

Once it is found, it will display it "as is", so if the data layer is formatted badly, then that is what will be shown.

udo_in_raw.png

Beautified utag_data

So looking at a badly formatted data object isn't easy. So on this tab you will be able to see that data in two formats. Table & JSON format.

udo_in_bea_table.png

The JSON object is correctly syntaxed so you are able to copy the JSON object and paste it into a utag.view or utag.link call.

udo_in_bea_json.png

Processed utag.data

This is the utag.data once the All Tags Extensions have been run through.
Again this can be view in either a table or JSON format.

udo_in_pro_table.png udo_in_pro_json.png

Diff - utag_data Vs utag.data

Status

  • Added (Green) - Items that don't exist in the utag_data but do now exist in utag.data
  • Modified (Yellow) - Items that have been changed since running through the All Tags Extensions
  • Removed (Red) - Items that have been removed from the utag_data data layer
  • Unchanged (No Colour) - Items that have kept their value whilst going through the All Tags Extension

Variable Types

  • UDO Var - Normal data source from the utag_data/utag.data layer
  • E-Comm - From the E-Commerce extension _c* vars
  • DOM - DOM vars like: domain, path, hash etc (dom.*)
  • Cookie - vars that begin cp.*
  • Meta - vars that begin meta.*
  • Querystring - vars that begin qp.*
  • JS Var - vars that begin js_page.*
  • Tealium Var - vars that begin _t_*

Each of the above options is clickable, and you are able to show/hide each type as you wish to see.

udo_in_diff.png

Tracking calls

View/Link/A custom event
What you see here is any calls that have been sent to utag.view/link({}); or utag.track("custom_event", {});

Sent Data - Event Type
This is the data that will be sent to a tag. This is achieved by a blank tag being created which is called by the send() call, this has the UID of 0.

UID - Event Type
Every tag that has at least one extension will gain a new extension that takes a copy of the b object before continuing with the rest of the the tags send code.
UID - Tag ID
Event Type - View/Link/Custom event

Selecting an item will show you the data that was sent in that call, with both the JSON and Table views.

Selection two items, will allow you to compare two calls to see what was different in the data object. The colours are the same as those from the Diff tab.

 

Utag Log

When the UDO Inspector starts up, it sets the utag debug cookie:

document.cookie="utagdb=true";

From this point onwards, all calls that the utag.js or a utag.x.js files makes to the debug function, these are listed in this view.

udo_in_utagdb.png

Load Rules

This tab reloads whenever the load rules get re-evaluated, so you can see in real time which load rules are currently active. There are two statuses Fired / Not Fired.
The load rules are listed with all Fired items at the top, and Not Fired items towards the bottom. Within each group they are sorted by their Load Rule ID.

udo_in_lr.png

Ask me anything Tealium related or TypeScript/JavaScript, or NodeJS.
Please remember to mark solutions as accepted for future searchers.
Public