A client of mine wanted a plugin to log what users type into forms. I kind of didn’t see the point at first. But a few days later I was a little annoyed that there was apparently no free alternative to websites like clixpy, clicktale and similar services.

It occured to me that recording movies of visits isn’t really hard to do. And so i started a new plugin, loosely based on the unpublished form input tracking plugin.

I am very pleased with the results so far. Of course it’s no match for the professional services mentioned above. But it is good enough to gain a few insights into what can be improved on your website.

The recording script is pretty lightweight but has a rather hefty dependeny: jQuery. It also loads json2.js. I’m sure the logging could be rewritten without the jQuery dependency but that really wasn’t a priority for the first public release.

This plugin probably needs WordPress 2.8 and PHP 5. I didn’t bother to test older versions and won’t support them in the future.

Here is a sample movie of what a recorded session can look like. As you can see mouse movements, clicks, form input, select boxes, checkboxes and radio buttons are recorded.

Important: For the playback you should always use the same browser as the visitor. If you don’t, the mouse position will probably be very wrong. The plugin also doesn’t save a page’s state at the time of recording. This means if comments are added or the content changes, you will see the old movements on a new website.

Downloads at WordPress.org.

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