网站热图如何获取准确数据？
像crazyegg.com 这样的服务可以向您显示访问者将鼠标光标停留在您网页上的位置。我的问题是，鉴于人们的屏幕宽度不同，他们如何确定我的 x 坐标与其他人的 x 坐标在页面上的位置相同？这意味着，两个人可能具有相同的鼠标 x 坐标，但由于屏幕宽度不同，他们的鼠标将位于网页的不同部分。
如何创建考虑到这一点的网页热图服务，并且可以在具有不同内容大小的多个不同网站上进行缩放和使用？
There are services like crazyegg.com that show you where visitors are resting their mouse cursors on your web page. My question is, given that people have different screen widths how can they be sure that my x coordinate is the same position on the page as another persons x coordinate? Meaning, two people may have the same mouse x coordinates, but since there screens are different widths, their mouse will be on a different part of the web page.
How can you create a web-page heat map service that takes this into consideration, and can be scaled and used across multiple different websites with different content sizes?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以收集 x & y 按元素（如主要内容 div）而不是整个视口的数据。通过这种方式，您可以丢弃取决于用户分辨率的死区。
You can collect x & y data by element (like a main content div) rather than the entire viewport. In this fashion you can discard dead-space which is subject to a user's resolution.
您可以将一个点击处理程序添加到包含页面所有内容的正文或包装 div（当您的内容使用
margin: auto位于屏幕中央时效果更好）。传入的 MouseEvent 保存 screenX/Y 和 clientX/Y 坐标，其中前者是从屏幕左上角开始的坐标，另一个是基于 body 或包装 div 的左上角的坐标。使用 clientX/Y 坐标可以轻松创建热图，因为您可以在不同的屏幕尺寸上使用相对于内容的相同起点。You can add a clickhandler to the body or a wrapper div (better when your content is centered on the screen using
margin: auto) that hold all the content of the page. The passed in MouseEvent hold the screenX/Y and the clientX/Y coordinates, where the former are the coordinates starting in the left top corner of the screen and the other are coordinates based on the top/left corner of the body or wrapper div. Using the clientX/Y coordinates made it easy to create a heat map cause you the same start point relative to your content over different screen sizes.您可以跟踪相对于单击的元素的单击坐标，而不是跟踪网页的绝对 x 和 y 坐标。因此，当元素位置发生变化时，它将适应不同的屏幕尺寸和分辨率。
还有一个方面需要注意，即每个用户的视口宽度和整个页面的长度（整个可滚动高度），您可以根据相对定位进行调整。
在 Howuku 我们对鼠标点击和移动做了很多优化，以确保数据点的精确和准确是为我们的网站热图工具动态生成的。
我希望这有帮助！
Instead of tracking the absolute x and y coordinate of the webpage, you can track the click coordination relative to the elements clicked. So, it would cater to different screen sizes and resolutions as the element position shifted.
There is also another aspect that you need to pay attention to which is each of the users' viewport width and the length of the full page (entire scrollable height) that you can adjust according to relative positioning.
At Howuku we did a lot of optimization on the mouse click and movement to ensure the precise and accurate datapoint that is dynamically generated for our website heatmap tool.
I hope this helps!