行为分析热力图实现.docxVIP

热力图实现 （WORD文档，下载后可编辑修改） 1. 背景 为什么要做这样一个系统，电商网站的一种常用营销手段，就是配置眼花缭乱的活动页展现给用户，有的用来展示各种商品，有的供用户领取优惠券。但屏幕的展示空间有限，如何配置不同的模块才能最大化利用页面空间，一种比较好的方式就是采集用户点击数据，绘制出热力图，供产品、运营和设计同学参考，不断优化模块配置，有效提升点击转化。 2. 系统架构 先将热力图系统进行子功能拆分，可以得到以下几个部分： 用户点击数据采集：包括页面埋点、数据入库； 热力图绘制：包括：数据读取、数据加工、热力图绘制； 数据查询平台：主要是按日期和活动ID查询自定义区域的点击数。 2.1 数据采集 数据采集部分，主要通过事件代理在body上绑定click事件，采集数据主要包括： x：点击事件触发相对于 document 的横坐标，主要取自于event.pageX； y：点击事件触发相对于 document 的纵坐标，主要取自于event.pageY； screenWidth：点击事件触发时屏幕的宽度； screenHeight：点击事件触发时屏幕的高度； moduleType：表示当前元素或其父元素是否是一个fixed元素，如是则取值screen，否则为floor； url：当前活动页面的 URL； date：当前日期。 此处代码不再赘述。获取到数据后，直接通过前端埋点方案进行数据上报，由数据组对数据进行入库。 2.2 热力图绘制 2.2.1 数据读取 现在要绘制给定 URL (通过活动ID拼接而成)活动页的热力图，需要先从数据库中获取该页面所有点击数据： 1 2 3 4 5 6 7 8 9 10 11 12 select ??x, ??y, ??screenWidth as width, ??screenHeight as height ??from heatmap ??where date = ${date} ??and url = ${url} ??and x is not null ??and y is not null ??and cast(cast(y as double) as bigint) = cast(cast(screenHeight as double) as bigint) * ${VIEW_NUM} ??limit ${SAMPLE_NUM} 这里的VIEW_NUM表示热力图截取的屏数，因为有些页面非常长会超过一屏，所以这里增加一个配置。SAMPLE_NUM表示样本数量，因为有的页面每天点击数量会达到几十甚至上百万，如果都绘制在热力图上会造成数据过多，且内存消耗过大。而热力图主要反映一个点击趋势，一个合理的样本数量即可达到效果。 2.2.2 数据加工 热力图绘制 这里将数据加工和热力图绘制放在一起介绍，主要因为加工是在绘制过程中的一个步骤中实现的，所以先介绍热力图绘制过程。 这里采用 Nightmare（一个浏览器模拟器）渲染页面，并且在页面加载前，注入两个脚本： heatmap.js：一个绘制热力图的前端 JS 库，提供热力图绘制工具； ${date}-${activity_id}.js：加工上一步中采集到的数据，并用数据初始化热力图工具示例。 heatmap.js?是一个非常好用的前端热力图绘制工具，有丰富的参数进行配置，有兴趣可以看下源码。绘制工具需要提供 point 数据，这就是第2个脚本做的事： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 var items = ${JSON.stringify(list)}; var heatData = { ??data: [], ??min: 0, ??max: 25, }; ? /* ??item[0]: X ??item[1]: Y ??item[2]: screenWidth ??item[3]: screenHeight */ for (var i = 0; i items.length; i++) { ??var item = items[i]; ??// 数据加工 ??var x = Math.round(item[0] * ${viewWidth} / item[2]); ??var y = Math.round(item[1] * ${viewHeight} / item[3]); ? ??heatData.data.push({ ????x: x, ????y: y, ????value: 1 ??}); } ? var config = { ??contai