Google Analytics Debugging with ga_debug.js

By  on  

Google Analytics and its API is a beacon of awesomeness and immense stat tracking power, but for the longest time I was using some of its features, like event tracking, and simply taking Google's word for it that things were working correctly.  Of course none of this tracking was mission critical, I simply wanted to experiment.  If only I had known about ga_debug.js; this alternate file provides loads of debug information while you push information to _gaq.  Here's how I've implemented ga_debug.js:

(function(a, d) {
    // Do we load the real analytics or debug analytics?
    // The debug file is available at:  https://ssl.google-analytics.com/u/ga_debug.js
    var analyticsPath = config.isDebug ? 'u/ga_debug.js' : 'ga.js';

    // Output your account, of course
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'MY_ACCOUNT_ID'],

    var ga = d.createElement(a); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == d.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/' + analyticsPath;
    var s = d.getElementsByTagName(a)[0]; s.parentNode.insertBefore(ga, s);
  })('script', document);

You'll notice that ga_debug is at a deeper path.  You'll also know I switch that flag on the client side; of course you can do the live or debug file logic with client side code.  So what can you see by loading this alternate file?  Here's a sample:

_gaq.push processing "_setAccount" for args: "[MY_ACCOUNT_ID]": 
_gaq.push processing "_setAllowAnchor" for args: "[true]": 
_gaq.push processing "_setCustomVar" for args: "[8,docs navigator,Yes,1]": 
_gaq.push processing "_trackPageview" for args: "[]": 
Track Pageview
Tracking beacon sent!
utmwv=5.4.8d&utms=1&utmn=1975439136&utmhn=davidwalsh.name&utme=8(7!Signed-In*docs%20navigator*Beta%20Tester)9(7!Yes*Yes*Yes)11(7!1*1*1)&utmcs=UTF-8&utmsr=1440x900&utmvp=1437x728&utmsc=24-bit&utmul=en-us&utmje=1&utmfl=13.0%20r0&utmdt=Mozilla%20Developer%20Network&utmhid=611097861&utmr=-&utmp=%2Fen-US%2F&utmht=1396054748895&utmac=UA-36116321-5&utmcc=__utma%3D262314265.242604067.1395793245.1395837640.1396054749.5%3B%2B__utmz%3D262314265.1395793245.1.1.utmcsr%3D(direct)%7Cutmccn%3D(direct)%7Cutmcmd%3D(none)%3B&utmu=qS~
Account ID               : MY_ACCOUNT_ID
Page Title               : David Walsh Blog
Host Name                : davidwalsh.name
Page                     : /en-US/
Referring URL            : -
Hit ID                   : 611097861
Visitor ID               : 242604067
Session Count            : 5
Session Time - First     : Tue Mar 25 2014 19:20:45 GMT-0500 (CDT)
Session Time - Last      : Wed Mar 26 2014 07:40:40 GMT-0500 (CDT)
Session Time - Current   : Fri Mar 28 2014 19:59:09 GMT-0500 (CDT)
Campaign Time            : Tue Mar 25 2014 19:20:45 GMT-0500 (CDT)
Campaign Session         : 1
Campaign Count           : 1
Campaign Source          : (direct)
Campaign Medium          : (none);
Campaign Name            : (direct)
Custom Var 7             : label:'Signed-In' value:'Yes' scope:'1'
Custom Var 8             : label:'docs navigator' value:'Yes' scope:'1'
Custom Var 9             : label:'Beta Tester' value:'Yes' scope:'1'
Language                 : en-us
Encoding                 : UTF-8
Flash Version            : 13.0 r0
Java Enabled             : true
Screen Resolution        : 1440x900
Browser Size             : 1437x728
Color Depth              : 24-bit
Ga.js Version            : 5.4.8d
Cachebuster              : 1975439136

Upon each push call, analytics spits out the information you've sent along with your user and browser information.  Essentially ga_debug.js provides you a plethora of information and peace of mind that your analytics calls are working!

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Six Degrees of Kevin Bacon Using MooTools 1.2

    As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times. I love movies and useless movie trivia so naturally I'm...

Discussion

  1. Shane Healy

    The official Google Analytics Debugger extension for Chrome provides the same functionality without the need to code for it.

    https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna

  2. Good to know that!

    Aparrantly there’s an “analytics_debug.js” for the universal-analytics-code, too.

  3. Ryan

    I just wrapped up a new website of our company using the new Universal Analytics code and the chrome plugin works great. Should give it a try.

  4. Narie

    You can also use features like ‘map remote’ in Charles to load the debug version of the script without changing the original source code, works for every website on every environment.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!