网站点击热力图的技术实现

15 sec read

一、捕捉用户点击行为

这部分需要Javascript来实现。为了不陷入浏览器兼容的泥潭,可以选择JQuery:

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

 二、分析客户端点击日志

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

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

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

至于数据的持久化,是使用MongoDB或者别的。

 三、使用日志分析结果渲染图片

以Imagick为例,代码如下:

代码虽然很多,但并不复杂,其中用到了两个图片,分别是:plot.pngclut.png。实际应用时,有时候点击量会非常大,此时没有必要把所有的点击都渲染出来,而应该采取随机取样的策略,如果采用MongoDB持久化的话,可以参考:The Random Attribute

备注:代码参考image-tempest

四、热力图的最终展现

形象一点来说,其实就是通过CSS+Javascript把生成的图片盖在网页上,并调节图片透明度来达到合二为一的效果。

热点可能会随着时间改变,为了能对照某个时间的网页,可以使用CutyCapt截屏。

有关Heatmap的详细介绍,还可以参考

Heatmap虽然不是很复杂的技术,但涉及的方面却很繁杂,希望本文能帮到大家。

开源热力图程序推荐:clickheat

基于clickheat开发的Heatmap plugin for Piwik:http://dev.piwik.org/trac/ticket/73

另外一块鼠标点击跟踪开源程序:http://code.google.com/p/smt2/

原文链接:http://huoding.com/2011/01/04/39

打赏作者
微信支付标点符 wechat qrcode
支付宝标点符 alipay qrcode

PySpider框架简介及安装

PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI。采用Python语言编写,分布式架构,支持多种数据库后端,强大的WebUI支持脚本编辑器,任务监视器,项目管理器以及结果查看器。
1 min read

Windows安装Docker记录

Docker是一种容器技术,可以将应用和环境等进行打包,形成一个独立的、类似于iOS的APP形式的应用。这个应用可以直接分发到任意一个支持Docker的环境中,通过简单的命令即可启动运行。Docker是一种最流行的容器化实现方案,和虚拟化技术类似,它极大的方便 ...
22 sec read

Windows下安装Tesserocr

在爬虫过程中,经常会遇到各种验证码,大多数验证码是图形验证码,先前的文章中有介绍到破解图形验证码的原理。最简单的破击验证码的方式是使用OCR。
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *