一、捕捉用戶點擊行為
這部分需要Javascript來實現。為了不陷入瀏覽器兼容的泥潭,可以選擇JQuery:
之所以要記錄屏幕分辨率是因為有的情況下需要修正點擊坐標。比如說,一個居中顯示的定寬的頁面,其同一個位置在不同分辨率下的坐標是不同的,當渲染圖片的時候,坐標需要以一個分辨率為準進行修正。另外,如果用戶正在拖動滾動條,是不應該記錄的。
二、分析客戶端點擊日志
客戶端使用Ajax通過GET方法觸發一個空HTML頁面,如此就會在服務端留下日志:
page_x=...&page_y=...&screen_width=...&screen_height=...
不同的日志格式,結果會有所不同,這里僅僅以此為例來說明問題,本文采用AWK來解析日志,當然你也可以使用Perl或別的你熟悉的語言:
#!/usr/bin/awk -f
BEGIN {
FS="&";
}
NF == 4 {
param["page_x"] = "0";
param["page_y"] = "0";
param["screen_width"] = "0";
param["screen_height"] = "0";
split($0, query, "&");
for (key in query) {
split(query[key], item, "=");
if (item[1] in param) {
param[item[1]] = item[2];
}
}
print "page_x:" , param["page_x"];
print "page_y:" , param["page_y"];
print "screen_width:" , param["screen_width"];
print "screen_height:", param["screen_height"];
print "\n";
}
至于數據的持久化,是使用MongoDB或者別的。
三、使用日志分析結果渲染圖片
以Imagick為例,代碼如下:
newImage(1000, 1000, new ImagickPixel('white'));
$heatmap_image->setImageFormat('png');
$plot_image = new Imagick('plot.png');
$iterator = $plot_image->getPixelIterator();
foreach($iterator as $row) {
foreach ($row as $pixel) {
$colors = $pixel->getColor();
foreach (array('r', 'g', 'b') as $channel) {
$color = $colors[$channel];
if ($color !== 255) {
$colors[$channel] = $color + ((255 - $color) * $opacity);
}
}
$pixel->setColor("rgb({$colors['r']},{$colors['g']},{$colors['b']})");
}
$iterator->syncIterator();
}
$plot_size = $plot_image->getImageGeometry();
foreach ($coordinates as $pair) {
$heatmap_image->compositeImage(
$plot_image,
Imagick::COMPOSITE_MULTIPLY,
$pair[0] - $plot_size['width'] / 2,
$pair[1] - $plot_size['height'] / 2
);
}
$color_image = new Imagick('clut.png');
$heatmap_image->clutImage($color_image);
$heatmap_image->writeImage('heatmap.png');
?>
代碼雖然很多,但并不復雜,其中用到了兩個圖片,分別是:plot.png和clut.png。實際應用時,有時候點擊量會非常大,此時沒有必要把所有的點擊都渲染出來,而應該采取隨機取樣的策略,如果采用MongoDB持久化的話,可以參考:The Random Attribute。
備注:代碼參考image-tempest。
四、熱力圖的最終展現
形象一點來說,其實就是通過CSS+Javascript把生成的圖片蓋在網頁上,并調節圖片透明度來達到合二為一的效果。
有關Heatmap的詳細介紹,還可以參考
Heatmap雖然不是很復雜的技術,但涉及的方面卻很繁雜,希望本文能幫到大家。
開源熱力圖程序推薦:clickheat
基于clickheat開發的Heatmap plugin for Piwik:http://dev.piwik.org/trac/ticket/73
另外一塊鼠標點擊跟蹤開源程序:http://code.google.com/p/smt2/
Copyright@ 2011-2016 版權所有:大連千億科技有限公司 遼ICP備11013762-3號 google網站地圖 百度網站地圖 網站地圖
公司地址:大連市沙河口區中山路692號辰熙星海國際2317 客服電話:0411-39943997 QQ:2088827823 37482752
法律聲明:未經許可,任何模仿本站模板、轉載本站內容等行為者,本站保留追究其法律責任的權利! 隱私權政策聲明