热力图技术实现方案.pdfVIP

热力图技术实现方案 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 热力图绘制 2.2.1 数据读取 现在要绘制给定 URL (通过活动ID 拼接而成)活动页的热力图，需要先从数据库中获取该 页面所有点击数据： select 1 x, 2 y, 3 screenWidth as width, 4 screenHeight as height 5 from heatmap 6 where date = ${date} 7 and url = ${url} 8 and x is not null 9 and y is not null 10 and cast(cast(y as double) as bigint) = cast(cast(screenHeight as 11 double) as bigint) * ${VIEW_NUM} 12 limit ${SAMPLE_NUM} 这里的VIEW_NUM 表示热力图截取的屏数，因为有些页面非常长会超过一屏，所以这里增加 一个配置。SAMPLE_NUM 表示样本数量，因为有的页面每天点击数量会达到几十甚至上百 万，如果都绘制在热力图上会造成数据过多，且内存消耗过大。而热力图主要反映一个点 击趋势，一个合理的样本数量即可达到效果。 2.2.2 数据加工 热力图绘制 这里将数据加工和热力图绘制放在一起介绍，主要因为加工是在绘制过程中的一个步骤中 实现的，所以先介绍热力图绘制过程。 这里采用 Nightmare （一个浏览器模拟器）渲染页面，并且在页面加载前，注入两个脚 本： 1. heatmap.js：一个绘制热力图的前端 JS 库，提供热力图绘制工具； 2. ${date}-${activity_id}.js：加工上一步中采集到的数据，并用数据初始化热力图工 具示例。 heatmap.js 是一个非常好用的前端热力图绘制工具，有丰富的参数进行配置，有兴趣可 以看下源码。绘制工具需要提供 point 数据，这就是第2 个脚本做的事： 1 var items = ${JSON.stringify(list)}; 2 var heatData = { 3 data: [], 4 min : 0, 5 max : 25, 6 }; 7 8 /* 9 item[0]: X 10 item[1]: Y 11 item[2]: screenWidth 12 item[3]: screenHeight 13 */ 14 for (var i = 0; i items.length; i++) { 15 var item = items[i