Heatmaps, doing visitors behaviour analysis on your website

Posted by Hypee | Sat 7, May 2011

Heatmaps are there for quite a while (TechCrunch made an article in 2006), but it seems that few webmasters are proposing it to their customers and that also few customers even know them. In this SEO dominated world, we are so busy thinking our websites for search engines that we sometimes forget to make them great also for humans.

They may not be an appropriate tool for every project, but heatmaps might bring crucial informations for some activities, like eCommerce websites.

So, what are heatmaps all about ?

The principle is quite simple, by adding a short Javascript code in the web-pages you want to analyze, we are able to detect where the users are clicking with their mouse.

The job of the heatmap tools is to summarize all those clicks in a single graphical view, showing what portions of a page have the most success and which are never used. Red color will represent "hot" spots when blue color will be used for the less used links.

Several commercial and open sources solutions are available on the market to add the heatmap functionality to your website. Most of them are proposing additional analysis tools.

Should you use heatmaps ?

If you go to the websites of commercial heat map solutions, they will give you a ton of reasons to purchase their product :
- Fine tuning your site, enhance navigation to improve your conversion rate.
- Find out the hot spots on your pages to place the ads, giving them a better visibility.
- Discover areas that are badly performing and adjust your design to avoid having important links unused.
- Find unexpected behavior from users (clicking on images that they assume having a link).

Well, we would say that if you care about your website, there aren't too many reasons to not give a try and decide by yourself if it does help to improve any goal related to your business.

If you have some development experience, start by installing an open source solution, if you don't, use a free trial option and make your mind.

Clickdensity solution

Heatmap example, where we can see that most of their visitors wants to know how the hell it's working and think "hey show me that thing !". But few of them are transformed as free trial testers...

Clickdensity heatmap

Click map example, giving not too much additional information, just confirming that users are missing a lot the target (actually that's probably highlighting the different rendering between several browsers).

Clickdensity click map

Price chart 

Clickdensity price chart

Crazyegg solution

Cool features : 5 different visualisations, the most interesting being the heatmap and the scrollmap, and the capability of zooming to have a complete view of long web pages.

CrazzyEgg 5 visualizations

Heatmap example

Crazyegg heatmap example

Scrollmap example

Are your users reading the content that is only reachable through scrolling ? No ! (At last that's what CrazyEggs seems to pretend)  

Crazyegg scrollmap example

Price chart

Crazyegg heatmap solution price chart

Picnet's Mouse Eye tracking

Heatmap example

Picnet, Mouse Eye Tracking heat map

Heatmap report configuration

Picnet, Mouse Eye Tracking configuration

Price chart

Picnet, Mouse Eye Tracking price chart

Labs media "clickheat" open source solution

The only "read to install" open source solution we've found. The capabilities are limited, but the job is done.
A phpMyVisites plugin was developed and a Piwik plugin was also started (but not finished if we believe what we've seen on forums).

MediaLabs clickheat example

Impact on server performances

If you choose this open source solution, it will be installed on your server, so you may wonder if it will have any impact on the server load.

Basically when you're logging user clicks, you're only adding one server call. That's not much and it won't be noticeable on the user side. But if you're running a high traffic website, that's doubling the server charge which may not be too good if you're not sure you will have enough free resources.

The workaround is to make the calls to a static page and delay the analysis, as explained on Labsmedia website :

ClickHeat server load optimization

Wants to build your own solution ?

You want to do heatmaps but you are not convinced by the existing solutions and you want to create your own ? Great !
Take a look at those URLs, they may set you on tracks  :

Javascript/PHP example on css-trick.

Javascript/PHP : http://nevyan.blogspot.com/2006/12/free-website-click-heatmap-diy.html

Javascript/Ruby sources on blog.corunet.com.


There are a lot of solutions to implement heatmaps on your website (we missed the one from Clicktale, it will be added very soon) and we really think it's worth the value to give a shot.
So, if you try and like it, give us some feedback !

Reply to this post


Your reply