Tealium: Did the website developer provide the Data Layer as expected?

Enable easy-to-read Debug Output to Console on all Browsers for the most relevant stages of Data Layer Processing

There are a number of decent Tealium debuggers out there. Nevertheless, simple-minded and mentally challenged as I am, I tend to prefer a simple debug output directly to the browser console. Browser extensions just don’t work in all browsers and have a negative impact on page speed.

Tealium’s own debugger does that quite decently. Just set a “utagdb” Cookie to “true” by typing this into the browser console:

document.cookie="utagdb=true"

That debugger output provides you, among other things, with the Data Layer at all relevant stages of the processing chain. However, it can be a bit overwhelming, and the text in there is a bit cryptic (with all kinds of abbreviations like utag.loader.RD or BLR/ALR — you need to understand Tealium a lot deeper to really know what they mean).

Furthermore, I like to just CTRL+F my way through the console output without having to open each object in the console first. This also has the downside that, if e.g. a click event you want to debug directly opens another page in the same tab, the objects cannot be opened on the new page anymore (yes, I know you can open in a new tab with CTRL+Click).

When debugging/testing Tealium implementations, my most frequent desire is usually:

I want to see what is passed into Tealium from outside (e.g. by the shop developer) before my Tealium Extension logic starts extending and manipulating that data.

So the goal is to quickly answer the question:

Did the developer provide the Data Layer she was supposed to? If yes, the wrong data e.g. in the request to Analytics is probably due to an error within Tealium.

This is crucial when you like to play the blame game. You can quickly say: “Haha, web dev team’s fault!” Or you can quickly shut up ashamed and go fix that bug in Tealium.

How to:

1. Open your Tealium profile

2. Click on your initials (e.g. LO if your name is Lars Odenwald) in the top right, then “Manage Templates”.

3. Open “uTag Loader”.

4. Replace the code by this one (all changes to Tealium’s original template start and end with “// CHANGE”):

5. Click Apply.

6. Publish your Tealium Profile.

7. Open your website and the browser console (F12 or Right-Click “Inspect Element” -> “Console”). Then run this command in the Console (or append
“?teal_dbg=1” to your URL and reload):

TMSHelper.dbgActivate();

You should see this output:

set TMSHelper.dbgActive flag. Will enable console outputs of Pre-Loader State and all Data Layer Events (utag.view/.link). Delete the ‘teal_dbg’ cookie to stop.

8. Reload or click on something that would execute a utag.view/utag.link Event.

9. You should now see the Data Layer at all relevant processing stages in the console:
a) Pre-Loader state (utag_data, aka the optional a “raw initial” page data layer that you can set before you load Tealium. To reduce complexity, I tend to not use this object anymore btw. Instead, I do it all with utag.view and utag.link calls (or even more reliably with the utagQ Queue)):

b) Data Layer Events, i.e. utag.view or utag.link (what was in the utag.link/view payload before Tealium started processing it):

c) After “All Tags” Extensions in “After Tags“ scope have run. This is right before the mapping of the Data Layer variables to your Tags (e.g. Analytics) starts. So this is what your tags "get" after your data processing in Tealium (=> your “All Tags” Extensions, the core of any Tealium setup):

This also contains all the variables that Tealium sets itself, so it can get quite big. I thus chose to provide it as a normal (non-stringified) object which you have to “open” yourself by clicking on the little arrow to the left.

I know this is not a world-beater, and if you have lots of your own utag Loader customizations, then it is probably not for you. But I use this quite a lot, so I thought I might as well share it. Even if you don’t, it may help you understand better where what happens in the general Tealium processing chain.

Happy debugging!