Click heatmap and mouse coordinates! - Javascript

Question

Hi folks,

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

Here is my code. It logs clicks only inside page wrapper (not background n stuff). So you get relative positions only.

$(function(){
  var o = $("#wrapperDiv"); // page wrapper div
  var lf = o.offset().left; // wrapper left position
  var lt = lf+o.width(); // wrapper right position
  $(document).click(function(e){ // bind click event to whole page
    var x = e.pageX; // mouse x position
    if(x >= lf || x <= lt){ // was the click inside wrapper div?
      $.get("heatmap.php", { // send ajax request to server width:
        x: x-lf, // x position of page
        y: e.pageY, // y position of page
        url: document.location.href.replace('http://'+document.domain, '') // request uri
      });
    }
  });
});

Answer 2

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.

Answer 3

demo

you need to have something like a wrapper div, then you could do it like this,

$('#wrapper').bind('click',function(e){ 
     $("#log").text("pageX: " + (e.pageX - this.offsetLeft) + ", pageY: " + (e.pageY - this.offsetTop)); 
});​

Answer 4

Rather than storing the absolute co-ords for each click you could store the reltive co-ord for each click based on the underlying object, i.e the gorilla.

Then when displaying the heatmap you display clicks relative to each object at your resolution.

To do this you would simply have to grab the 'target' object of each click (this is the 'target' property of the event arguments) and subtract it's co-ords from the click co-ords.