一、捕捉用戶點(diǎn)擊行為

這部分需要Javascript來實(shí)現(xiàn)。為了不陷入瀏覽器兼容的泥潭，可以選擇JQuery：

之所以要記錄屏幕分辨率是因?yàn)橛械那闆r下需要修正點(diǎn)擊坐標(biāo)。比如說，一個(gè)居中顯示的定寬的頁面，其同一個(gè)位置在不同分辨率下的坐標(biāo)是不同的，當(dāng)渲染圖片的時(shí)候，坐標(biāo)需要以一個(gè)分辨率為準(zhǔn)進(jìn)行修正。另外，如果用戶正在拖動(dòng)滾動(dòng)條，是不應(yīng)該記錄的。

二、分析客戶端點(diǎn)擊日志

客戶端使用Ajax通過GET方法觸發(fā)一個(gè)空HTML頁面，如此就會(huì)在服務(wù)端留下日志：

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

不同的日志格式，結(jié)果會(huì)有所不同，這里僅僅以此為例來說明問題，本文采用AWK來解析日志，當(dāng)然你也可以使用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";
}

至于數(shù)據(jù)的持久化，是使用MongoDB或者別的。

三、使用日志分析結(jié)果渲染圖片

以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');

?>

代碼雖然很多，但并不復(fù)雜，其中用到了兩個(gè)圖片，分別是：plot.png和clut.png。實(shí)際應(yīng)用時(shí)，有時(shí)候點(diǎn)擊量會(huì)非常大，此時(shí)沒有必要把所有的點(diǎn)擊都渲染出來，而應(yīng)該采取隨機(jī)取樣的策略，如果采用MongoDB持久化的話，可以參考：The Random Attribute。

備注：代碼參考image-tempest。

四、熱力圖的最終展現(xiàn)

形象一點(diǎn)來說，其實(shí)就是通過CSS+Javascript把生成的圖片蓋在網(wǎng)頁上，并調(diào)節(jié)圖片透明度來達(dá)到合二為一的效果。

有關(guān)Heatmap的詳細(xì)介紹，還可以參考

• How to make heat maps
• The definitive heatmap

Heatmap雖然不是很復(fù)雜的技術(shù)，但涉及的方面卻很繁雜，希望本文能幫到大家。

開源熱力圖程序推薦：clickheat

基于clickheat開發(fā)的Heatmap plugin for Piwik：http://dev.piwik.org/trac/ticket/73

另外一塊鼠標(biāo)點(diǎn)擊跟蹤開源程序：http://code.google.com/p/smt2/