行为埋点生成热力图

行为埋点生成热力图已关闭评论

一 背景

目前我们页面埋点数据是手动埋点收集的,基本上每个点击行为都会加上埋点数据。守着那么多收集上来的数据,除了躺在表格里,我们就想,有没有别的形式展现这些数据呢?

很自然我们想到了数据可视化中的热力图,页面布局构成了一张画布,用户在图上点击操作构成了每个位置的点击数据,我们已经有了点击数据量,加上一个位置维度很自然就能画出这个页面的点击热力图了。

二 调研

有了设想就开始着手实现,但下手之前还要调研一下目前数据是否都能满足我们画图的条件。我们需要的数据有两个条件:

  1. 点击数
  2. 点击位置
点击行为和位置

我们已经有了点击的数,还差位置。

有些点的点击我们可以对应到点击位置,但有些却不行,比如循环元素的埋点:

<template>
    <div 
     v-for="(item, index) in list" 
     :key="index" 
     @click="itemClick(item, index)"
    >
    {{...}}
  </div>
</template>
<script>
  ...
  itemClick(item, index) {
    // 点击埋点
    log('item-click', { index });
  }
  ...
</script>

像上面这种每个点击埋点都一样,就算有索引值,也不便追踪到这个元素的位置,加上在不同设备尺寸上的差异,只有呈现出来才知道。

解决这个问题我们采用将点击节点一同上报的方式(节点既可以是xPath,也可以是CSS selector),到渲染阶段再计算这个点的位置,这样既解决了循环元素点击收集的问题,也解决了不同设备尺寸上点击位置的问题。

三 数据处理

经过改造后,我们的埋点收集工具已经能够收集到埋点和点击节点,但现在数据都是独立的,还没有聚合到一起,所以接下来的任务就是数据计算。

面对一堆数据,确定哪些点是同一个节点,需要我们指定这个点的唯一标识,我们选择了页面标识+pageType+actionType+节点来标记某一个节点,因为部署后应用的将是多个业务场景,仅仅用点击事件标识显然是不够的。

通过定时任务每天按上述规则计算每个点的点击数据,我们的热力图数据最终才算准备好。

还差最后一步——展现。

四 绘制

绘制热力图有很多成熟的工具,这里使用轻量的heatmapjs。

热力图我们放到终端上直接展现,通过嵌入的脚本,完成数据获取,节点位置计算,组装绘制数据,绘制。

效果如图:

展现效果

五 总结

最后总结流程大致如下

整体流程

数据收集阶段同时收集点击埋点的节点,上报后处理数据中确定点击节点的唯一值然后聚合,绘制阶段再结合节点属性计算节点位置,并绘制出热力图。

六 后续计划

目前方案比较初级,主要有数据收集单一、无效数据过多、热力图单节点数据过大导致显示效果不好等问题,有待我们后续优化。


来源: 大转转FE