Very interesting things  Blog RSS Feed

User generated heatmapsJanuary 23 2008

For some days now I've been working on a way to capture the users clicks on an image or webpage and display them in a heatmap sort of way. An application like that could be applied in many different sectors. For example in market research or advertising it could be used to display what consumers find more interesting in an advert or in web optimization to find out where the users click most.

There are many other heatmap applications on the web that do a very good job but I haven't found anything that a)is free and b)is open-source. The one I created is a very simple application. It displays an image with an id of heatmap and then some simple javascript captured the position of the cursor at the time the user clicked on the image. Using the offset from the top of the page we can find the actual pixel on the image that the user clicked. The data are stored in a database table with 4 columns x, y, ximage and yimage. In the next page I retrieve these values and I place on top of the image some transparent span elements with absolute positioning.

The application definitely needs some tweaking. First and most important is to replace the spans with some fancy generated heatmap using gdlibrary since the transparent png don't work particulary well with ie. Another thing would be to add some kind of interaction with the user when he actually clicks on the image to show him that we have captured his selection.

I will work on it the next couple of days but you can try it and see the source code now using the link below.

User generated heatmap


Article listed in "Tutorials"

Bookmark and Share

Add a comment





tadd says:March 17 2010 [url=] [/url]


Add a comment

Security image

Back to all posts