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:
Google Analytics / Google Tag Manager Debugging Tools – what you need to install/use, in order to get started.
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 Google Analytics Debugger
Google Analytics Debugger is a chrome extension through which the Google developer console is able to log/record every hit (pageviews, screenview, event, transactions, etc) that you send to the 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 the 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 the 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.
#2 Chrome Web Browser
Many of the debugging tools I use (esp. Google developer console) work only on chrome.
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‘.
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 in 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.
#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.
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.
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:
Navigate to the domain which you want to add as a favorite in Tag Assistant.
Enable Tag Assistant
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 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).
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 the ‘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.
Note: Run Tag Assistant on all important pages of your website (and not just the home page).
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).
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 asks you series of questions and then based on your answers, suggest to you what data to look at, and where, in a GA report and how to resolve a particular issue.
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 the following buttons/links.
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 logs each and every hit that you send to the 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.
#4 Identifying and removing tags that 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.
We use regex to set up complex goals 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 that matches with my regex. My regex’s job is to filter out two words keyword phrases.
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 GA measurement protocol hit builder allows you to send payload data only via the POST method.
It won’t let you send payload data via the 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.
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 the page loads.
Javascript Beautifier – a tool to indent JavaScript code automatically and read minified JavaScript.
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.
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 the 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/#devices” 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 on 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 that 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 ‘pageview’ 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:
Debugging with ga.js and analytics.js
Understanding _utm.gif
Debugging with ga.js and analytics.js
ga.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.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.js and analytics.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.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.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 that 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).
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
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.
Frequently Asked Questions about Google Analytics Debugger
How long does it take to debug a GA/GTM issue?
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.
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.
What is 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. Through GA debugger extension you can see error messages and warnings related to your tracking code under the ‘console’ tab:
What web browser is best for debugging GA/GTM?
Many of the debugging tools I use (especially 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/
What is 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. The developer console has got various tabs: Elements, Console, Sources, Network, Performance, etc. Each tab provides valuable insight.
What is 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, including: – Google Analytics – Google Tag Manager – Google Ads Conversion Tracking – Remarketing – Floodlight, etc 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.
Register for the FREE TRAINING...
"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."
Here’s what we’re going to cover in this training…
#1 Why digital analytics is the key to online business success.
#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.
#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.
#4 Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.
#5 The number 1 reason why conversion optimization is not working for your business.
#6 How to advertise on any marketing platform for FREE with an unlimited budget.
#7 How to learn and master digital analytics and conversion optimization in record time.
My best selling books on Digital Analytics and Conversion Optimization
Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.
Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.
Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW!
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.
Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.
About the Author
Himanshu Sharma
Founder, OptimizeSmart.com
Over 15 years of experience in digital analytics and marketing
Author of four best-selling books on digital analytics and conversion optimization
Nominated for Digital Analytics Association Awards for Excellence
Runs one of the most popular blogs in the world on digital analytics
Consultant to countless small and big businesses over the decade
error: Alert: Content is protected !!
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Allow Cookies”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
