Peter van Grieken

How to track just about every mousemovement of your visitors

Create tracking links in less than 10 minutes

You are now part of an experiment.

That sound pretty exciting right? Aside from my personal blog, this website is also my playground to test new stuff. As you are visiting this site, you are part of this experiment.

So, what is this experiment you ask?

As I use Google Analytics for statistics, I would normally be unable to track certain events on this website, like how many times my visitors clicked on the hidden sidebar on the left or how many times you hovered over the sidebar. Within 3 easy steps, I'm now able to track just about everything. That sounds scarier than it is, I don't track any personalized data, so don't worry

Follow this three-steps-tutorial to see how you can also track any click on your website.

1. Set up your Google Analytics

This is the ususal stuff when you use Google Analytics: create an account (here) and paste the code they generate for you into your website.

2. Get the JavaScript up-and-running

I used jQuery, because it's the greatest thing since sliced bread, so I recommend you also use it. You can include jQuery from Google's CDN by including this in the <head> of your document:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

type="text/javascript"></script>

The next step is to create your own JavaScript file and include it in the <head> of your document. This file should contain the following code:

jQuery(function($) {
$('.trackevent').click( function() {

	if($(this).attr('rel') != "") {
	    pageTracker._trackEvent('click', '/'+$(this).attr('rel'));
	}

});
});

Nothing special to see on the first line, it's just the way to tell jQuery to execute this piece of code after the document has loaded.

The second line is where it gets interesting, we are going to track all clicks on links with the class "trackevent". When a visitor of your website clicks on these links, you trigger the Google Analytics function to save this click.

The info we send to Analytics is the rel-attribute of the clicked link, so first we check if the rel-attribute contains information and then you execute pageTracker._trackPageview(), which is Google Analytics' way to track a pageview.

I made it really easy for you, by providing this downloadlink. Just download and include this script in you HTML-files.

3. Create the links you want to track

Now that the scripts are up-and-running, you only need to pick the element you want to track. In my case I track how many times you clicked on my partly-hidden profile on the left, so I changed

<div id="profile">

<div id="profile" class="trackevent" rel="event/openprofile">

Easy as that! The class-attribute will make sure the click gets tracked and the rel-attribute is the info you send you will see in Google Analytics. Now every click on my profile will pop up in Google Analytics as /event/openprofile.

Is that it? Yup, there's not much more to it.

Track anything!

Of course in the same way we now track clicks, you can also track mouseovers, formsubmits or fieldfocus , just change $('.trackevent').click( to $('.trackevent').hover(, $('.trackevent').submit(, $('.trackevent').focus(. In fact, you can use any event mentioned on this page: http://docs.jquery.com/Events

That's it!

In less than 10 minutes you've create trackinglinks on your website. Of course these are just the basisc, you can get as creative with this as you want.

About Me

Contact