/heatmap

移动端热力图系统

Primary LanguageJavaScript

移动端热力图系统heatmap

  • 什么是热力图监控?
  • 为什么要热力图监控?
  • 概要设计

什么是热力图监控?

以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。例如

image

为什么要做热力图监控?

  • 直观清楚地看到页面上每一个区域的访客兴趣焦点,无须报告数据分析,图形化展现,无需任何页面分析经验;
  • 能够框出任意区域的访问详情,如来源、搜索引擎、搜索词、关键词、浏览器等在核心区域的点击情况一目了然,投资回报比清清楚楚
  • 移动端有自身的特性:根据os、ua、屏幕大小导致页面功能模块、区域不一样,如果只存储坐标数据,导致页面热力图数据不准确,比如

image

  • 移动端页面经常有spa的开发模式,需要以带hash的url为key来进行数据区分存储,但是ta只能也url为key存储,导致多个页面的热力数据混杂在一起,再比如

image

概要设计

我们怎么做能够解决上述问题?

  • 后台存储:
    • 以带hash的全url为key进行存储;对应一个申请ID;
    • 除了坐标信息,还需要存储os、ua、屏幕大小等信息;
    • 每天晚上对一个key的数据统计计算;
  • 前台收集数据:
    • 用户每次点击、touch都统计到一个变量里;
    • 页面onunload的时候上报变量数据、ua、屏幕大小;
  • 前台展示热力图:
    • 按照业务ID(对应带hash的链接)进行搜索;
    • 用时间、ua、屏幕大小进行过滤搜索;

系统效果

image