Tracking JS Events using Google Analytics
kirupa | 5 April 2011
Have questions? Discuss this HTML 5 tutorial with
others on the forums.
A popular service for analyzing everything
related to you site's traffic is Google's appropriately
[ this section's traffic looks like a
Unlike server-tools like AWStats or Webalizer that are
transparent to the user and work entirely behind the scenes
on your server, Google Analytics works by having your
lives on each page that you are interested in tracking, and
each time a user loads a page, that function gets called and
the visit gets logged on Google's servers for you to analyze
tracking which pages get loaded, the functions provided also
allow you to track events such as when users click on a
particular link, hover over some item, etc. This type of
information is great for helping you understand how your
users actually interact with the site.
For example, I used click-through data to justify moving
to a tab-based navigation for Tutorials, Jobs, and Forums:
[ using numbers to justify
creativity...I'll regret this one day ]
The clickthroughs were generated partly by people
clicking on links declared via an anchor /
<a> tag, but some of the
clickthroughs were programmatically invoked by a user
clicking around the anchor tag.
When you are dealing with HTML, all of this is
straightforward. To track when something gets clicked,
simply create a link as follows and add the onclick event
with some JS inline:
Every time someone clicks on the TUTORIALS link, Google
Analytics will record the click. The recording is done
automatically by the
pageTracker._trackPageview function the Google
Analytics script provides. The
_trackPageview function takes an argument describing
the event in a way that you can find later.
function as well. For example, let's say I have a click
event handler that navigates me to a different page:
If I wanted to record this function as having been
called, I would insert the
pageTracker._trackPageView code just like I would if
I were inserting this script inline in the HTML:
The only thing you need to ensure is that the page your
script will be running on has the Google Analytics tracking
code available. Otherwise, your browser would not know what
to do with _trackPageview function.
You can check how everything works when, after about 24
hours, the event description you provided shows up in your
stats with the number of accesses displayed as well:
[ your custom event description appears
In this short article, I am not going to re-hash Google's
documentation on how to use the APIs and functions exposed
by Google Analytics.
At the end of the day, try not to let the differences
what you want. There will be cases where certain tasks will
not be possible, but most of the time, like you saw in this
article where you use Google Analytics to track things done
via code, there is always a way.
If you have questions, need some assistance on this topic, or just want to
chat - post in the comments below or drop by our friendly forums
(where you have a lot more formatting options) and post your question. There are
a lot of knowledgeable and witty people who would be happy to help you out
Did you enjoy reading this and found it useful? If so, please share it with
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly via e-mail, facebook, or twitter.
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.