热力图|热力元素分析看板实例_

编辑导语：在流量数据分析中，页面流量的分布是一个比较重要的课题，热力图对于一些模块特别丰富的页面，是一个非常好的可视化呈现方式。作者以自己经历过的一个热力图看板项目为例，分享如何构建这样一个可视化产品，一起来看看吧。

文章插图
一、为什么要用热力图来展示数据？在流量数据分析的时候，页面流量分布是一个非常重要的课题。特别是对于一些模块特别丰富的页面，热力图会是一个非常好的可视化方式。
一方面当页面模块非常多的时候，把数据里每个模块名称与真实App里“是谁”对应起来有一定的记忆成本；另外模块的位置信息也是影响模块本身曝光点击指标的一个重要因素，但通过一般的图表形式往往不能很好展示。
比如某出现app的首页就是是非常适合用热力图来展示数据的产品形态。

文章插图
本文就以笔者经历过的一个热力图看板项目，分享一下如何构建这样的一个可视化产品。下文中引用某出行app的首页作为示例做方案讲解（仅做示例）。
二、业内常规方法业内对于热力图的实现，一般基于全埋点的技术，给当前页面添加一个事件监听器。在用户点击的时候，上报被点击元素的信息(主要包括url和element path，点击坐标位置等信息)。
在展示的时候有两种方案：
方案一，纯粹通过点击的位置信息来描绘用户在页面上点击的分布，并以真正热力图的形式展示哪些地方点得多，哪些地方点的少。
优点是精确到了像素点。但是缺点也非常明显，不同的分辨率和网站布局方式（居中等）都会导致结果的不准确，并不能正确的展示被点击的元素，在页面进行改版或者布。

文章插图
方案二，以页面的dom信息构建每个元素的唯一标识element path，并结合页面元素的位置信息作展示。
这个方案的可视化粒度模块层级的，其实更贴近用户实际情况（因为比如我们点击查找时就是为了点击查找键，而点击查找键的左边还是中间并没有太多实际意义）。
他的优势在于可以结合模块埋点的信息，后续展示更多模块后续的其他业务指标数据（比如模块带来的意向，订单）。

文章插图
三、基于业务需求的构建方案笔者当时面临的背景是：单纯的点击指标深度不够，业务方需要结合曝光与否看ctr。另外模块后续带来的意向，订单，后续访问时长也是进一步分析用户的关键指标，所以最后选择的是方案二。并且在方案而的基础上还做了更多优化：
在某些维度变换取值后，同一个页面的布局会有所变化，最典型的比如版本。所以热力图需要在特定维度变化的时候，也变换到对应图片上。
页面的模块是有层级关系的，可视化上需要把对应的层级关系展示出来。比如搜索/信息流/导航栏是三个一级模块，他们之间可以比较。而导航栏下面的不同类目作为二级模块，相互之间作比较。
四、整体方案思路方案的核心思路：通过对c端页面作截图，并获取图片背后的dom信息视图树，然后讲视图树中的元素标示与埋点信息匹配上，最后展示对应埋点的指标。
1. 截图【热力图|热力元素分析看板实例】调研市面上所有竞品基本只支持截一屏，对于长列表页面，比如POI详情页，很多模块是截不全的。
笔者所在的团队为了支持长屏页面，采取滚动截图拼接的方案，客户端通过模拟滚动，每滚动一段距离，就截屏一次，然后最后对多次截屏的图片做拼接。