UDO Debugger Chrome Extension for Tealium iQ Implementations

Tealium Expert
Tealium Expert

Hi Tealium Community!

I've been working with Tealium products extensively and am the creator of the UDO Debugger extension for Chrome. Recently, I completely refactored the tool with a lot of cool features that I hope will help other analysts and developers who work with Tealium products.

Here is a small list of the current features on the debugger:

  • Tealium Presence Detection with account, profile, environment reporting.
  • New - App State, utag.link, utag.view reporting
  • New - The current fired tags are reported
  • New - Clipboard Support
  • New - Environments Switcher
  • New - Debug Enabler / Reporter
To get started, install the UDO Debugger (Chrome Extension).
Below is an overview of the features and how to use them.

Tealium Presence Detection

The extension will automatically report if the Tealium Universal Tag (utag.js) has been loaded on the page.
Upon detection, it will display the account, profile, environment, and the version of the loaded utag.js file (useful for easily seeing when the last publication is live).

Image 1.png

App State, utag.link, utag.view Reporting

In the previous versions, only the App State was being reported (App State refers to the original values in utag_data).

In the new version, the entire UDO object is displayed, including the data layer variable types that are internal to utag.js. As you may know, the UDO includes some variables by default, such as cookies, meta tags, AudienceStream audiences, query string parameters, etc, which are grouped under the _internal object in the extension. The internal E-Ecommerce variables are displayed under the _ecommerce object.

Image 2.png

This allows you to expand only the Universal Data Object variables that are interesting to you.

And yes, now the utag.link() and utag.view() calls are being reported. Each time these tracking methods are called, it is reported in the display window.

Image 3.png

And the coolest thing is that you’ll be able to see if the tracking call was scoped to a certain tag and if it was called with with a callback function. There's even a fully prettified and formatted output of the callback code.

Fired tags are reported

This new version will show you which tags are fired on the site by your Tealium tag. They even appear in the report automatically as they load.

There's also a new feature to help identify the tags on the page. You might have run into the situation where the name of a tag is vague, such as “Marketing Pixel", or the name doesn't match the current pixel, like firing a Google Ads Pixel and having a name like “Conversion Pixel FB.”

Now, in the UDO Debugger tool you can click on the tags ID to see the full details of the tag. The Tag Details window displays the real template name, the tag description, the configuration fields for that tag in Tealium iQand the current tag code, display in a prettified and formatted way without needing to go to Tealium to view the template! Yay!

image-4.png

Clipboard Support

Any content displayed in the app state, utag.link, or utag.view can be copied to your clipboard with a single mouse click. The copied text is formatted nicely to easily share it with your IT department or for writing documentation.

Environment Switcher

Within the main window of the extension you can switch between the DEV / QA / PROD environments. This setting will last while the browser session is open.
If you ever worked with Tealium Web Companion to switch environments, you might have noticed two big issues:

  1. utag.sync is not affected, so it will always load the environment coded in the page.
  2. It uses a cookie (instead of doing a redirect) so it actually loads a second utag.js on top of the first one, resulting in some odd behavior in certain circumstances.
    For example, let’s say that your “prod” environment has an extension that sets a global variable window.thyngster , then you load your “dev” environment where that variable is not set. You might see that variable being set despite you’re not expecting it, making you go crazy!

I have solved these two issues. The new environment switcher feature performs 307 redirects for both utag.js and utag.sync.js files so you can do proper QA and testing.

Debug Enabler / Reporter

As I’m sure you already know, you can have the Universal Tag (utag.js) push all debug logs to the console (via the calls to utag.DB in the templates) by setting a cookie named utagdb=true :

document.cookie="utagdb=true";

However, a lot of output appears in the console, which makes it difficult to follow what is going on: the debug output from utag.js will be mixed with other messages, such as network request failures or scripts errors.

The update to my tool allows you to enable the debug switch from the interface and show the debug output in a nice table. You can even view the debug logs from previous page. This makes the utag.debug information a lot easier to read.

I hope this information is helpful to you. If you have any questions, leave a comment below.