views:

137

answers:

4

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! =) ).

alt text

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

alt text


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! =)

+1  A: 

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
      });
    }
  });
});
Anpher
@Anpher: Thanks for that! Any clever ways where I could let Javascript understand what div the wrapper is?
RadiantHex
@RadiantHex, by setting its id to 'wrapperDiv'.
Daniel
@Daniel: Hi Daniel, I left a comment on your great reply. :) It would be great if somehow I could figure out a way to dynamically understand what div wrapper is. I reckon that there is a fixed set of methods for centering a wrapper, e.g. text-align and setting the div as an inline-block. So I reckon I could look for this with Javascript, but I believe there might be other ways of achieving this, which coould slow me down.
RadiantHex
+3  A: 

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.

Daniel
@Daniel: thanks so much for your reply! I really need to find a way to identify the content wrapper with the Javascript, it is going to be a bit complicated having to force or find the id for each theme. It would be a lot easier to just paste some Javascript code within each theme. Btw it's the first time I go on Google Analytics written in Dutch! =)
RadiantHex
@RadiantHex: Using silverbackapp.com as example, your content wrapper div has class 'content'. You can target it with '.content' (instead of #special) if you're using jQuery.
Daniel
+2  A: 

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)); 
});​
Reigel
@Reigel: thanks!
RadiantHex
+2  A: 

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.

Toby
@Toby: interesting and refreshing idea! I like the concept, I'll have a think about it =)
RadiantHex
@Toby: this is a REALLY GOOD idea, I believe it can be generalised a bit too! e.g. The Gorilla could be used a landmark, as it is going to be in the content wrapper anyway, and all point coordinates could be placed into relation with it. Problem is now, getting the code to agree on a landmark! =)
RadiantHex