An important step in Google Analytics implementation is debugging.  Debugging Google Analytics and Google Tag Manager tracking is quite difficult and sometimes a nightmare, especially if you do not know what to look at and what to fix.

It could take anywhere from a few minutes to several days to troubleshoot a GA/GTM issue, which of 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 a couple of debugging tools in your arsenal before you can wage war on Google Analytics issues.

Install/use the following Google Analytics and Google Tag Manager debugging tools:

#1 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 the 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.

Elements Tab: The elements tab allows you to inspect and modify the website elements from the front end. When you fire any event in Google Analytics using Google Tag Manager you use the ‘Class’ attribute or “ID” attribute of the element.

Console Tab: The main uses of the Chrome development tools console are logging messages and running JavaScript. Many extensions that we use for debugging the Google Analytics print useful information to the console tab. These messages include error messages and warnings which can tell you when your analytics tracking code is set up incorrectly. It also provides a detailed breakdown of each tracking call sent to Google Analytics.

Source Tab: The source tab is used to view files, edit CSS and to edit and debug JavaScript. These files are the building blocks of your website.

Network Tab: The main use of the network tab is to validate Google Analytics calls and parameters that are sent to the analytics server. You can see every event and pageview sent to the server, along with custom dimensions and metrics.

Before using the Chrome developer console to debug your analytics you need to change a 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 checkbox named ”Disable Cache (while DevTools is open)‘:

Locate the ‘Console‘ section and then select the checkbox 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 the 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 purposes.

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 one web page to another.

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

To debug your analytics, follow the below steps:

#Step 1: Go to the network tab in the console. You will see a screen like the one below.

#Step 2: Type “Collect?” in the filter on the left-hand side and refresh the page.

“Collect?” is the measurement protocol used by Google Analytics to send data. By using “Collect?” in the filter we can see all the Google Analytics calls made.

#Step 3: Once the page has refreshed, you can see the collect call in the network tab. You can click on the collect call and then on “Headers” to see what information is being passed to Google Analytics.

In the below image you can see a pageview call sent to Google Analytics along with other parameters. We will talk about the network call parameter in details at the end of this article.

#Step 4: Debugging an event in the network tab. Just like the pageview call, you can also debug the event being sent to Google Analytics using the same “collect?” in the filter. You can also check event category, event action and event label along with other parameters.

Note: To generate network calls for an event, you need to perform the corresponding event action, for example, scroll, media play, click on link, etc.

#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:

A standard pageview call will look like below:

A standard event call will look like below:

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 that 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 reports on implementation errors and suggests 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 disables Google Analytics and/or third-party cookies in your web browser.

For example, if you use the 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 the 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 adds your domain to the ‘My Favorites’ 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, the 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 the 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 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 that 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 that makes regular evaluation of your Google Analytics tracking code, account configuration, and data in order to find implementation issues and configuration anomalies.

Once it finds issues, it alerts the GA user through a special message known as a 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 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 a lot of code in the production environment (which I normally don’t do) without actually uploading the code to the webserver.

For the 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 an 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’s job is to filter out two words keyword phrases.

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

#12 JS Fiddle

jsfiddle.net is an online tool that 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 that provides a 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 types of data.

Your 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 request. And above all, it does not provide you with 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 – a tool to indent JavaScript code automatically and read minified JavaScript.
• JavaScriptLint.com – a 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 purposes.
• 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). A good tool for validating cross-domain tracking set up.
• Create Valid Credit Card Numbers for testing purpose

Debugging in Mobile Devices

Since the majority of users now use mobile devices, it is very important to debug or validate your analytics set up on mobile devices as well.

Up until now, we have only debugged on desktop websites so to make sure your analytics is firing correctly on multi-device platforms, like mobiles and tablet, debugging on mobile devices is a necessity.

Here I am using an Android device to tell you how to debug your analytics on mobile.

Here is what you will need before proceeding

• Google Chrome on your desktop/laptop
• Android 4 or later device
• A USB cable to connect mobile and desktop

Follow the steps below:

#Step 1: First you need to enable USB debugging option on your mobile device.

To do this go into your device settings and find the developer options:

#Step 2: Enable USB debugging:

#Step 3: Open Google Chrome on your desktop, we are doing this to enable USB discovery in the Chrome browser. Open a new tab and type “chrome:inspect” in the URL bar, then hit ‘Enter’.

#Step 4: In devices, enable “Discover USB Devices”:

#Step 5: Now connect your phone to your desktop using the USB cable. You will get a notification on your Android phone to connect, click on ‘Allow’.

#Step 6: Open the Chrome app in your mobile phone and enter the URL of the page you want to debug. In this case, we are debugging our website home page which is “https://www.optimizesmart.com”

#Step 7: Now open a new tab in Google Chrome on your desktop browser and type “chrome:inspect” in the URL bar and hit ‘Enter’. You will see your device listed and the tab open in your mobile device as below:

#Step 8: Click on the ‘Inspect’ link which is available below the details of the tabs open in the mobile device. This will allow your desktop browser to debug the mobile browser tab with all the functionality that we use to debug a normal website using the Chrome dev tools console.

A new Chrome tab will pop up like below which will have the same screen as you have on your mobile browser along with Chrome dev tools on the right-hand side like network, console, application, etc.

#Step 9: Now you can navigate to any different page or perform any activity, like link click, scroll (swipe down or up), etc, in the screen available in your desktop browser. You can see a circular cursor which acts like a finger used for swiping and clicking.

You can also perform any activity on your mobile browser. Both browsers are in sync together and react to whatever corresponding activity you do.

#Step 10: You are all set to debug your analytics calls on the Android device. Just go to the network tab in your desktop browser and type collect in the filter. You will see all the server calls made to your analytics account.

Below you can see one pageview request and one event firing.

Debugging Basics

In order to understand how debugging is carried out, you need to get familiar with the 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 the 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 a detailed 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 the 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.

Understanding Network Call Parameters

With every Google Analytics network call we send lots of parameters, for example, hit types like pageview, event or transaction, user ID, tracking ID, etc.

Following are a few of the network call parameters which are generally sent with an analytics call.

Protocol Version (V): Protocol version refers to the value set by Google Analytics like “1”. This value will change only when there are changes made to analytics script which is not backwards compatible. It is denoted by “v”

Measurement ID/ Property ID (tid): “tid” refers to the Google Analytics account property ID to which the corresponding network call is sending data, for example, tid:UA-XXXX-Y.

Client ID (cid): Client ID “cid” refers to the unique ID generated for each device or browser instance. This is generally stored in a first-party cookie, for example, cid: 2106630042.1595910687

Screen Resolution (sr): “sr” refers to the screen resolution of the current device, for example, sr:800×600

User Language (ul): “ul” refers to the user language. Generally, it is the language set for the browser by the user, for example, ul:en-us

Hit Type (t): “t” refers to the hit type sent to Google Analytics. This could be any pageview, screenview, event, transaction, item, social, exception, timing. For example, t:pageview

For a complete list of parameters and their meanings you can visit the Google Analytics Measurement Protocol Reference

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.