ClickHeat for webpage click heatmaps

I recent­ly post­ed that I was try­ing out Click­Heat, and that I would write an instal­la­tion guide to help oth­ers install it.

I have been using Click­Heat on my per­son­al site and a few high traf­fic web sites. It has already proved use­ful on this per­son­al site, as I noticed peo­ple had been click­ing the graph­i­cal head­er at the top of the page expect­ing to be returned to the home page. How­ev­er I had neglect­ed to set this up, so I quick­ly made the change. Here is the heatmap that indi­cat­ed this to me:

Screenshot of ClickHeat heatmap on my personal web site

Here is a heatmap from a friend’s rel­a­tive­ly high traf­fic social net­work­ing web site:

Social networking web site heatmap

From this heatmap we noticed that most clicks were for open­ing mes­sage threads (as expect­ed), but were sur­prised by the num­ber of clicks to some of the more obscure options placed at the edges of the web site. As a result, the site is going to be redesigned so that these fea­tures are in the main left nav­i­ga­tion bar to make the web site eas­i­er to use.

The sys­tem uses a tiny 6KB JavaScript library, and record­ing clicks only used a few bytes of band­width. The admin­is­tra­tion web site works quick­ly and does­n’t seem to be a resource hog at all.

You can down­load Click­Heat from the offi­cial web site here. It requires PHP and the GD graph­ics library, and is a sim­ple install requir­ing no data­base. This UNIX per­mis­sion cal­cu­la­tor may come in handy when set­ting up direc­to­ry per­mis­sions so Click­Heat can write its log files.

I have noticed a prob­lem with the heatmap being aligned with the web site, and a sep­a­rate issue with elas­tic lay­outs cre­at­ing prob­lems with heatmap dis­play. There are already bugs raised for these issues on the project home­page, so they should be resolved in time.

A pop­u­lar com­mer­cial alter­na­tive is CrazyEgg. The arti­cles I have linked to will have much more infor­ma­tion on the wealth of extra fea­tures that it has.

If you have any suc­cess sto­ries from using heatmaps, I’d love to hear from you.

UPDATE: Paul Olyslager has sent me this arti­cle which gives a great overview of heatmaps and some of the alter­na­tives to Click­heat.