行为分析热力图实现

《行为分析热力图实现》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、热力图实现（WORD下娠可鑛修改）1.背景为什么要做这样一个系统，电商网站的一种常用营销手段，就是配置眼花缭乱的活动页展现给用户，有的用来展示各种商品，有的供用户领取优惠券。但屏幕的展示空间有限，如何配置不同的模块才能最大化利用页面空间，一种比较好的方式就是采集用户点击数据，绘制出热力图，供产品、运营和设计同学参考，不断优化模块配置，有效提升点击转化。2.先将热力图系统进行子功能拆分，可以得到以下几个部分：1.用户点击数据采集：包扌舌页面埋点、数据入库；2.热力图绘制：包括：数据读取、数据加工、热力图绘制；3.数据

2、查询平台：主要是按口期和活动ID查询自定义区域的点击数。数据采集部分，主要通过事件代理在body上绑定click事件，采集数据主要包括:1.x：点击事件触发相对于document的横坐标，主要取自于event.pageX；2.y：点击事件触发相对于document的纵坐标，主要収自于event.pageY；3.screenWidth：点击事件触发时屏幕的宽度；4.screenHeight:点击事件触发时屏幕的高度；5.moduleType：表示当前元索或其父元索是否是一个fixed元素，如是则取值screen,否则

3、为floor；6.url：当前活动页面的URL；7.date：当前口期。此处代码不再赘述。获取到数据后，直接通过前端埋点方案进行数据上报，由数据组对数据进行入库。2.2热力现在要绘制给定URL(通过活动TD拼接而成)活动页的热力图，需要先从数据库屮获取该页面所有点击数据：select1x,2screenWidthaswidth,4screenHeightasheight5fromheatmap6,,wheredate=J$(datej，7andurl='${url}>8andxisnotnull9andyisnot

4、null10andcast(cast(yasdouble)asbigint)<=cast(cast(sereenHeightasdouble)asbigint)*${VIEW_NUM}12limit${SAMPLENUM}这里的VIEW_NUM表示热力图截取的屏数，因为有些页面非常长会超过一屏，所以这里增加一个配置。SAMPLE_NUM表示样本数量，因为有的页面每天点击数量会达到儿十甚至上百万，如果都绘制在热力图上会造成数据过多，且内存消耗过大。而热力图主要反映一个点击趋势,一个合理的样本数量即可达到效果。2.2.

5、2&热力这里将数据加工和热力图绘制放在一起介绍，主要因为加工是在绘制过程中的一个步骤中实现的，所以先介绍热力图绘制过程。这里采用Nightmare（一个浏览器模拟器）渲染页面，并且在页面加载前，注入两个脚本:1.heatmap.js：—个绘制热力图的前端JS库，提供热力图绘制工具；2.$(date}-$(activityid},js：加工上一步中釆集到的数据,并用数据初始化热力图工具示例。hcalmap.js是一个非常好用的前端热力图绘制工具，有丰富的参数进行趾置，有兴趣可以看下源码。绘制工具需要提供point数据

6、，这就是第2个脚本做的事：1varitems=${JSON.stringify(1ist)};2varheatData二{3data:[],4min:0,5max:25,6};77/*8item[0]:X9item[l]:Y10item[2]:screenWidth11item[3]:screenlleight13*/14for(vari=0;i

7、tem[2]);18vary=Math,round(item[l]*${viewHeight}/item[3]);1919heatData.data,push({20x:x,21y:y,22value:123})；14}2615varconfig二{16container:document.getElementById(，container，),17radius:5,18maxOpacity:.5,19minOpacity:0,14blur:.75,33};3435varheatmapTnstance=h337.c

8、reate(config);36heatmapTnstance.setData(heatData);其'Inightmare2•viewport(viewWidth,viewHeight)3•goto(url)4•inject(‘css',I/Iib/heatmap-fix.css)5•inject('jsJ,'・/Iib/heatmap・js，)6.inj