A jQuery Heat Map

Development February 8, 2010 by cody 10 Comments

Here is a very simple way ho to create a heat map with jQuery. The idea is to track the clicks of a user and then display the click pattern with semi-transparent dots on an overlay. You can try out the demo by first clicking around on the page and then clicking “Analyze”. Since the dots are semi-transparent, spots that have been clicked on more often, will appear slightly darker. Click on the overlay to make it invisible again and continue with the “recording”.

View demo Download source

Tagged with: heat map, jQuery

Discussion¹⁰ Join the discussion

Groningen
February 8th, 2010 at 16:02

Very nice, this is a very usefull add to GA for example.
On wich place does a person click on an image link.

Tnx
Marten van Urk
February 9th, 2010 at 13:42

@Groningen
This already exists in GA ;-)
Groningen
February 9th, 2010 at 13:56

Well it exist in GA, as al link map, but not the exact place where a person clicks. for example if you have a big header image, you can see on wich place a person clicks.
Matt
April 2nd, 2010 at 00:14

Can anyone provide an example of how to write the heat map info to disk, so you can capture multiple users data rather than just the single current user session?
Simon
April 19th, 2010 at 10:26

Nice plugin – i agree, would be nice to have some solution to write the data into a database. for analyzing later on…is this possible?

Greetings
Agenceweb
June 25th, 2010 at 14:17

tympansus is a very interesting blog :)