【干货】热力元素分析看板实例

【干货】热力元素分析看板实例

作者介绍

@edan

前商业数据分析师，现TMD数据产品经理；

“数据人创作者联盟”成员；

期望和数据小伙伴一起做些有意思的事情。

01 为什么要用热力图来展示数据？

在流量数据分析的时候，页面流量分布是一个非常重要的课题。特别是对于一些模块特别丰富的页面，热力图会是一个非常好的可视化方式。

比如某出现app的首页就是是非常适合用热力图来展示数据的产品形态。

本文就以笔者经历过的一个热力图看板项目，分享一下如何构建这样的一个可视化产品。下文中引用某出行app的首页作为示例做方案讲解（仅做示例）。

02 业内常规方法

03 基于业务需求的构建方案

1）在某些维度变换取值后，同一个页面的布局会有所变化，最典型的比如版本。所以热力图需要在特定维度变化的时候，也变换到对应图片上。

2）页面的模块是有层级关系的，可视化上需要把对应的层级关系展示出来。比如搜索/信息流/导航栏是三个一级模块，他们之间可以比较。而导航栏下面的不同类目作为二级模块，相互之间作比较。

04 整体方案思路

方案的核心思路：通过对c端页面作截图，并获取图片背后的dom信息视图树，然后讲视图树中的元素标示与埋点信息匹配上，最后展示对应埋点的指标。

1）截图

调研市面上所有竞品基本只支持截一屏，对于长列表页面，比如POI详情页，很多模块是截不全的。笔者所在的团队为了支持长屏页面，采取滚动截图拼接的方案，客户端通过模拟滚动，每滚动一段距离，就截屏一次，然后最后对多次截屏的图片做拼接。图片拼接—首先将多个截屏转化为灰度图，通过像素对比的方法找出前后图片相似的部分，计算出图片拼接的位置，进而对图片进行裁剪拼接，最后融合成一张完整的长图。

2）获取图片视图树

我们可以把一个app页面的构成简单理解为一张一张的小图片按层次和位置堆叠而成。所以页面可以用一个是视图树的结构来表示。而图片上的每一个元素标示就是树中的节点。

视图树节点包含的关键信息有位置信息。另外我们还需要通过了节点的路径构建一个id，作为识别图片模块元素的唯一标示。

3）匹配视图树与埋点事件

有了页面上每一个元素的标示后，我们需要将埋点事件与元素标示对应上。由于页面上的元素标示非常多一张图可能有上百个元素构成。但是其中真正有数据上报的元素只有少数部分。所以我们以埋点事件为主键来匹配元素标示。

对于其中调用埋点系统中标准自动打点能力做的打点，客户端可以直接获取其埋点信息作自动填充，但是对于有些因为打点时机较复杂而采用手动上报的埋点，则只能通过人工维护匹配关系。

4）数据处理与展现

另外支持热力对比的功能，设置不同的筛选条件，并在对比图上做了元素联动的设计，帮助业务更好聚焦在自己关注点位上作比对。

05 写在最后

可以看到，方案实现到这里，目前还不是真正意义热力图，我们可以进一步把视觉做得更好。

对于单图对比模块指标的场景下，需要进一步根据数值的大小，参考excel的条件格式，给不同的模块上色阶。

对于不同设置条件下的多图比对场景，需要可以单独凸显对应模块做可视化凸显（比如以两个模块的外框粗细表示指标的大小）。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。