ウェブサイトは熱力図の技術をクリックして実現します

一、ユーザーのクリック行為を捕捉する
この部分は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>

画面解像度を記録するのは、クリック座標を修正する必要がある場合があるからです.たとえば、中央に表示される一定幅のページは、同じ位置の異なる解像度での座標が異なり、画像をレンダリングする場合、座標は1つの解像度を基準に修正する必要があります.また、ユーザーがスクロールバーをドラッグしている場合は、記録すべきではありません.
二、分析クライアントクリックログ
クライアントは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 "
";
}

データの永続化については、MongoDBまたは他のものを使用します.
三、ログ分析結果を用いて画像をレンダリングする
Imagickを例にとると、コードは以下の通りです.

<?php
 
$coordinates = array();
 
for ($i = 0; $i < 1000; $i++) {
    $coordinates[] = array(rand($i, 1000), rand($i, 1000));
}
 
$max_repeat = max(
    array_count_values(
        array_map(function($v) { return "{$v[0]}x{$v[1]}"; }, $coordinates)
    )
);
 
$opacity = 1 - 1 / $max_repeat;
 
$heatmap_image = new Imagick();
 
$heatmap_image->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の2つのピクチャが使用されている.実際に適用する場合、クリック数が非常に大きい場合があります.この場合、すべてのクリックをレンダリングする必要はありません.ランダムサンプリングの戦略をとるべきです.MongoDB持続化を採用すれば、The Random Attributeを参照してください.
注記:コードはimage-tempestを参照してください.
四、熱力図の最終展示
イメージとしては、CSS+Javascriptで生成された画像をWebページに覆い、画像の透明度を調整して統合する効果があります.
ホットスポットは時間とともに変化する可能性があり、ある時間のページと照合できるように、
CutyCaptスクリーンショット.
Heatmapの詳細については、
How to make heat maps
The definitive heatmap
Heatmapは複雑な技術ではありませんが、関連する面が煩雑で、本稿が役に立つことを願っています.
オープンソース熱力図プログラム推奨:clickheat
clickheatに基づいて開発されたHeatmap plugin for Piwik:http://dev.piwik.org/trac/ticket/73
別のマウスクリック追跡オープンソースプログラム:http://code.google.com/p/smt2/
 
译文:ウェブサイトは热力図の技术をクリックして実现します.http://www.chinakdd.com/article-125829.html.2013-05-17