[英]Click heatmap and mouse coordinates! - Javascript
我正在尝试为我的一个网站构建一个简单的热图,但我认为这似乎更棘手!
1)网站有不同的主题,1与左边对齐,另一个与中心对齐。
2) 屏幕尺寸在整个用户中发生变化。
我需要跟踪网站上的点击次数,但不幸的是,event.PageX和event.PageY是在考虑整个屏幕的情况下计算的。
在第一个例子中,坐标[300,500]的点击可能位于大猩猩周围的某个地方(也许是他的鼻孔!=))。
在另一个例子中,点击坐标为[300。 500]可能会位于主要内容区域之外的某个地方!
底线:我如何解决这个问题,以便我可以建立一个准确的DIY点击热图?
知道这真的很有趣! 多谢你们! =)
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也有热图功能。
您可以根据底层对象(即大猩猩)为每次点击存储相关的合作,而不是为每次点击存储绝对合作。
然后,当显示热图时,您会在分辨率下显示相对于每个对象的点击次数。
要做到这一点,你只需要抓住每次点击的“目标”对象(这是事件参数的'target'属性),然后从点击协议中减去它的共同点。
这是我的代码。 它仅在页面包装器内记录单击(不是后台的东西)。 所以你只能得到相对的职位。
$(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
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.