Working with Google Analytics and Google Tag Manager often requires a lot of debugging. In order to actually verify that the things we are about to implement or that already are implemented are working or not, there are some really good tools that can help you with your debugging.

1. The Console (Google Chrome)

One of the tools I really can’t live without is the console in Google Chrome. It’s found under the Development Tools and can easily be accessed by pressing Cmd+Opt+J (Mac) or Cmd+Shift+J (Win).

Debugging via the console in Google Chrome

Since GTM is heavily dependent on Javascript, it is really invaluable to be able to take a deep dive into the inner sanctum on what’s really happening in the DOM and the dataLayer.

Not only can you see what happens, but you can also use it to push variables into the dataLayer for testing purposes. Lets say that you want to test pushing a random named event into the dataLayer to see how GTM reacts.

dataLayer.push via the Console

Let’s just say that the Console in Chrome is essential in by toolbox; can’t live without it.

2. GTM Sonar

Next up is a Chrome plugin named GTM Sonar created by no other that Simo Ahava that allows you to ‘halt’ the actual event/trigger from firing but instead push the result into a debug variable reachable from the console discussed above.

 

GTM Sonar for Google Chrome

 

 

This gives you valuable information in the debugDL  variable found in the console where you can dive into what’s being sent into the dataLayer. I find this particularly useful while debugging form event submits via gtm.formSubmit.

That means that you don’t really have to send the form, but only simulate what will happen in GTM and what will fire and what will not.

3. Google Analytics Debugger Extension

Number three is yet again related to Google Chrome and is an extension named GA Debug that allows you to see what’s actually being sent into Google Analytics. Once again, you’ll see the data in… you guessed it; the console!

[code]Initializing Google Analytics.
Running command: ga(“create”, “UA-54119234-1”, {name: “gtm1429192088620”, allowLinker: false})
Creating new tracker: gtm1429192088620
Running command: ga(“gtm1429192088620.set”, “&gtm”, “GTM-NBG5G5”)
Running command: ga(“gtm1429192088620.set”, “anonymizeIp”, undefined)
Running command: ga(“gtm1429192088620.set”, “dimension1”, “logged-in”)
Running command: ga(“gtm1429192088620.set”, “hitCallback”, [function])
Running command: ga(“gtm1429192088620.require”, “displayfeatures”, undefined, {cookieName: “_dc_gtm_UA-54119234-1”})
Set called on unknown field: “dcLoaded”.
Plugin “displayfeatures” intialized on tracker “gtm1429192088620”.
Running command: ga(“gtm1429192088620.send”, “pageview”)
Setting throttling cookie: “_dc_gtm_UA-54119234-1”
Sent beacon:
v=1&_v=j35d&a=250504207&t=pageview&_s=1&dl=http%3A%2F%2Fdcarlbom.com%2Fabout%2F&ul=en-us&de=UTF-8&dt=About%20-%20dcarlbom.com&sd=24-bit&sr=1680×1050&vp=1679×628&je=1&fl=17.0%20r0&_u=QCCAgAAB~&jid=173485877&cid=1955762469.1428652308&tid=UA-54119234-1&gtm=GTM-NBG5G5&cd1=logged-in&z=554845797

dimension1 (&cd1) logged-in
encoding (&de) UTF-8
flashVersion (&fl) 17.0 r0
hitType (&t) pageview
javaEnabled (&je) 1
language (&ul) en-us
location (&dl) http://dcarlbom.com/about/
screenColors (&sd) 24-bit[/code]

This gives us information about a lot of things on the fly, such as what Google Analytics Property is being used (row 2), what kind of hit type is being sent (row 19) and what URL is being sent into GA (row 22) amongst many other things.

4. Web Analytics Solution Profiler (WASP)

I’m kinda fond of my Chrome extensions as you’ve probably figured out by now, so here comes another one!

WASP is an extension created by CardinalPath and can be directly installed into Chrome right here. The developers over at CardinalPath have really created something useful here and it’s also a must have in anyones toolbox working with any kind of data intelligence gathering to be honest, since it does not only work with Google Analytics or Google Tag Manager, but all sorts of tools.

WASP Inspector

 

The great part with WASP is that its really good at visualising what’s happening and how the different scripts are connected. And one of the great benefits is that it actually remembers the state of the dataLayer (amongst other things) after you’ve left the page and proceeded to the next page. This is really good since GTM’s own debug tool doesn’t allow you (easily) to see what happened on the previous page.

5. Google Tag Manager’s Debug Feature

GTM DebugLast but not least I have to mention the built in debug mode in Google Tag Manager. The good part with this tool is that it allows you to see what tags are firing and which ones are not.

It also allows you to see what the different variables (macros) contains in any given state when you perform an action on the page.

This is probably something you haven’t missed by now, since it’s highlighted just below the Publish button in the GTM interface. By hitting preview you’ll get all unpublished changes visible to you in a nifty little window underneath the page itself.

This is very valuable while implementing GTM on a site since it allows you to actually see what the changes you’ve made really do. Do they fire as they should, only on the pages they should?

Google Tag Manager Debugging

 

It also allows you to dive deeper into the data as stated above, allowing you to see the information contained in the variables.

GTM Variable Debugging

There are a lot of really good debugging tools out there, and I could have made this list more than twice its size. But I am a firm believer of keeping lists shorts and try to always refine them instead.

What GA/GTM debugging tools are you using that I didn’t mention in this post?

Tell your friends...Share on Facebook4Tweet about this on TwitterShare on Google+24Share on LinkedIn24