热点图的深入分析(1)

文章目录
  1. 啥是热点图(热力图)?
  2. 热点图展示需要哪些数据?
  3. 收集用户行为
    1. 网页增加监听事件
    2. 获得X,Y的点击坐标
    3. 获得具体的鼠标动作
    4. 获得客户端的分辨率
    5. 获得浏览器的类型
    6. 将数据传送给服务端
  4. 前端利用heatmap.js做展现

啥是热点图(热力图)?

我们在站长统计里、百度统计、谷歌统计等纵多统计系统中会发现这个功能,它叫 clickmap或者heatmap。
说简单点就是收集用户的点击行为,然后用不同深度不同颜色将用户点击的行为展现出来。于是我们看到如下图例(来自于百度的截图)

热点图展示需要哪些数据?

看完上面的示例图后,第一想法就是这些颜色肯定是一个一个点构成的,因此我们需要这些点的坐标,以及这个点的权重值。X,Y,VALUE 三项参数,借助于 heatmap.js 这个热力图渲染插件即可完成图片的渲染,heatmap.js 是一个开源,轻量级基于canvas的绘图类,详细我就不多说了,大家移步至相关介绍:传送门

收集用户行为

有了需求,我们需要收集用户的行为,例如用户点击的坐标、客户端的分辨率、浏览器的类型、鼠标左键,右键,还是滑轮点击?需要获得这些基本信息以方便于我们后面的统计,接下来我就简要说下核心代码。

网页增加监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function addEvtListener(obj, evtName, f) {
/* FF */
if (document.addEventListener) {
if (obj) {
obj.addEventListener(evtName, f, false);
}
else {
addEventListener(evtName, f, false);
}
}
/* IE */
else if (attachEvent) {
if (obj) {
obj.attachEvent('on' + evtName, f);
}
else {
attachEvent('on' + evtName, f);
}
}
}
addEvtListener(document, 'mousedown', catchClickHeat);

上面 为整个document传入了 鼠标点击事件,并传入一个回调处理方法 catchClickHeat

获得X,Y的点击坐标

我们需要先拿到窗口的事件对象
function catchClickHeat(e){} 自身传过来的

1
2
3
if (!e) {
e = window.event;
}

在此之前我们,我们先要取得DOM对象文档的documentElement或者document.body ,用来后面计算滚动条滚动后的高度,从而获取实际x,y的坐标值。

1
var clickHeatDocument = document.documentElement && document.documentElement.clientHeight !== 0 ? document.documentElement : document.body;

然后我们需要获取滚动条的滚动高度和宽度

1
2
var scrollx = window.pageXOffset || clickHeatDocument.scrollLeft;
var scrolly = window.pageYOffset || clickHeatDocument.scrollTop;

最后我们就能拿到最终点击的x,y

1
2
var x=e.clientX+scrollx;
var y=e.clientY+scrolly;

获得具体的鼠标动作

这里我们通过代码拿到用户到底是点击了鼠标左键、右键、还是滚轮?

1
2
var c = e.which || e.button;
// c有三个值,1表示左键点击,2表示滚轮点击,3表示右键点击

获得客户端的分辨率

1
2
var w = clickHeatDocument.clientWidth || window.innerWidth;
var h = clickHeatDocument.clientHeight || window.innerHeight;

获得浏览器的类型

我们简要将浏览器类型设为如下几种,其余的归为其他类型即unknown

1
2
3
4
5
6
7
8
9
var b = navigator.userAgent ? navigator.userAgent.toLowerCase().replace(/-/g, '') : '';
var browsers = ['chrome', 'firefox', 'safari', 'msie', 'opera'];
var clickHeatBrowser = 'unknown';
for (i = 0; i < browsers.length; i += 1) {
if (b.indexOf(browsers[i]) !== -1) {
clickHeatBrowser = browsers[i];
break;
}
}

将数据传送给服务端

这里有2种方式来收集我们传输的数据。
第一种,采取服务端日志的形式存储数据,原理就是随便创建一个请求发送至服务端,服务器会记录日志,到时候用程序拿到分析日志就能获取想要的数据,这种适合于高并发,数据量大的情况。
第二种,采取发送请求至动态网页,例如 click.aspx?x=123&y=456 ,然后在click页面获取参数,将参数存储与数据库或者本地文件中。

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
var xmlhttp;
var clickHeatServer="/click.aspx";
var params="x=123&y=456&w=1028&c=1&b=chrome";
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (er) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (oc) {
xmlhttp = null;
}
}
if (!xmlhttp && typeof (XMLHttpRequest) !== 'undefined') {
xmlhttp = new XMLHttpRequest();
}
if (xmlhttp) {
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status === 200) {
//回调处理
}
else if (xmlhttp.status === 404) {
//回调处理
}
else {
//回调处理
}
}
};
xmlhttp.open('GET', clickHeatServer + '?' + params, true);
xmlhttp.send(null);
sent = true;
}

前端利用heatmap.js做展现

我想这是本文最核心的部分,感觉需要一整篇来讲解,我想放到下篇文章讲解,

下一篇:热点图深入分析2

QQ群:86031665