heatmap, hot or not? Free alternatives for Crazy Egg

• BY Paul Olyslager
• 50 Comments
• Estimated reading time: 9 minutes

Heatmaps are graphical overlays of your website which points out what content is hot and what not. This is mainly done by tracking the mouseclicks of the visitor. A more expensive model uses eyetracking to achieve this overlay (for more informationon eye-tracking, visit the blog of Markus Weber). Although the results look the same, the two options are somewhat different. The click-heatmap makes it possible to analyse the clicking behaviour of the visitor while the eyetracking-heatmap shows you where people actual look on your webpage.

So what can you do with a heatmap? It gives you the opportunity to look through the eyes of your visitors as they navigate on your website. For example: The heatmap shows that your advertisement is easily overlooked. Possible reasons: wrong colour, close to big images which capture more attention, … Just give the ads a more prominent place and see if the visitors pick up on this. If you have dynamic content, it is a bit more difficult to take the full advantage of heatmaps (people click on different places if content changes). Instead of posting an article every day, you can consider doing so every week (or longer if you want to test longer).

I came up with this post because I was looking for an alternative for the site-overlay provided by google analytics. It’s not that this tool is useless, on the contrary, but the grass might be greener on the other side.

Crazy Egg

The first one I came across was Crazy Egg. A while ago this was a free service, but that’s not longer the case. They have various payment-options and if you have a look at the demo, you’ll notice that 9$ a month is not that much. If you prefer to have a free alternative for Crazy egg, you can just keep on reading…

Feng-Gui

A second heatmap is provided by Feng-Gui, which has a free service for simple heatmaps. Feng-Gui (so they claim) forsees human’s attention and attraction, simply by uploading a screenshot. This method doesn’t track any mouseclicks but the heatmap is generated by an algorithm, which is fabricated by the results of numerous neurologic studies. To make sure this algorithm stays intact, Feng-Gui compares the results with actual eye-tracking methods. Personally I think these results are based too much on assumptions instead of bulletproof evidence. Although the algorithm is constantly checked, changes can be made by the smallest detail. For example, what about people who read from right to left? They see your website completely different than you. One other point: you can only upload one screen shot every 5 hours when using the free version.

WordPress plugin #1

If you are using wordpress, maybe you can have a look at this wordpress plugin as well. After installing and activating the plugin, it starts to register mouseclicks. It is possible to generate heatmaps for every page and with a handy datepicker you can easily go back in time. You can set the time limit and memory in the provided php. Although this plugin is a good way to get started with heatmaps it doesn’t offer the possibility to generate weekly/monthly summaries, which makes testing a bit difficult.

Clickheat

Another free heatmap comes from Labs Media and is called Clickheat. This open source application uses php and needs to be installed on your server. To make things easier, they developed Clickheat as a wordpress plugin as well. After several search strings into google I came across this article on heatmaps written by Matt Ridout and gave me some new insights of Labs Media. Apparently the plugin adds a little link into your webpages back to the website of Labs Media, which can conflict with some searchengines. It’s not difficult to remove the link, but I’m not really fond of this kind of strategy.

Corunet

The next free trackingsystem is called “The definite heatmap” by Corunet and is a “do it yourself solution”. Corunet gives you the opportunity to build your own heatmap, this way you have a better understanding how these programs work. For the lazy people among us: you can download all necessary files at the end of the tuturial. I will give this a try later on and will let you know the outcome.

Clickdensity

Although I’ve never used ClickDensity, I heard quiet a lot about this analytics tool. They offer a 30 day trail, in which you can fully test the functionalities. If people are using this package, please let me know. Because it got so many good reviews, I’ll be giving this tool a try as well. This is part of the latest update (see below)

As mentioned before, heatmaps are better used on static websites than dynamic ones. The content on dynamic website is often changed (e.g. new posts/comments on blogs), this in contrast with the coordinates of the recorded clicks made by the visitors. This shouldn’t be a problem if you update your blog/website monthly and attract a serious amount of visitors.

In this post I tried to make a small summery of really cheap or free heatmaps. Whatever your choice will be, you have to be carefull with heatmaps. Most of them make a connection with the help of Javascript (from the client-side) to the webserver for every click made by a certain visitor. This can interfere with the performance by slowing down the system. A possible solution is to activate the recording of clicks when a low number of people are visiting your website. You’ll have to test it over a longer period of time because of the sheer number of people, but at least they will enjoy your website at full speed.

If you have any experience with heatmaps (free or paid versions), please let me know.

Update: 13th of May 2010

A lot of new heatmap systems made their way to the public since this article was published. Time for an update!

Mouseflow

Just to let everyone know: I’m not getting payed for writing this review, but I’m very thrilled about Mouseflow. Not only does it offer a detailed mouse click heatmap, but also a mouse movement and scroll heatmap. But that is not where it stops. Mouseflow is in fact a powerful web analytics package that gives you plenty of statistics and features to play around with. It records the pageviews, total visit length, interaction time (which I find very useful), bounce rates, loading time, response time and the scroll reach (in percentages and pixels).

On top of that Mouseflow offers livestreaming, a very nice feature with which you can follow your users live (only for paying subscriptions)! It also records whole visitor sessions, which you can playback in your browser or simply download to your hard drive to watch it whenever you want. These recordings include the mouse movements, clicks, scroll events and key strokes.

For only 10€ a month you get 1000 recorded sessions – which is a bargain – but if you’re still not sure you can always start with a free subscription. You’re just one line of Javascript away from trying out this great application.

IMPORTANT NOTE:If you’re interested in testing Mouseflow, we’re giving away special Mouseflow campaign codes. This code gives you 500 free recordings. To receive it, fill in your name and email address in the sidebar or at the bottom of this article. Once you have confirmed you will receive the code. If you would like to know more about the newsletter, please read our subscription page..

Clickdensity

What I immediately liked about Clickdensity is the ease of implementation – just five lines of code – and the ease of use. With only four buttons you can choose between the normal heat map, the click map, the hover map and the page stats. The page stats however shows minimal information because Clickdensity does not collect much data other than the X and Y coordinates of the clicks to generate the heatmap. You can filter the clicks by browser, click time, date and screen size.

A very nice feature is the ability to attach the X and Y click coordinates to a certain element of your page. This can be necessary when you update your website on regular bases with new content, meaning a change in lay-out. A minor setback however is that it takes quiet some time to generate the heatmap overlays. Nevertheless, if you’re looking for a straightforward and easy to use heatmap application without extensive analytical information, you should definitely try Clickdensity.

WordPress plugin #2: WordPress Click Tracking Plugin

I’ve been reading a lot of positive reviews about the Click Tracking Plugin, but unfortunately I can’t get it to work properly. I’m blaming my inadequate technical knowledge of GZIP for that, but it looks like I’m not the only one having problems with this plugin. If someone can get this one to work, please let me know!

Picnet Mouse Eye Tracking

This Australian company, named Picnet, has two heatmap systems: the eye tracking heatmap and the click heatmap. The name “eye tracking heatmap” can be a bit misleading because there is no eye tracking going on. Picnet justifies the name with the result of certain studies, which claims: “There is a strong correlation (84%) between the regions of website pages scanned by your eyes and the regions visited by the mouse cursor. Additionally, 88% of regions that are not scanned by the eyes are also not visited by the mouse cursor”.
So instead of tracking the eyes, Picnet tracks the mouse movements.

There are two ways to display the click heatmap – a general map of the sectors your visitors are scanning with their eyes, and a more detailed view that shows the pattern of mouse clicks on each area of the page. It also tracks mouse movements and shows you the website architecture and user movements throughout the website.

If you subscribe for a free account, you need to mention Picnet’s website with a small line of text which is provided by them. To get rid of this text you will need to upgrade to a premium account, which costs A$2,000 per annum per domain or A$500 per month per domain.
The free account however delivers very useful information but has some downsides.
For example, it doesn’t keep your data longer than 2 weeks, it doesn’t record any keyboard interaction (which is useful for investigating your forms) and it does’t show user interactions with the page (so no AJAX or drop down menu’s for example).

Update: 4th of November 2010

It has been a long time since I made an addition to this post and because I found a new heatmap system I thought it was about time for yet another update.

Real-time heatmap, made by Patrick Wied

The latest example I found does look very nice, which you can see for yourself on the website of Patrick Wied. With only javascript and the HTMLCanvas element it generates a beautifully designed real-time heatmap.
Although it looks great, it does come with a minor issue. It’s possible to save the precious data but for now you can only extract it from the biggest alert message I have ever seen, maybe useful for technicians but not for me.

Don’t forget that this concept is still in an early stage but I think this has some real potential in becoming more than just an experiment because of Wied’s approach and the simplicity of his solution. Looking forward in seeing more of it.

About the author: Paul Olyslager

Subscribe for our free newsletter and receive every update straight into your inbox!

Other posts you might like: