网站热图如何获得准确的数据？

Question

像crazyegg.com这样的服务可以向您显示访问者在您的网页上放置鼠标光标的位置。我的问题是，鉴于人们有不同的屏幕宽度，他们怎么能确定我的x坐标与另一个人x坐标在页面上的位置相同？意思是，两个人可能有相同的鼠标x坐标，但由于屏幕的宽度不同，他们的鼠标将位于网页的不同部分。

如何创建一个考虑到这一点的网页热图服务，并且可以在不同内容大小的多个不同网站上进行缩放和使用？

Answer 1

你可以收集x＆amp; y按元素的数据（如主内容div）而不是整个视口。通过这种方式，您可以丢弃受用户解决的死区。

Answer 2

您可以将一个点击处理程序添加到正文或包装div（当您的内容使用margin: auto在屏幕上居中时更好），其中包含页面的所有内容。传入的MouseEvent保持screenX / Y和clientX / Y坐标，其中前者是从屏幕左上角开始的坐标，另一个是基于主体或包装div的左上角的坐标。使用clientX / Y坐标可以轻松创建热图，从而使您在不同的屏幕尺寸上相对于您的内容具有相同的起点。