4

我正在尝试为我的一个网站构建一个简单的热图,但我认为这似乎更棘手!

1)网站有不同的主题,1个左对齐,另一个居中对齐。

2)屏幕尺寸在整个用户中发生变化。

我需要跟踪网站上的点击,但不幸的是 event.PageX 和 event.PageY 是在考虑整个屏幕的情况下计算的。


例子

在第一个示例中,坐标为 [300, 500] 的点击可能位于大猩猩周围的某个地方(可能是他的鼻孔!=))。

替代文字

在另一个示例中,单击坐标 [300. 500] 可能会位于主要内容区域之外的某个地方!

替代文字


底线:我该如何解决这个问题,以便我可以构建一个准确的 DIY 点击热图?

知道这真的很有趣!多谢你们!=)

4

3 回答 3

6

1)只需将当前主题与坐标一起传递。

2)获取主要内容区域的相对鼠标位置。这样可以避免不同浏览器宽度/高度的不同位置问题。

关于鼠标位置(如果你要使用它)的jQuery 文档中有一个特殊的部分:

(请注意,给出的像素值是相对于整个文档的。如果要计算特定元素内或视口内的位置,可以查看 offsetY 和 offsetX,并进行一些算术运算以找到相对值.

这是在特定元素而不是页面中查找位置的示例:

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

话虽如此,也许有点矫枉过正;Google Analytics也有热图功能。

于 2010-07-26T09:35:06.603 回答
5

您可以基于底层对象(即大猩猩)存储每次点击的相对坐标,而不是存储每次点击的绝对坐标。

然后在显示热图时,您会以您的分辨率显示相对于每个对象的点击次数。

为此,您只需获取每次点击的“目标”对象(这是事件参数的“目标”属性)并从点击坐标中减去它的坐标。

于 2010-07-26T09:46:05.363 回答
3

这是我的代码。它只记录页面包装内的点击(不是背景 n 的东西)。所以你只得到相对位置。

$(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
      });
    }
  });
});
于 2010-07-26T09:34:41.287 回答