为自己的网站实现Heatmap

EltonZheng

发布于 2021-01-26 10:27:23

4820

发布于 2021-01-26 10:27:23

文章被收录于专栏：Elton的技术分享博客Elton的技术分享博客

Heatmap，已经有网站提供此类服务，如：clickdensity，clicktale，crazyegg等等，甚至还有类似clickheat项目提供源代码供你直接使用。

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

捕捉点击

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

<script>

jQuery(document).ready(function() {
    $(document).mousedown(function(e) {
        if (e.clientX &gt;= $(window).width() || e.clientY &gt;= $(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=...&amp;page_y=...&amp;screen_width=...&amp;screen_height=...

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

#!/usr/bin/awk -f

BEGIN {
    FS="&amp;";
}

NF == 4 {
    param["page_x"]        = "0";
    param["page_y"]        = "0";
    param["screen_width"]  = "0";
    param["screen_height"] = "0";

    split($0, query, "&amp;");

    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为例，代码如下：

<?php

$coordinates = array();

for ($i = 0; $i &lt; 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-&gt;newImage(1000, 1000, new ImagickPixel('white'));
$heatmap_image-&gt;setImageFormat('png');

$plot_image = new Imagick('plot.png');

$iterator = $plot_image-&gt;getPixelIterator();
foreach($iterator as $row) {
    foreach ($row as $pixel) {
        $colors = $pixel-&gt;getColor();
        foreach (array('r', 'g', 'b') as $channel) {
            $color = $colors[$channel];
            if ($color !== 255) {
                $colors[$channel] = $color + ((255 - $color) * $opacity);
            }
        }

        $pixel-&gt;setColor("rgb({$colors['r']},{$colors['g']},{$colors['b']})");
    }

    $iterator-&gt;syncIterator();
}

$plot_size = $plot_image-&gt;getImageGeometry();

foreach ($coordinates as $pair) {
    $heatmap_image-&gt;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-&gt;clutImage($color_image);

$heatmap_image-&gt;writeImage('heatmap.png');

?>

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

备注：代码参考image-tempest。