Debugging Google Analytics and Google Tag Manager tracking is quite difficult and sometimes a nightmare, esp. if you do not know what to look at and what to fix.

It could take anywhere from few minutes to several days to troubleshoot a GA/GTM issue which off course depends upon one’s skill set and experience.

The objective of this guide, is to help you troubleshoot some of the most common GA/GTM tracking issues, accurately and fast.

This guide is divided into two sections:

1. Google Analytics / Google Tag Manager Debugging Tools – what you need to install/use, in order to get started.
2. Debugging Basics – what you need to understand, in order to debug.

Google Analytics & Google Tag Manager Debugging Tools

You need couple of debugging tools in your arsenal before you can wage war on Google Analytics issues.

Install/use following Google Analytics & Google Tag Manager debugging tools:

---

#1 The Chrome Web Browser

---

Many of the debugging tools I use (esp. Google developer console) work only on chrome.

So if you don’t use chrome, then you need to install it: https://www.google.com/chrome/

 

---

#2 Google Developer Console

---

Google developer console is a must have tool for debugging tracking code (aka javascript) and verify installation.

It is already built in the chrome browser.

So you don’t need to install it separately.

Just right click on a web page and select ‘Inspect’:

This will open the developer console window at the bottom of a web page:

As you can see the developer console has got various tabs: Elements, Console, Sources, Network, Performance etc.

Each tab provides valuable insight.

I will explain the usage of some of these tabs later in this guide.

For now, you need to change few settings of the developer console so that it works best for you.

Press F1 (on your windows machine while the developer console window is open)

This should open the ‘settings’ window:

Locate the ‘Network‘ section and then select the check box named ”Disable Cache (while DevTools is open)‘:

Locate the ‘Console‘ section and then select the check box named ‘Preserve log upon navigation‘.

Disable Cache (while DevTools is open)

This option will disable browser caching for the page you are visiting while the developer console is still open.

You need to disable cache so that your browser does not keep loading the previous version of your web page while you are making changes to it for testing purpose.

Your testing could become really hard, if you can’t see the changes you are making.

Preserve log upon navigation

If this option is kept disabled, you will lose debug information as you navigate one from web page to another.

Preserving the log will come handy when you are testing event tracking code.

 

---

#3 Google Analytics Debugger

---

Google Analytics Debugger is a chrome extension through which Google developer console is able to log/record every hit (pageviews, screenview, event, transactions etc) that you send to Google Analytics server.

Once you have installed the extension, enable it by clicking on its icon on the top right hand side of your browser address bar and then refresh the web page:

Hover your mouse over the GA debugger button to check whether you see the ‘GA Debug: ON’ yellow notification.

If you see the ‘GA Debug: ON‘ notification then it means the GA debugger tool is enabled.

If you see the ‘GA Debug: OFF‘ notification then it means the GA debugger tool is not enabled.

 

Make sure that debugger is turned on before you use Google developer console otherwise your console won’t log GA hits and you won’t be able to debug tracking code issues.

Through GA debugger extension you can see error messages and warnings related to your tracking code under the ‘console’ tab:

Note: If you use Google Tag Assistant, you may not need GA debugger chrome extension.

 

---

#4 Google Tag Manager Debug Console

---

Through Google Tag Manager preview and debug console window, you can make sure that your tags, triggers, variables and data layers work as expected.

By default, what you actually preview and debug is the deployment of the current container draft on your website.

To learn more about the GTM debug console, read this article: Guide to Google Tag Manager Debug Console

 

---

#5 Google Tag Assistant

---

Google Tag Assistant is a chrome extension which is used to identify, validate and troubleshoot the installation of various Google Tags on a web page.

These Google Tags can be:

• Google Analytics
• Google Tag Manager
• Adwords Conversion Tracking
• Remarketing
• Floodlight etc

Tag Assistant also report on implementation errors and suggest fixes.

This is the first tool I use to verify the installation of various Google tags on a web page.

The tool not only finds the various tags installed on a web page but also report implementation errors and suggest fixes by providing links to help documents.

Tips to use Google Tag Assistant like a pro

Tag Assistant Tip #1

Make sure that you are not using any add-on/extension which disable Google Analytics and/or third party cookies in your web browser.

For example, if you use ‘Google Analytics Opt out Add on’ to filter out internal traffic then you need to disable it (via chrome extension page) before you can use the tag assistant.

Similarly, if you use an adblocker like ‘Ghostery’ then you need to disable it before you can use the tag assistant.

Otherwise, Google Tag Assistant may not work correctly and/or produce false positive results (positive results which are more likely to be false than true).

If GA is disabled (because of some add-on or firewall settings) when you use the tag assistant, you may see following notification in the tag assistant window:

“No Google Analytics HTTP responses because opted out code detected‘:

Tag Assistant Tip #2

Once you have installed tag assistant chrome extension, you would need to enable it before you can use it on a web page.

Locate and click on the Google Tag Assistant icon on the top right hand side next to the browser address bar.

Click on the ‘Enable’ button and then refresh the web page:

Tag Assistant Tip #3

If you want to avoid the hassle of enabling the tag assistant, every time you use it on your website then add your domain to the ‘My Favorities’ list by following the steps below:

1. Navigate to the domain which you want to add as a favorite in tag assistant.
2. Enable the tag assistant
3. Open the tag assistant again and then click on the star icon button

Now next time when you use the tag assistant on your website, it will be enabled by default.

Tag Assistant Tip #4

By default tag assistant is not enabled across browser tabs.

So whenever you open a new tab, you will have to manually enable the tag assistant before you can use it.

If you want the tag assistant to be automatically enabled across all browser tabs then turn on the ‘Auto Validation’ setting.

Tag Assistant Tip #5

Turn on the ‘GA Debug’ setting (see the screenshot above).

When you turn on the ‘GA Debug’ setting, it is equivalent to using the Google Analytics debugger Chrome extension.

In other words, you no longer need to install and use the Google Analytics debugger Chrome extension when the ‘GA Debug’ setting of the tag assistant has been turned on.

Tag Assistant Tip #6

Change the Tag Assistant Default Settings.

Right click on the tag assistant icon and then select ‘Options:

Select following two checkboxes:

Scroll down and then change the ‘Level of Details’ for all Google tags to ‘Detailed Information’:

Make sure that the ‘Default Level’ is also set to ‘Detailed Information’.

Tag Assistant Tip #7

Open Google Tag Assistant in a separate browser tab.

Click on the Google Tag Assistant icon and then click on ‘Menu’ button > ‘Show in separate tab’:

The ‘Show in separate tab’ menu item will open the Google Tag Assistant in a separate browser tab.

If you do not use this option then every time you navigate to a different browser tab or reload the web page, the Google Tag Assistant window will automatically hide which will become annoying for you, really fast.

To learn more about Google Tag Assistant, read this article: Complete Guide to Google Tag Assistant.

 

---

#6 Google Tag Assistant Recording

---

Google Tag Assistant recording is one of the features of Google Tag Assistant.

Google Tag Assistant Recording is used to identify, validate and troubleshoot the installation of various Google Tags across many pages.

Google Tag Assistant by default can not validate tags across multiple pages.

But by using the recording feature, you can make the tag assistant to validate tags across many pages.

Through the recording feature, not only you can record the tags across many pages but you can also record events and interactions for any set of pages you visit, either on your own website or some other website(s).

Watch this short video to learn about debugging the ‘timing’ GA hit and cross domain tracking via the Google Tag Assistant recording feature:

To learn all about the recording feature of Google Tag Assistant, read this article: Guide to Google Tag Assistant Recordings.

 

---

#7 Google Analytics Troubleshooter Tools

---

Google Analytics troubleshooters are basically interactive web pages which respond to users’ actions.

These users’ actions can be selecting a particular issue and/or answering ‘yes’ or ‘no’ to questions.

Google has created these troubleshooters around certain analytics topics.

So they are topic specific and can help you in fixing an issue only around that topic.

When you use a troubleshooter, Google ask you series of questions and then based on your answers, suggest you, what data to look at and where, in a GA report and how to resolve a particular issue.

To learn more, read the article: Introduction to Google Analytics Troubleshooter Tools

 

---

#8 Google Analytics Diagnostic Notification Tool

---

Google diagnostic is a feature of Google Analytics which makes regular evaluation of your Google Analytics tracking code, account configuration and data in order to find implementation issues and configuration anomalies.

Once it find issues, it alerts the GA user through a special message known as diagnostic notification (also known as ‘Analytics Notifications’).

These notifications appear as a number over the notification bell in your Google Analytics (GA) view:

Each notification includes a brief description of the problem, recommends a solution and provide following buttons/links.

To learn more about GA notifications, read this article: Understanding Google Analytics Notifications and Diagnostic Messages

 

---

#9 Fiddler

---

Fiddler is primarily used by seasoned web developers for debugging website traffic, testing website performance and security and for recording all the HTTP requests and responses between your web browser and the requested web server.

This tool also log each and every hit that you send to Google Analytics server and by using its inbuilt filters you can filter out these hits and analyze them.

I use this tool only when I have to debug a mobile app or I have to test lot of code in the production environment (which I normally don’t do) without actually uploading the code to the web server.

For most part, whatever tasks Fiddler can do regarding GA debugging, the Google developer console can do the same tasks equally well and sometimes even better.

To learn more about debugging with Fiddler, read this article: Google Analytics Debugging via Fiddler

 

---

#10 Google Analytics Tag Auditing Tools

---

Tag auditing is used to identify various tags (tag is a piece of JavaScript code) on a website for the purpose of:

#1 Upgrading from Classic Google Analytics to Universal Analytics

#2 Migrating Classic / Universal Analytics tags & configurations to Google Tag Manager.

#3 Debugging various Google Analytics tracking code issues

#4 Identifying and removing tags which no longer serve the purpose and should be removed in order to clean the website code.

#5 Migrating non google tags (like Facebook tags, Omniture tags) to Google Tag manager.

In tag auditing we identify all the tags currently being deployed on a website.

Website scraper tools like Screaming Frog SEO spider can be used to identify tags across a website of any size.

I use screaming frog for tag auditing and for diagnosing tracking issues.

Don’t be fooled by its name. It is much more than a SEO tool.

It is a powerful website crawler through which you can identify any piece of code (and its occurrences) across a website of any size and it is not very expensive either.

To learn more about tag auditing tools, read this article: Creating your own Google Analytics Tag Auditing System

 

---

#11 Tool to test Regular Expressions

---

RegExp Tester is a chrome extension which is used to validate regular expressions (or regex).

We use regex to set up complex goal and funnel pages in GA, to set up complex filters and advanced segments.

Therefore it is important that you first validate the regex before using it to collect data:

Here the highlighted search result (i.e. optimize smart) is the pattern which matches with my regex.

My regex job is to filter out two words keyword phrases.

To learn more about regular expressions, read this article: Regular Expressions Guide for SEO, Google Analytics & Google Tag Manager

 

---

#12 JS Fiddle

---

jsfiddle.net is an online tool which is used to test HTML and JavaScript code.

You don’t need to install this tool.

Just bookmark the website.

I used this tool a lot to test JavaScript codes (like the scroll tracking script, video tracking script etc) without breaking my client’s website:

 

---

#13 Web Analytics solution profiler (WASP)

---

Web Analytics solution profiler (WASP) is a chrome extension which provides visual representation of the relationship between various tags fired on a web page.

Once installed, it appears as a new tab (named WASP) in your Google developer console window:

 

---

#14 Google Analytics Measurement Protocol Hit Builder

---

The best and easiest way to create and test payload data is by using the measurement protocol hit builder tool.

By using the hit builder tool, you can skip encoding the URLs and other type of data.

You probability of creating a valid payload data will be very high, if you use the hit builder tool.

To learn more about the hit builder tool, read this article: Using Google Analytics Measurement Protocol Hit Builder

 

---

#15 Postman

---

The GA measurement protocol hit builder allows you to send payload data only via POST method.

It won’t let you send payload data via GET method.

It does not allow you to send multiple hits in a single protocol requests.

And above all, it does not provide you the actual code for creating the protocol request.

You can overcome these limitations, by using the Postman chrome extension.

Through Postman extension, you can:

• Send payload data both via GET and POST method.
• Send multiple hits in a single protocol requests.
• Create the actual code, for creating the measurement protocol request.

To learn more about using the postman tool, read this article: Creating and validating measurement protocol requests through postman

 

---

#16 Notepad Plus Plus

---

Notepad Plus Plus is a great tool to edit and debug any file (HTML, CSS, JavaScript, PHP etc) and I have been using it for god knows how long.

Make sure that you never open any file which contains code without this tool in order to preserve formatting (esp. in case of .htaccess file) and to avoid syntax errors:

Note: Do not copy paste any code from Microsoft Word as it can corrupt your code.

 

---

#17 Other debugging tools

---

• Injector – chrome extension which can be used to insert JavaScript code client side, as page loads.
• Javascript Beautifier – tool to indent JavaScript code automatically and read minified JavaScript.
• JavaScriptLint.com – tool to test JavaScript code for syntax errors.
• Omnibug – chrome extension to decode and display outgoing web metrics requests.
• Paypal Sandbox – paypal account for testing purpose.
• sublimetext.com – source code editor more powerful than notepad plus plus (paid tool).
• Web Developer Chrome Extension
• Edit this cookie – chrome extension through which you can add, edit, delete, search or protect cookies (like GA cookies). Good tool for validating cross-domain tracking set up.
• Create Valid Credit Card Numbers for testing purpose

Debugging Basics

In order to understand how debugging is carried out, you need to get familiar with following concepts:

1. Debugging with ga_debug.js and analytics_debug.js
2. Understanding _utm.gif

Debugging with ga_debug.js and analytics_debug.js

ga_debug.js is the debug version of Google Analytics JavaScript which is used to troubleshoot GA installation.

You need to upload this script on your website in order to debug GA issues.

However if you are using Google Analytics debugger, you don’t need to manually upload this script.

The debugger will automatically load this script for you for any website you browse via chrome browser.

analytics_debug.js is the debug version of Universal Analytics JavaScript which is used to troubleshoot UA installation.

You need to upload this script in order to debug UA issues.

However if you are using Google Analytics debugger, you don’t need to manually upload this script.

The debugger will automatically load this script for you for any website you browse via chrome browser.

Both ga_debug.js and analytics_debug.js scripts provide detail breakdown of each GIF request sent to Google Analytics server as well as log warning and error messages whenever a problem is detected in the tracking code.

If you see ga_debug.js being used in the Google developer console, then it means the website is still using the old Google Analytics library (ga.js):

However, if you see analytics_debug.js being used in the Google developer console, then it means the website is using the Universal Analytics library (analytics.js):

Understanding _utm.gif

_utm.gif is a transparent GIF image file which contains hit and browser data in the query string.

The Google analytics tracking code sends hit and browser data to Google Analytics server via this file.

This file is requested for each hit (pageview, screenview, event, transaction etc).

Following is an example of a GIF Request:

https://www.google-analytics.com/__utm.gif?utmwv=4&utmn=769876874&utmhn=example.com&utmcs=ISO-8859-1&utmsr=1280×1024&utmsc=32-bit&utmul=en-us&utmje=1&utmfl=9.0%20%20r115&utmcn=1&utmdt=GATC012%20setting%20variables&utmhid=2059107202&utmr=0&utmp=/auto/GATC012.html?utm_source=www.gatc012.org&utm_campaign=campaign+gatc012&utm_term=keywords+gatc012&utm_content=content+gatc012&utm_medium=medium+gatc012&utmac=UA-30138-1&utmcc=__utma%3D97315849.1774621898.1207701397.1207701397.1207701397.1%3B…

Analytics experts interpret this GIF request to debug various tracking code issues.

The next article in the Google Analytics debugging series focus on the interpretation of GIF request, rewriting HTML and testing new JavaScript code on a live website without server access.

Basically the next article is the practical implementation of what we have learned so far.

Check out the next article: Troubleshooting Google Analytics Setup Issues – Part 2

Another article that you will find useful: Google Analytics stopped working? Here are 10 ways to fix it.