Ask us a question!

Web Moves Blog

Web Moves News and Information


Track Any Client Side Event With Google Analytics

The Google Analytics Logo

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, you’ll need:

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

Rolling your mouse over the images or selecting a radio button fires events, which will then be pushed to Google Analytics, where you can keep track of them as show below.

Google Analytics Event Tracking Screen Shot

Click To Enlarge!

You can see a working demo here.

This was just a simple example of the flexibility that Google’s analytic platform offers. Many more events can be tracked. You’re really only limited by your imagination.