前端热力图

背景

招聘b端相关页面逻辑较为复杂，通过一些具体的打点事件不太好洞察用户行为。

解决办法

通过热力图，供产品、运营和设计同学参考，不断优化模块配置，有效提升点击转化。

成果

目前热力图数据平台已介入人才银行v3版本的全部页面，数据准确率达到百分之90以上(感谢 @ 赵昕琳测试同学支持 )。产品通过点击趋势，快速捕捉到用户的使用&操作情况，对于产品设计有很大参考价值。

市面上也有很多类似这种服务的产品，我们采取自己做的原因有两点。1，对方收费...。2, 为了数据安全。

技术实现

内容主要分为三部分。

1、数据采集上报。

2、热力图绘制。

3、展示后台。

整体流程就是

1、前端通过绑定在document上的事件，获取页面元素进行采集，同时上传到公司内部打点系统(clickhouse)。

2、通过插件(nightmare.js)模拟打开当前数据采集的页面，根据之前上报的数据找到用户行为的x,y坐标，最终通过heatmap.js在模拟打开的页面生成热力图，并通过nightmare.js 进行截图后把图片上传到七牛云拿到链接返回给后台管理系统。

3、后台管理系统是面向使用热力图分析数据的同学，通过查询页面即可实时查看当前页面的热力图分析走势。(因为是与数据相关，所以我们把这个后台页面写到了数据平台的repo里)。

一、数据上报。

数据上报是热力图系统的基石，数据不准确热力图系统毫无意义的同时可能会对产品，设计同学产生错误判断。

在做数据上报时，我记得前前后后改了4版方案，我们主要需要考虑这几点。

1、数据上报的通用性。

2、与页面逻辑解耦。

3、数据准确性。

4、性能。

中心思想就是嵌入一段js的sdk，通过绑定在document上的事件，获取到当前用户点击的元素进行上报。

在做这块的同时，我记得前前后后改了4版方案，每个方案都是彻底的推倒重来。

前期的方案就是或者当前用户行为的x,y轴坐标，后期通过坐标直接生成热力图。很快就发现这样会有问题，因为我们页面都是动态渲染，每个用户展示的页面都不一致。比如A和B用户当前页面有两个dom元素。A用户dom1元素是10条数据假设dom1高度为100。而B用户dom1只有20条数据，高度为20。这个时候两个用户同时点击了dom2元素如果根据屏幕的x,y轴会出现误判的情况。

之后我们采用的方案是获取当前事件行为的页面唯一目标值。

具体做法就是获取当我们获取到了具体标签后，优先获取元素的id，因为id一定是唯一的，如果没有id我们去获取class，没有class获取页面的标签。获取到元素后，通过获取到的id || class || tag 判断是否是页面唯一的，如果不是唯一的我们找他的父级元素，依次类推，最终找到页面的唯一元素，此时我们就会得到当前事件行为的页面唯一值的路径(path数组)。还有一些别的信息。

text(当前事件文本)

url(当前url)

x,y(当前事件针对屏幕的坐标，我们目前没用到)

offsetX offsetY(当前事件针对于父级元素的坐标，后续会讲)

path(当前页面唯一值的路径，有id，className, tagName, index, 后续我们可以根据这个或者当前点击的dom)

1、嵌入sdk，因为repo用到的是react技术栈，我们在生命周期中绑定。

hotPicPing函数是绑定事件，removeHotPicPing是组件卸载时移除事件。

2、绑定document事件。

我们希望底层sdk的适用性更高，采用的原生js。

同时这块为性能做了两件事，在截图中我们可以看到，用到了节流。以及用户如果点击到的dom获取不到文本也不会上报(空白区不上报)这样对img,input会有误伤，我们做了特殊的处理。

3、handleFn函数，在注释中有简单的说明

生成页面唯一路径函数

siblings函数，根据dom生成路径对象。

二、热力图绘制。

热力图绘制我们主要通过nightmare.js heatmap.js。

https://github.com/segmentio/nightmare

https://www.patrick-wied.at/static/heatmapjs/

nightmare.js是高级浏览器自动化库，它可以模拟打开一个页面，并模拟一些用户行为以及获取当前页的dom元素。一些爬虫和自动化测试也是依赖这个框架。我们的目标是公开一些模仿用户操作的简单方法（例如goto，type和click），并提供一个针对每个脚本块都是同步的API，而不是嵌套嵌套的回调。它最初设计用于在没有API的站点之间自动执行任务，但是最常用于UI测试和爬网。

nightmare.js 核心原理是基于Electron。

直接上代码

1、模拟打开目标页面