导读热力图是分析用户点击行为的利器但前端埋点的坐标换算很多人都搞不清。我在456数据做热力图模块时踩过不少坑今天把坐标系的逻辑讲透。热力图到底埋的是什么热力图的核心就是记录用户在页面上每一次点击的坐标位置然后把相同位置的点击密度渲染成颜色深浅。点击坐标换算原理三个坐标系先搞清楚属性参考原点说明clientX / clientY视口左上角相对当前可视区域不含滚动pageX / pageY文档左上角相对整个页面包含滚动距离screenX / screenY屏幕左上角相对物理屏幕一般用不上根据MDN MouseEvent文档pageY clientY scrollY。热力图用的是pageX/pageY。document.addEventListener(click, function(e) { const x e.pageX; const y e.pageY; trackHeatmapClick({ x, y }); });我的经验热力图埋点一定要存百分比坐标不要存绝对像素。不然不同屏幕的热力图全错位了。总结热力图埋点的核心是坐标换算。总结一下三个要点pageY clientY scrollY是最基本的换算关系百分比坐标是解决多分辨率对齐的关键设备像素比是高清屏不模糊的保证。常见问题 FAQQ1为什么热力图的热点总是偏一点A大概率是坐标系用错了。检查一下是不是用了clientY而不是pageY。Q2移动端的热力图怎么做A移动端用touch事件并且要注意设备像素比devicePixelRatio。Q3iframe 里的点击怎么统计A跨域iframe里的点击拿不到父页面的坐标。同域的可以传消息跨域的就只能单独埋点了。Q4热力图的数据量会不会很大A会。我一般会做抽样比如随机上报10%的点击事件。参考来源MDN: MouseEvent.pageX 文档W3C Pointer Events Level 2 规范​