Track clicks with mootools

Why would I want to track clicks you may ask. Well, for me it’s about usability and user flow optimization. If I do some ajax/dynamic stuff on a page, I want to see what the users are doing. As they leave no visible traces in the logs, I need to add some.

It’s good to know which features the users use, how often, in what order etc. Do you need to advertise some functionality more? Maybe you need to prepare better documentation so that they even know how or why to use some things?

If you have outgoing links, you may want to know where your users are going? The ugly way of doing this would be to use some sort of redirect URLs and monitor those. But I don’t like that way. If I use mootools anyway I can track outgoing links more elegantly. And redirects certainly can’t handle ajax stuff.

1
2
3
4
5
6
7
8
9
10
11
12

function clicktrack(id) {
    var elements = $(id).getElements('a');
    elements.each(function(item, index) {
        $(item).addEvent(
            'click', function() {
                new Image().src = '/usability/?click='
                + $(item).getParent().id + "&" + $(item).id;
            }
        );
    });
}
clicktrack('mode');

Add a HTML that looks somewhat like this to get an idea what buttons your users are clicking.

1
2
3
4
5

<div>
   <a id="1" href="#">option 1</a>
   <a id="2" href="#">option 2</a>
   <a id="3" href="#">option 3</a>
</div>

Of course, in an ideal world, you’d want to offer non-JavaScript links too. Tracking outgoing links is even simpler, i’ll leave it as an exercise for the reader

Related posts:

1. Help! My mootools script doesn't work in IE!
2. Mooified focus onload but keep backspace intact