行为分析热力图实现.pdfVIP

热力争实现

（WORD文档，下载后可编写更正）

1.背景

为何要做这样一个系统，电商网站的一种常用营销手段，就是配置头晕眼花的活动页显现给

用户，有的用来显现各种商品，有的供用户领取优惠券。但屏幕的显现空间有限，如

何配置不一样的模块才能最大化利用页面空间，一种比较好的方式就是收集用户点击数据，绘制出热

力争，供产品、运营和设计同学参照，不停优化模块配置，有效提高点击转变。

2.系统架构

先将热力争系统进行子功能拆分，可以获取以下几个部分：

1.用户点击数据收集：包含页面埋点、数据入库；

2.热力争绘制：包含：数据读取、数据加工、热力争绘制；

3.数据盘问平台：主若是按日期和活动ID盘问自定义地域的点击数。

2.1数据收集

数据收集部分，主要经过事件代理在body上绑定click事件，收集数据主要包含：

1.x：点击事件触发相对于document的横坐标，主要取自于event.pageX；

2.y：点击事件触发相对于document的纵坐标，主要取自于event.pageY；

3.screenWidth：点击事件触发时屏幕的宽度；

4.screenHeight：点击事件触发时屏幕的高度；

5.moduleType：表示当前元素或其父元素是不是一个fixed元素，如是则取值screen，否

则为floor；

6.url：当前活动页面的URL；

7.date：当前日期。

此处代码不再赘述。获取到数据后，直接经过前端埋点方案进行数据上报，由数据组对数据进行入

库。

2.2热力争绘制

数据读取

此刻要绘制给定URL(经过活动ID拼接而成)活动页的热力争，需要先从数据库中获取该页

面全部点击数据：

select

1

x,

2

y,

3

screenWidthaswidth,

4

screenHeightasheight

5

fromheatmap

6

wheredate=${date}

7

andurl=${url}

8

andxisnotnull

9

andyisnotnull

10

andcast(cast(yasdouble)asbigint)=cast(cast(screenHeightasdouble)

11

asbigint)*${VIEW_NUM}

12

limit${SAMPLE_NUM}

这里的VIEW_NUM表示热力争截取的屏数，由于有些页面特别长会超出一屏，因此这里增添一个

配置。SAMPLE_NUM表示样本数目，由于有的页面每天点击数目会达到几十甚至上百万，

假如都绘制在热力争上会造成数据过多，且内存耗费过大。而热力争主要反响一个点击趋向，一个

合理的样本数目即可达到成效。

数据加工热力争绘制

这里将数据加工和热力争绘制放在一起介绍，主要由于加工是在绘制过程中的一个步骤中实

现的，因此先介绍热力争绘制过程。

这里采纳Nightmare（一个阅读器模拟器）衬着页面，而且在页面加载前，注入两个脚本：

1.heatmap.js：一个绘制热力争的前端JS库，供给热力争绘制工具；

2.${date}-${activity_id}.js：加工上一步中收集到的数据，并用数据初始化热力争工

具示例。

heatmap.js是一个特别好用的前端热力争绘制工具，有丰富的参数进行配置，有兴趣可以

看下源码。绘制工具需要供给point数据，这就是第2个脚本做的事：

1varitems=${JSON.stringify(list)};

2varheatData={

3data:[],

4min:0,

5max:25,