This is a must! They have the extension/add-on for both Chrome (official) and Firefox (unofficial). Basically, it enables ga_debug.js and prints the parameters of the_utm.gif request (how GA tracks things) to the console so you can see if the proper data is being sent or if there are any errors. It works with universal analytics (analytics.js) and classic analytics (ga.js).
Here is all the information that it shows! Actually read through and you can see everything that GA sends to its servers.
It works great when debugging event tracking too because you can see it get sent.
For example:
hitType : event
eventAction : click
eventCategory : outbound-link
eventLabel : https://developers.google.com/experts/+NicoMiceli
One of my favorite things in data analysis is Real Time analytics. So besides getting lost in it, I love to use it for testing. You can set up events and goals and watch them come through in real time. This can give you immediate feedback on what events and goals are coming through properly and how your data will look in google analytics.
There are 6 different views that you can see in real time and they are:
Overview, Locations, Traffic Sources, Content, Events, Conversions
The Google Analytics syntax is in JavaScript and is case sensitive so make sure that you have the GA methods exactly correct. Also make sure that you using the syntax and methods for the Google Analytics library that you are using. If you’re on Universal Analytics (analytics.js) you can’t use the methods from classic analytics (ga.js).
Here are some common differences:
_gaq.push(['_setAccount', 'UA-XXXXXX-Y']); _gaq.push(['_trackPageview']);
ga('create', 'UA-XXXX-Y', 'auto'); ga('send', 'pageview');
_gaq.push(['_trackEvent', 'category', 'action', 'label', opt_value, opt_interaction])
ga('send', 'event', 'category', 'action', {'nonInteraction': 1});
To get the full list of syntax differences look see the documentation for classic (ga.js) and for universal (analytics.js).
Remember that there are 4 different kinds of scope when you are using custom dimensions (analytics.js) and 3 different kinds or custom variables (ga.js). Here’s a very short description of each:
Product – value is applied to the product for which it has been set (Enhanced Ecommerce only - not in ga.js).
Hit – value is applied to the single hit for which it has been set.
Session – value is applied to all hits in a single session. This is the scope I use the most.
User – value is applied to all hits in current and future sessions, until value changes or custom dimension is made inactive.
This is something that most developers probably already do but still wanted to write about in case there are any newbies that are just getting into the code game. Utilize the console!
Here is a normal example of some event tracking I might want to implement. When I write custom event tracking code I normally start by just seeing if I can log a message to the JavaScript console.
For example, I want to track clicks on a button and I write this code:
html
<button id="b1">Click Me</button>
JavaScript
$('#b1').click(function(){ console.log('button clicked') //ga('send','event','button','click','top button'); });
The console.log function prints the words button clicked in the console.
Then after I see it working I change the JavaScript to fire the event tracking method and comment out the console.log function.
$('#b1').click(function(){ //console.log('button clicked') ga('send','event','button','click','top button'); });
You don’t want your tests to come through to the main property and mess with your data. Yes, you can filter it out and remove it but that is just extra data cleaning and who really likes that?
If your site is on a dev subdomain you can do this easily by just having a different UA on dev.domain.com. If it’s not it can get a little technical but you can create a second UA tracker and send only certain hits that way to make sure it’s coming through properly. Here is the documentation regarding working with multiple trackers.
Protip: You can run analytics.js on a web server using localhost but to set analytics.js cookies, you need to disable the default cookie domain using:
ga('create', 'UA-XXXX-Y', { 'cookieDomain': 'none' });
If you don’t want to work with multiple trackers, you can also have it check the hostname and fire on a dev site property. For example:
var liveSiteGAProperty = 'UA-123456-1'; var devSiteGAProperty = 'UA-123456-2'; if (location.host == 'www.YourLiveSite.com') { ga('create', liveSiteGAProperty, 'auto'); } else { ga('create', devSiteGAProperty, 'auto'); } ga('send', 'pageview');
If you have to use your master property then make sure you annotate it so you don’t forget to adjust it (if needed).
Unofficial Google Analytics Debugger – I don’t use firefox that much but know that a lot of people use this extension so I wanted to add it in anyway. That being said I can’t really answer many questions on it.
GA Checker – a great web app that crawls your site and checks every page for the following tags:
Traditional Google Analytics (ga.js)
Universal Analytics (analytics.js)
Google Analytics Remarketing (dc.js)
AdWords Universal Remarketing Code (conversion.js)
Google Tag Manager (gtm.js)
Google Analytics on Steroids (gas.js)
Lucid Charts – this is great to make flow charts to explain what you want track and the flow of customers.
JSLint – Good for JS debugging
JSFiddle – use this JavaScript environment for quick testing and sharing code/issues.
Screaming Frog – This is great for crawling the site and looking for ga code. Check out SEER’s beastly guide here.
Google Chrome, specifically Chrome Dev Tools
Sublime Text – well, it’s not a debugger but it is my favorite text editor
Do you have a tip or resource I haven’t mentioned? Please share it in the comments.