Note: feel free to ping me or leave a comment if you are having major issues!

Yesterday the event tracking on a site was not working, and someone thought it might be that I had missed a call to the ga.js file or some extra Javascript. My first thought was “This is why I hate Javascript.” That thought recurred throughout my investigation process, but I decided to save some people time and effort by posting a few things you could check before giving up and crying. My particular example was an onClick event, but the same things could apply to other situations.

1. Check the JavaScript call. So you must understand that Javascript (which I shall now write as JS) can be the best and worst scripting language. Very powerful and can do cool things like animation (and your analytics tracking), but also a pain in that you must be very careful with syntax and punctuation. One easy way to see if your JS is creating errors is by installing the Web Developer’s Toolbar in Firefox, it will show you when there are JS errors and a myriad of other useful things.
   

   Example: onclick=”pageTracker._trackEvent(“Foo”,”Bar”,”JS”);” This will be wrong because you have double quotation marks instead of apostrophes within the parentheses. So the page will read it as “pageTracker.trackEvent(” which will not do anything. Fix it like this: onclick=”pageTracker._trackEvent(‘Foo’,'Bar’,'JS’);”.

2. Is the variable actually pageTracker? In most cases, if you’re not changing the Google Analytics code that is on every page, it should be pageTracker. If the variable is named anything else, like movieTracker or pageCounter, then you need to fix the call in the onClick and change it to: onclick=”movieTracker._trackEvent(…);” This is the part of the code you want to pay attention to:
   

   try {
   var pageTracker = _gat._getTracker(“UA-xxxxxx-x”);
   pageTracker._trackPageview();
   } catch(err) {}

3. Where your code at? This ended up being my problem. People recommend that the GA code should be inserted at the footer of the page to not slow down the loading time of a page. The catch is, the JS file/definition of the variable pageTracker may need to be at the top of the page for _trackEvent to do its thing. If you try moving the code with the ga.js file to the head of the page, it should help. Or it helped me anyway.

As much as I hate debugging JS, I think it has really helped me to have knowledge of how it works, so if this is all kinds of confusing, try working through the W3C tutorials.

Misc.

The Grok delivers!! I was tweeting with @TheGrok and I asked if there was any way he could post about web analytics for non-profits. Brendan Regan wrote an awesomely helpful post about it. I will probably comment more about it later, but still, very cool.

And for those who use Twitter, #wa is being deprecated in favor of #measure. See Web Analytics Demystified for an explanation.

This is my secret shame, but until today I never tried using event tracking.  Probably because I assumed (until I was informed today) that event tracking and page tagging involved writing complex JavaScript, when in fact all you’re doing is calling a function and adding variables.  I should have guessed that Google Analytics (and other software) would try to make this a painless process, but JavaScript still intimidates me sometimes.

I tested it out today by inserting events into the tabs in my portfolio pages in a simple onclick call:

<a href=”#” onClick=”pageTracker._trackEvent(‘Tabs’, ‘Click’, ‘Project 1′);”>

I won’t get any data until at least tomorrow (assuming anyone clicks on it, but I clicked on all of them to make sure it works).  Basically this code can be put into any section within your code that you want to track, such as downloads, video plays, clickthroughs, etc. Its a really powerful capability that I wish I would have tried out earlier but I think I’ll be using it plenty from here on out now that I see how easy it is.

All I had to worry about was the things inside the parentheses which translate to: ‘category’, ‘action’,'label’, ‘value‘.  The last 2 things are optional, but what is nice is that you can name these in almost any way you want so that they are descriptive and unique.  You can also keep categories and actions the same in different events if you want to associate like categories and actions.

Most depressing graph ever

Now I feel especially empowered to segment data further and drill down into the data of sites and pages to see what people are doing on the page for specific sections and dynamic elements. Web analytics is nerdy fun for me, don’t judge.

Aaaand…just as I quit all my soccer teams for the summer, I decided to play with the ZAAZ team. Oops.  Today I got to play some with Web Trends and Omniture and I’m looking forward to learning more about the cool things they can do. Though apparently Google Analytics is catching up quickly.

I also wonder if I will be able to take the Microsoft Connector to work even though I’m part-time there. I hope so. I’m always jealous of their wi-fi and clean looking shuttles.

UPDATE: Huzzah! It worked.

A less depressing table

…because it is sunny again in Seattle! w00t! I am now done updating the site for the moment. I condensed the nonsense on here thanks to the informal usability advice of “Richard Branson.” Today is my last day off this week so I would plan on tanning, but there are definitely a lot of construction workers that can see me. So maybe not so much.

And borrowed from the amazing D.A. Clements, Information School lecturer and mentor extraordinaire,  5 books to read on web design/interaction design from the iSchool webmaster:

• BIll Buxton. Sketching User Experience
• DK Van Duyne, JA Landry, JI Hong. Design of Sites
• Jenifer Tidwell. Designing Interfaces
• Dan Brown (not the Da Vinci Code guy). Communicating Design
• Andrew Dupont. Practical Prototyping and Scriptaculous

I’ve read parts of the Bill Buxton and I think Tidwell books, but not the others.  Now I have time to read this stuff, but I’m still finishing the Polar Bear book. I’ve skimmed it before, but I’m trying to pay attention this time. I didn’t realize Scriptaculous was supposed to be any better for prototyping than another Javascript library, but the same things can probably be applied to other libraries.