Click heatmap and mouse coordinates! - Javascript

Question

I'm trying to build a simple heatmap for one of my sites, but it seems a lot trickier that I thought!

1) There are different themes for the site, 1 is aligned to the left, another one is aligned to the centre.

2) Screen sizes change throughout the users.

I need to track clicks on the site, but unfortunately event.PageX and event.PageY are calculated taking in consideration the whole screen.

---

Examples

In the first example a click with coordinates [300, 500] will probably be located somewhere around the gorilla (maybe his nostrils! =) ).

In this other example a click with coordinates [300. 500] will probably be located somewhere outside the main content area!

---

Bottomline: How can I address this problem, so that I can build an accurate DIY click heatmap?

This would be really interesting to know! Thanks guys! =)

Answer 1

1) Just pass the current theme along with the coordinates.

2) Get the relative mouse position of your main content area. This way you avoid the problem of different positions for different browser widths/heights.

There is a special part in the jQuery docs for Mouse Position (if you were to use it) about this:

(Note that the pixel values give are relative to the entire document. If you want to calculate the position within a particular element, or within the viewport, you can look at offsetY and offsetX, and do a bit of arithmetic to find the relative value.

Here is an example of finding the position within the particular element rather than the page:

$("#special").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('#status2').html(x +', '+ y);
});

That being said, perhaps overkill; Google Analytics has a heatmap feature too.