Our guide to help you debug your analytics and tags

Finding out why tags aren’t firing or why data aren’t being passed to Adobe Analytics or Google 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.

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:

jQuery Debugger

Get jQuery Debugger from the chrome web store.

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 useful add in.

jQuery debugger, jQuery events

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

Get Debugger for Adobe Analytics from the chrome web store.

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

https://chrome.google.com/webstore/detail/requestly-redirect-url-mo/mdnleldcmiljblolnjhpnblkcekpdkpa

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)

requestly

 

JSON Formatter

The JSON Formatter extension will prettify any JSON output

Pretty Beautiful JavaScript

The Pretty Beautiful JavaScript extension will prettify any Javascript output, for example if you load the utag.js file directly in the browser.

Tealium Tools

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.

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…

image of my browser bar

(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 guitar, builds with Lego and takes photos (sometimes featuring the guitar or the Lego).