浅谈Heatmap

　　在自然界之中，蛇的眼睛有夜视功能，即便是茫茫黑夜，它也能轻而易举的找到猎物，这是因为任何物体都会辐射热红外，且辐射的高低和温度成正比，由于生命体的体温会明显高于周围环境的温度，所以在蛇眼面前便无处遁形。热红外成像被广泛应用于军事领域，士兵带上能识别热红外的眼镜后能轻而易举的发现藏匿的敌人。

　　热红外成像

　　唠叨了半天，听上去似乎有点跑题了，其实不然，对互联网从业者而言，同样需要有火眼金睛，以便识别网友的喜好，此时的衡量标准是点击，点击越多则表示越喜欢，此技术被称作Heatmap，已经有网站提供此类服务，如：clickdensity，clicktale，crazyegg等等，甚至还有类似clickheat项目提供源代码供你直接使用。

　　不过最灵活的方案莫过于自己搞定，下面大概说说Heatmap的实现：

　　捕捉点击

　　当然，这需要Javascript来实现。为了不陷入浏览器兼容的泥潭，我们选择JQuery：

<script>  
 
jQuery(document).ready(function() {  
    $(document).mousedown(function(e) {  
        if (e.clientX >= $(window).width() || e.clientY >= $(window).height()) {  
            return;  
        }  
 
        $.get("/path/to/a/empty/html/file", {  
            page_x       : e.pageX,  
            page_y       : e.pageY,  
            screen_width : screen.width,  
            screen_height: screen.height  
        });  
    });  
});  
 
</script> 

　　客户端使用Ajax通过GET方法触发一个空HTML页面，当然，还可以更简单点：

<script>  
 
var image = new Image();  
image.src = "...";  
 
</script> 

　　之所以要记录屏幕分辨率是因为有的情况下需要修正点击坐标。比如说，一个居中显示的定宽的页面，其同一个位置在不同分辨率下的坐标是不同的，当渲染图片的时候，坐标需要以一个分辨率为准进行修正。

　　另外，如果用户正在拖动滚动条，是不应该记录的。

　　分析日志

　　客户端使用Ajax通过GET方法触发一个空HTML页面，如此就会在服务端留下日志：

page_x=...&page_y=...&screen_width=...&screen_height=... 

　　不同的日志格式，结果会有所不同，这里仅仅以此为例来说明问题，本文采用AWK来解析日志，当然你也可以使用Perl或别的你熟悉的语言：

#!/usr/bin/awk -f  
 
BEGIN {  
    FS="&";  
}  
 
NF == 4 {  
    param["page_x"]        = "

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!