Click the coordinates of the hot map and mouse! - javascript

Question

I am trying to create a simple heat map for one of my sites, but it seems to me that it is much more complicated than I thought!

1) There are different topics for the site, 1 - to the left, another - in the center.

2) Resize the screen in all users.

I need to track clicks on the site, but, unfortunately, event.PageX and event.PageY are calculated taking into account the entire screen.

---

Examples

In the first example, a click with coordinates [300, 500] is likely to be located somewhere around the gorilla (perhaps its nostrils! =)).

In this other example, a click with coordinates [300. 500] is likely to be located somewhere outside the main content area!

---

Bottomline: , DIY?

! , ! =)

Answer 1

1) .

2) . , / .

jQuery docs ( ) :

( , . offsetY offsetX, , .

:

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

, , ; Google Analytics .

Answer 2

, , , , .

.

"" ( "target" ) .

Answer 3

Here is my code. It only records clicks inside the page wrapper (and not in the background). This way you only get relative positions.

$(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
      });
    }
  });
});