Track any client side event with google analytics
By: Bob Tantlinger
I’ve recently been doing some work integrating social media events, such
as facebook likes, with google anayltics and was pleased to find that
Google gives you a deep level of control over what you can track. It
occurred to me that since a social media “event” is not really much
different than any other client side event, why not use google analytics
to keep tabs on any event the visitor might trigger.
With just a few lines of code, you can take your analytics a step
further and get some fine grained details about not only your visitors,
but their interaction with your web site. Using the techniques I show
below you can answer questions such as:
- Did the user scroll a section of your page into view?
- Did the user start filling out a form?
- Did the user encounter an error while interacting with your site?
- Did the visitor move their mouse over a particular page element?
These are just few examples off the top of my head for how this could be
useful, but you get the point. The sky is virtually the limit on what
you can track.
Get Tracking with _trackEvent
So, let’s dig in with a quick and dirty example that shows how to detect
if a user mouses over a a specific image on your page. To get started,
- A google anyltics account (Obviously)
- The google tracking code installed in your sites head
- JQuery included in your page
When you include google’s tracking code in your html, it brings in a
global variable named _gat
(Google analytics tracker) . Using this variable, we have a handle by
which we can get all trackers that have been included on the page. Using
the tracker objects, we can push arbitrary events onto the _gaq
(google anyltics queue) to be tracked. They can be anything. Their
meaning is entirely up to you.
After an event has been pushed onto the queue as an event, you can
monitor them under the “Events” section in your google analytics
account. (If you’re the pointy hair type, it’s probably neat idea to set
up goals for your events!)
So, the steps thus far are:
- Decide what arbitrary events you want to track
- Get a handle on all trackers included on the current page with _gat
- Use the tracker to send an event to GA.
In our example, we will present the user with some images of food and
ask which is their favorite. We want to know when a user mouses over an
image, what type of image it was, and which food they select. With this
in mind we might write with some code such as this (Take note of
comments) Read the rest of this entry »