We all have great ideas for what we want to do in Google Analytics but sometimes we need to go more advanced than the out of the box solution. So we roll up our sleeves and start adding more event tracking, all kinds of custom dimensions, and some beastly cross device management but then you open up GA and you see nothing. No beautiful data to help you craft your marketing activities, no visibility into what is happening on your site, no idea of the amount of traffic your last baller post with those querky images brought in. Now what?! Time to start debugging like Rico did to those damn Arachnids on Klendathu  (Starship Troopers reference – score!). This post goes into ways that can help find errors and fix issues with implementation. There is a million and 1 things that can go wrong when you start writing custom code so hopefully this will get you started figuring out the issues.

The tips go from non-technical to developer.

Use the Google Analytics Debugger

Tip for: Everyone

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

Use Real Time Analytics

Tip for: Everyone

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

Double Check your Syntax, Scope & Features

Tip for: Intermediate users

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:

Initializing Accounts & Pageviews

Classic (ga.js) Google Analytics

_gaq.push(['_setAccount', 'UA-XXXXXX-Y']);
_gaq.push(['_trackPageview']);

Universal (analytics.js) Google Analytics

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

Event Tracking

Classic (ga.js) Google Analytics

_gaq.push(['_trackEvent', 'category', 'action', 'label', opt_value, opt_interaction])

Universal (analytics.js) Google Analytics

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

Are you using the correct scope?

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.

Utilize the Console

Tip for: Intermediate users/ JS newbies

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');
});

Create a dev property to do your testing on

Tip for: Advanced users

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

My Favorite JavaScript Tools

• Chrome Extensions

  • Google Tag Manager Debugger Extension

  • Tag Assistant (by Google)

  • Web developer toolbar – chrome extension

  • Redirect Path – chrome extension

  • Ghostery Chrome Extension

• Firefox Extensions

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

• Web Apps

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

• Native Apps

  • 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

  • Fiddler - a HTTP The free web debugging proxy for any browser, system or platform

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