Debugger google analytics


Beginners guide to Google Analytics Debugging

Debugging Google Analytics tracking code is quite difficult and sometimes a nightmare, esp. if you don’t know what to look at and what to fix.

It could take anywhere from few minutes to several days to troubleshoot a GA 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 Google Analytics tracking code issues, accurately and fast.

But first watch my video below (for hands on training) and pardon my delivery rate. I was speaking way too slow in this video, as it was one of my first videos. I don’t normally speak like that.

This guide is divided into two sections:

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

Google Analytics Debugging Tools

You need couple of debugging tools in your arsenal before you can wage war on tracking code issues. Install following tools on your hard disk:

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

#2 Create Valid Credit Card Numbers for testing purpose

#3 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.

#4 Fiddler – This tool 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

#5 Google Analytics Debugger – chrome extension through which Google developer console is able to record every hit that you send to Google Analytics server. It reports on error messages and warnings related to your tracking code in the console.

#6 Google Analytics Hit Builder – tool to create and validate measurement protocol hits.

#7 Google Analytics Opt out Add on – chrome extension to disable Google Analytics.

#8 Google Analytics Measurement Protocol – Google’s documentation on measurement protocol.

#9 Google developer console – This is a must have tool for debugging tracking code (aka javascript) and verify installation. It is already built in chrome browser. So you don’t need to install it separately. Just right click on a web page and select ‘inspect element’. This will open up the developer console at the bottom of the web page:

As you can see the developer console has got various tabs: Elements, Network, Sources, Timeline 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. Click on the ‘settings’ button on the right hand side:

This will open the ‘settings’ dialog box where you check the two check boxes named: ‘Disable Cache (while DevTools is open)’ and ‘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.

#10 Google Tag Assistant – chrome extension to verify the installation of various Google tags on a web page. It 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:

Checkout the following short video to understand what these blue, green and red faces mean and how to use Google Tag Assistant:

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

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

Note(1): Make sure that you change the ‘Level of detail’ for ‘Google Analytics’ to ‘Detailed Information’. You can do that by going to the settings section of Google Tag Assistant:

Note(2): Run Tag Assistant on all important pages of your website (and not just the home page).

#11 Google Analytics Debugger – Once you install this extension, your Google developer console will be able to log (record) every hit (pageviews, screenview, event, transactions etc) that you send to Google Analytics server.

You will also be able to see error messages and warnings related to your tracking code in the console. 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.

#12 Injector – chrome extension which can be used to insert JavaScript code client side, as page loads.

#13 Javascript Beautifier – tool to indent JavaScript code automatically and read minified JavaScript.

#14 JavaScriptLint.com – tool to test JavaScript code for syntax errors.

#15 jsfiddle.net – This tool 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:

#16 Notepad Plus Plus – This 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 Omnibug – chrome extension to decode and display outgoing web metrics requests.

#18 Paypal Sandbox – paypal account for testing purpose.

#19 Postman – chrome extension for creating and validating measurement protocol requests.

#20 RegExp Tester  – This tool 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.

#21 Screaming Frog SEO Spider – This tool doesn’t need any introduction. It is like a Swiss army knife, best website crawler available in the market. I use this tool to find tracking code issues (more about it later). The second best and free alternative to this tool is Xenu link sleuth.

#22 sublimetext.com – source code editor more powerful than notepad plus plus (paid tool).

#23 Web Analytics solution profiler (WASP) – 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:

#24 Web Developer Chrome Extension

#25 Create Test Property – create a new web property (not view) in your Google Analytics account just for testing purpose. In this way you won’t corrupt the existing website traffic while testing. The only downside of running a test web property is that you would need to run multiple tracking objects on a same web page which gets quite technical when it comes to implementation.

#26 Understand and fix Google Analytics Diagnostic messages and notifications

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.

www.optimizesmart.com

GA Chrome Debugger and other tools

When I started using Web Analytics tools, there always was this huge black box: I’d put the tracking code on each and every page, and from then on, I usually waited and hoped the code would work as intended. Often, it didn’t, but I wasn’t able to see that until hours or sometimes a day later when the reports poured in to Google Analytics. Sometimes, it seemed to work, but only in some browsers. And so on. The more complex the code got (like when using Event Tracking for Flash applications), the harder it was to find out whether the code actually did what I was hoping it did. Luckily, that time is over.

Why is tracking code debugging so tedious?

  • Time lag: It usually takes several minutes to hours for the data to pour into the reports (even real-time analytics is never really real-time)
  • It was me, wasn’t it? You sometimes wonder whether the data in that report was caused by you or someone else that accidentally did the same thing on your website
  • No access to IT resources: Web Analysts may know some JavaScript, but we mostly are not IT people, so if you are testing web analytics code you sometimes have to wait for your IT guy to upload every little code change. An absolute killer for continuous improvement!
  • Testing on a test system isn’t the same as on a live system: There might be other scripts that are being loaded on the live system, the test system might be on another subdomain etc… Things that can be crucial for your code to function.

You can certainly name several more reasons why debugging the old-fashioned way is a very frustrating and time-consuming exercise.

 

Common Debugging Tools 

There are some good tools out there to switch on the light in the tracking code’s black box:

Fiddler2My absolute favorite (see next post on how to use this HTTP traffic monitoring tool). Fiddler2 makes it easy to view every request to Google Analytics (and any other javascript-based Web Analytics tool). You can even try out changes to your tracking code on your live system before releasing them to everyone, the tool is independent from browsers – and it is free!

Web Analytics Solution Profiler (WASP)A well-known Firefox add-on by Stéphane Hamel that now belongs to iPerceptions. It recognizes a wide array of Web Analytics Tools’ tracking codes and shows you if your tracking code is successfully being executed (or not), crawls your site to find untagged pages, and so on.

A drawback is that it only works in Firefox, although it allows you to fake another user agent (like “iPad” or “Internet Explorer” which can be cool.

The basic version is free, but to be honest, it doesn’t help me that much for my use cases. Maybe I am too stupid to use it the right way, my use cases aren’t the ones the tool is made for (like using several web analytics solutions on one website), or I should try the paid versions. So feel free to share your experience with WASP here in the comments.

Charles DebuggerA tool similar to Fiddler2, see this blog post on how to use it for Web Analytics Code Debugging.

Firebug/Chrome Developer Console:A tool that makes any JavaScript Debugging so much easier, so it is a must-have for Web Analysts, too. And if you use Chrome, you don’t even have to install anything, not even a browser add-on (see this video by a Google Chrome Developer with 12 tricks to get the most out of the Developer Tools). That helps when you have to debug on someone else’s computer for example.

The function I use most of the time apart from the Console (where errors are being logged) is the Network Tab. It can tell us if the tracking beacon has been sent to Google Analytics successfully. To find out, look for the __utm.gif request. If it displays a “200 OK” status code (see the green light in the screen shot), you know that Google Analytics has received the current Pageview or Event. You can take a look what is inside that request in the “Headers” tab (Cardinal Path’s Kent Clark’s marvelous “Cheat Sheet” helps interpreting the values).

Chrome GA Debugger / ga_debug.jsGoogle’s recommended debugging tool for Google Analytics is Chrome’s Add-On “GA Debugger”. It is basically a form of using the “ga_debug.js” script without having to alter your page’s code at all (if you use ga_debug.js, you will have to change ga.js into /u/ga_debug.js on every page you want to debug). Chrome GA Debugger is a nice and easy-to-use tool that logs every Pageview and Event that you send to Google Analytics in your Chrome Developer Console (right-click on any part of the page => “Inspect Element” → go to tab “Console”):

Chrome GA Debugger shows you in an easy-to-read format what is being sent to Google Analytics without having to understand or inspect cookie variables or the Network Tab of your Console. It gives you hints like:

  • Does my visit have the correct source/medium/campaign?
  • Are there pages that accidentally override those sources?
  • Are there pages where conflicting JavaScript or other reasons hinder the Tracking Code from being executed?

I am not using Chrome GA Debugger much anymore though because:

  1. It does not help with most cases of Event or Virtual Pageview Debugging. Events or Virtual Pageviews are most often tied to a click on a link (if you want to track the clicks on outbound links for example). If you click on a link though, you usually get to a new page, in which case Chrome’s Console is being cleared – and the Event Tracking call with it. So before you can take a look at what is being logged, it is gone. EDIT: As Judd Lyon noted in the comments, you can keep the Chrome console from clearing the ga_debug info by enabling “Preserve Log upon Navigation” in the Chrome Develepor Tools settings. You can access the settings via the cogwheel icon in the lower right corner.
  2. It is Chrome-only. What works on Chrome doesn’t necessarily work on Firefox or Internet Explorer.
  3. It breaks down sometimes, especially if you click quickly from page to page. And once it has broken down, nothing is being logged anymore even if you click slowly again to ensuing pages. That freaked me out because it always made me wonder whether my code wasn’t working well. You can easily restart the tool though by reloading the current page, but, even so, that is one factor that caused me to rarely use Chrome GA Debugger.

So much for a brief overview on the matter and a deeper look into Chrome GA Debugger. In my next article, I am going to show you how to effectively use Fiddler2 on some real-life examples.

www.webanalyticsworld.net

Debug Google Analytics with Google Analytics Debugger

When using Google analytics, it's easy to find out if you have the tracking code installed, but that doesn't mean that it is working. Even if Google reports the tracking code has been detected and installed, you may have syntax errors that can cause problems.

To properly check your Google Analytic tracking code, you should first ensure it is installed, and then ensure there are no errors within the tracking code iteslf. In this tutorial, we will walk you through these steps.

Ensure your tracking code is installed

To check if your tracking code is installed, please see Google's official documentation here. When the tracking code is found to be installed, you will see a message similar to the following:

 

Not Installed Installed

Checking your tracking code for errors

The Google Chrome browser has an addon that is available that will check and debug the Google Analytics code for any errors. The following tutorial will explain how to use the Google Analytics Debugger.

  1. Visit the Google Chrome store for Google Analytics Debugger
  2. Click the Available on Chrome button on the top right.

    Once installed the button will say Added to Chrome.

  3. Next, Click the GA Debugging icon at the top right to turn the Google Analytics Debugger On.
    GA Debugger off GA Debugger On
  4. Visit the your site to view the Google Analytics process. When the debugger runs, any error will show in red. In this case the following error is thrown:

    The _setAccount API expects an account string for argument 0. The argument given (36141341-1) does not match the expected format of UA-XXXXXX-X.

    This error is caused by the Google Analytics code not being set to the correct account format.

    Analytics Error No Analytics Error

    If you see the above error or one similar, visit this page for a comprehensive list of possible problems and how to correct them.

www.inmotionhosting.com

Google Analytics and Google Tag Manager Debugging Tools

By Dan Settlemire /

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

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

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

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

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

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

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

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

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.

www.lunametrics.com

Top 5 debugging tools for Google Analytics and GTM

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).

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.

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.

 

 

 

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: gtm1429192088620Running 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-inencoding (&de) UTF-8flashVersion (&fl) 17.0 r0hitType (&t) pageviewjavaEnabled (&je) 1language (&ul) en-uslocation (&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.

 

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

Last 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?

 

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

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?

dcarlbom.com

Audit and Debug your Google Analytics Implementation

Are my tags firing? Is this data correct? A large part of what I do for Cardinal Path is dissecting a websites’ inner workings to ensure its web analytics implementation is collecting properly. Diving into the world of web analytics forces you down the web development path. Whether you go willingly or kicking and screaming, there are a handful of tools you can arm yourself with to aid in your journey to the perfect implementation. There are many plugins, applications, extensions, and everything in between to help you diagnose issues with your implementation, but these are my top picks for quick and easy answers to hard questions.

Google Chrome Developer Tools

Chrome’s developer console is an invaluable tool for peering into the inner workings of your site and implementation. You can quickly and easily pull up class information by right-clicking any element of the site and inspecting that element from the drop down. The console allows you to fire off javascript code to see how the site responds. If you use another browser, ensure you use Google Chrome for your troubleshooting activities.

Web Analytics Solution Profiler (WASP)

What GA Debugger lacks in visual and technical detail, WASP makes up for in spades. WASP is the Cadillac of debugging tools. I may be a bit biased since this is a Cardinal Path tool, but without my affiliation to Cardinal Path, I would still use this tool daily. WASP gives you a wonderful visual representation of the tags firing on your site and the correlation between them. Clicking any of the tags provides deep technical insight into what’s happening behind the curtain. WASP’s newest functionality allows you to peer into the GTM data layer which eases the burden of troubleshooting the increasingly common Google Tag Manager and Universal Analytics implementations. Lastly, WASP is platform agnostic so it will give the same transparency for Omniture, SiteCatalyst, DoubleClick, and any other platforms you may be implementing.

Real Time Reports

Many people leverage real-time reports for quick insight into how their site is performing right now. While this is the primary function of these reports, the majority of time I spend looking at real-time activity is during testing to ensure GA is receiving the data the site is sending. There is a send and receive relationship between your website and Google Analytics servers, and being able to put eyes on both ends of the transaction is a great way to see if your data is being received, not just being sent. Bear in mind when viewing these reports they are affected by your view filters.

Ghostery

Ghostery is a plugin compatible with multiple browsers that gives you the most basic information. When you land on a website, a little floating purple box appears in the top right hand corner of your window, displaying a list of the analytics tags that are firing. It’s very simple. You also have the option to disable calls to particular services on the list if you so choose. If you’re a layman when it comes to web development, this would be the best place to start.

Google Analytics Tag Assistant

Google Analytics Tag Assistant is slightly more robust than Ghostery. This neat little plugin gives you a simple readout of which GA tags are firing on your site, what UID those tags are reporting to, and finally some boilerplate recommendations and suggestions. I find more advanced implementations receive some strange suggestions and/or items marked as critical issues, so understand the Tag Assistant is giving you general best practice recommendations. The advice is always sound, but it is case-by-case on whether it applies to you or not. What I really like about this plugin is that it looks at where the code is located and what version it is, not just the calls to Google. This is also a great way to find the GTM or GA account associated with the site you are debugging.

Google Analytics Toolbar Debugger

This plugin is a little more advanced but it dives deeper into the data being sent to Google. Enabling this plugin will result in a wealth of output information for the console in Chrome’s developer tools. You will be able to see everything from your source, medium, and keywords to the details of events, page views, or virtual page views. Quite literally every dimension and metric being passed to Google is laid out for you in the console. As detailed as this information is, if you understand the reporting aspects you’ll understand the output in the console. No need to shy away from using this if you’re not a developer.

Honorable Mention: Fiddler

Fiddler receives honorable mention for the simple reason that it’s quite advanced. That’s not a bad thing, it’s pretty great but this list is for the quick and easy. Some aforementioned items such as GA Debugger and WASP allow for some very technical scrutiny, however, they do have a quick-to-pick-up surface value that anyone can use. Fiddler allows you to peer into outbound traffic generated from your browsing activity and even hijack the activity with your own testing data if you so choose. This is valuable for GA implementations when page transitions are quick and you need something to capture that data instead of just report on it.

What sort of tools make up your implementation toolbox?

www.cardinalpath.com

Google Analytics Endpoint Debugger - Simo Ahava's blog

This is a really cool feature for Google Analytics data collection, of which I’ve heard very, very little buzz. It’s a way to debug any and all hits sent to the Google Analytics endpoint at https://www.google-analytics.com/collect.In all simplicity, you just need to copy the entire URL of the HTTP request to your clipboard, paste it into a web browser, and add /debug between the hostname and /collect.

A few words on the Measurement Protocol

Let’s take a quick step back and remind ourselves of one important thing. Every single time you’re sending a hit to Google Analytics, whether it be via mobile app SDKs, analytics.js on your website, or by using arbitrary HTTP requests, you’re using the “Measurement Protocol“. In other words, MP is not a discrete, isolated method of data transfer, but rather the underlying protocol that all the SDKs and libraries use as the method of dispatching payload data to GA.

So, when you hear a discussion along the lines of:

JANE: Let’s just configure the ga('send'...) commands on the page to incorporate that feature.JACK: Nah, let’s use Measurement Protocol instead.

They’re actually talking about the same thing. However, what Jack is probably referring to is a manually built HTTP request to the /collect endpoint, using any of the zillions of different ways to do so. When you use the ga('send'...) syntax, you’re communicating with the analytics.js library, and abstracting the HTTP request build process with a simplified shorthand syntax.

You can verify this by browsing to a Universal-Analytics-enabled website, opening the browser’s debugging tools, and looking at the network requests the site is sending:Why is this significant? Why am I quibbling on semantics? Well, for one, I love to nitpick. But also, especially with the whole phenomenon of referral spam, people have been condemning Measurement Protocol as it introduces an open, unauthenticated venue for spamming a Google Analytics reporting profile.

Well, the reason it’s open and unauthenticated is because your website relies on the same protocol. If you were to add a layer of authentication there, it would need to happen server-side, as a spammer would be able to just visit your site, copy the payload request, and spam it until the authentication expires. Also, authentication would add latency, and that would affect Real Time reporting as well as the time for data to enter your reports.

But I’m sidetracking. Let’s get back on topic.

Using the debugger

As I mentioned, this hasn’t really been advertised, for some odd reason, but it is there. In fact, there’s even a support page for this feature.

So let’s go back to the example of the browser’s developer tool, and inspecting the network request to /collect. Copy the entire request URL (in Chrome it’s right-click => Copy Link Address on the request), and paste it into a new browser window.

If you now press Enter, your browser will simply send the request to GA. However, before you press Enter, add /debug into the URL, between the hostname and /collect, so it looks like this:And now press Enter. You should see the response in your web browser:Since you’re copying a request sent by your website, you should hope it’s valid. If it isn’t, start working on a fix!

Why it’s useful

Well, for one, you can debug your hits and see if there’s something wrong with them. Common mistakes include when you’ve got a field value wrong in your code, or when you’ve forgotten to add a field which is required. For example, setting Event Value to a blank string or a decimal number would return an error, as if the field is in the request, it always needs to be an integer.

Another good use case is for when you’re actually using the Measurement Protocol in your custom setups. The debugger returns a response object, meaning you can debug your setup without actually sending data to Google Analytics! By parsing the response, you can easily identify if your custom payload is working or not.

I know I’m in the geek camp with this, but this feature is definitely packing a kiloton worth of awesome in a small space. This is a perfect way to test your setups without sending actual data to Google Analytics, and the response object has lots of information, all missing from the actual request to /collect.

www.simoahava.com


Смотрите также