Finding out why tags aren’t firing, or why data isn’t being passed to your analytics, is one of the most frequent tasks we get asked to do by our clients.
Digging in to the page code and working out where things have become disconnected can be slow, frustrating and awkward, especially to the new or inexperienced Digital Marketer.
This post (and the follow ups) will go through some of the steps and techniques we use to identify, find and fix tagging problems.
Part One – Use the Right Tools
I use Chrome for 99% of my debugging. Other browsers are obviously available and all tag deployments should be tested in more than one browser before the push to production. But, I’m used to Chrome and so that’s what I am quickest in when doing the initial development and testing.
However, the browser on its own isn’t quite enough, so you need to make sure you’re tooled up with a collection of useful extensions:
The most useful part of this extension is the “jQuery Events” tab that it adds to the Elements part of Dev Tools. This shows you what event handlers have been added to the element, what event they are on and what the code is.
It is a bit annoying that the code is shown in an alert box and you can’t highlight/copy/paste the contents, but it’s still a very valuable add in.
Edit This Cookie
Edit This Cookie gives visibility and editing capabilities over all the cookies that are created on the page. It has a useful drop down list from the extension icon as well as a new panel in Dev Tools.
Debugger for Adobe Analytics
This extension drops the Adobe call information into the console. There is another official debugger extension – the Adobe Experience Cloud Debugger – but I find outputting to the console is easier to deal with than loading a new window and capturing data in there.
The one time I do use the Experience Cloud debugger is if I want all the calls for a whole journey, in which case the ability to capture all the calls without other comments/console output, and then to export to an Excel document is very useful.
Requestly allows you to rewrite requests for elements. A few useful use cases:
- Blocking the TMS altogether (for when IT blame the tags for breaking the site)
- Repointing the Report Suite within an Analytics tag call
- Repointing the Tagging Profile within a Tealium call
- Replacing the XFrame header on requests (which is sometimes needed for Adobe Target VEC)
This extension will prettify any JSON output
If you’re using Tealium, you’ll also want the Tealium Tools extension and a selection of their Custom Tools:
There’s a list of official Custom Tools here: https://community.tealiumiq.com/t5/Tealium-iQ-Tag-Management/Custom-tools-list-of-tools/td-p/21615
I also use “Environment Switcher”, “Bulk Edit”, “Extension History” and “Omnichannel Status V2” frequently.
And there’s more …
Depending on what other tools and tags you’re looking after, you may also want the Extensions for Google, MiaProva, Facebook, DTM/Launch, Content Square, ObservePoint …
The top of your browser is likely to get quite busy…
(Luckily you can resize the address bar to hide most of these.)
Once you’ve got your browser configured, you need to make sure you know how to use it, so in part two I’ll cover some tips to make sure you’re getting the most out of the Dev Tools.
Ben Stephenson has worked as a consultant for 120Feet for nearly three years. He has ten years of development experience on ecommerce websites, and five years of Digital Marketing experience as an ecommerce manager looking after a large multinational collection of websites for a Travel and Tourism company. In his spare time he plays with Lego and takes photos (sometimes of the Lego).