Google Analytics And Google Tag Manager Debugging Tools

March 7, 2016 | Daniel Settlemire
Google Analytics And Google Tag Manager Debugging Tools

Stuck on a problem in GA or GTM? Don’t rage quit on your Google Tag Manager/Google Analytics implementation!

ragequit

Believe me, I know there are a lot of moving parts and processes of which to keep track, but don’t give up. At LunaMetrics, there are many different tools we use to help make our jobs easier. Because much of GA/GTM happens within the web browser, we utilize a variety of built-in tools and Google Chrome Extensions. These tools enhance visibility into the mechanics of the inner workings of GA/GTM and help with the configuring and debugging as well as previewing.

So let’s peer behind the curtain and take a look…

The Basics: JavaScript Console

JavaScript Console

I would be remiss if I did not first mention the JavaScript Console found within Google Chrome and most other browsers. The console allows you to test JavaScript within the browser on any website. When configuring custom scripts within GTM, you can use ‘console.log’ within your code to aid in your troubleshooting. The console also allows you to access the dataLayer and objects found within your code to ensure the data found in its proper place.

Some of the other tools mentioned below make use of the JavaScript Console to print debug information, stay tuned!

You’ll find the Console as part of the Web Developer Tools, listed in the Chrome menu under More Tools. On a Windows computer, you can also use the shortcuts: F12, or CTRL + SHIFT + J. For a Mac, use CMD + OPT + J.

Google Tag Manager Preview Mode

Tag Manager Preview

Prior to publishing your tags in GTM, enabling Preview Mode gives you access to the mechanics of your tags, triggers, and variables. Only you can see Preview Mode, as it only is enabled based on a special cookie set within your browser. The left pane shows you the events through the page loading process and the right pane shows you how the tags, variables and dataLayer were affected through each step. This is a great tool for confirming your configuration.

Google Analytics Debugger

Google Analytics Debugger

While it is true that you can access GA’s debug mode without any extension, Google’s own debugger extension makes this a simple, painless process. Once enabled, it decodes all of the hits send to GA and prints them to the console. This is a great tool for checking for broken sessions and verifying custom dimensions!

Not working for you? No joke – try turning it off and back on by clicking on the extension icon while you have the console open.

Google Tag Assistant

Tag Assistant

The Tag Assistant Chrome extension is a very useful tool in testing and debugging your implementation. It does almost everything you would expect. First it displays and troubleshoots the status of most Google-related tags – be it Analytics, AdWords, DoubleClick or Tag Manager. Within the tool, you can even enable GA debug mode.

One of the most powerful features within the tool is Tag Assistant recordings. This allows you to “record” a browsing session and produce a report on all of the hits being sent through and even how they will potentially show up within Google Analytics. Tag Assistant has been known to be buggy at times, but things have seemed to have stabilized in recent months.

Injector

Injector

Injector is a tool that allows you to insert CSS or JavaScript code snippets client-side as a page loads. From an Analytics perspective, this is a useful tool for testing GTM where there currently is no GTM code, but the tool is much more versatile.

Tag Manager Injector

Tag Manager Injector

Similar to Injector, Tag Manager Injector simplifies the process of inserting GTM code on a site on the fly where no code currently exists. This is useful should you want to quickly test GTM without altering the code on the site. You can even push variables to the dataLayer for test other aspects of your implementation.

Code Editor for GTM

Code Editor For GTM

While GTM has improved its code syntax highlighting since its inception, many still favor the styling of this Code Editor Chrome extension. While not necessarily a debugging tool, making code within GTM easier to read certainly aids the overall process.

EditThisCookie

Edit This Cookie

EditThisCookie has quickly proven itself to be an indispensable tool around the LunaMetrics Office. With it you can view cookies set by Google Analytics, delete cookies, modify cookies and even add additional cookies. This is a great too for verifying GA trackers and any other custom cookies that may be in use.

Working with subdomains or cross-domain tracking? This tool is a must have!

Just Scratching the Surface

These are some of the main debugging tools we use right now. While this list is purely a snapshot in time, newer tools will likely be discovered and find their way into our use. As they do, we will be sure to let you know what tools make our debugging lives easier.