全埋点技术-热力图

1概述

网站热力图以特殊高亮的形式显示访客热衷的页面区域，能够让网站制作者直接清晰的了解网站各个位置被用户点击的频率。

经过调研，网站热力图主要有两种形式。一种是通过不同的颜色来标记网站页面不同位置的点击频率。另一种是通过给页面元素加边框，通过的边框的粗细来反映元素的点击频率。

2热力图技术之一 heatmap.js

一种比较成熟的热图技术heatmap.js，通过不同的颜色来标记不同位置(页面上的坐标点)的访问频率。

效果图如下

image.png

部分代码实现

// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案
 var heatmapInstance = h337.create({
     container: document.querySelector('#heatmap'),
 });
 //构建一些随机数据点
 var points = [];
 var max = 0;
 var width = document.body.clientWidth;
 var height = document.body.clientHeight;
 var len = 300;
 while (len--) {
     var val = Math.floor(Math.random()*100);
     max = Math.max(max, val);
     var point = {
        x: Math.floor(Math.random()*width),
        y: Math.floor(Math.random()*height),
        value: val
    };
     points.push(point);
 }
    var data = {
    max: max,
    data: points
};
 //因为data是一组数据
heatmapInstance.setData(data); //数据绑定还可以使用

参考链接

官网地址https://www.patrick-wied.at/static/heatmapjs/

git地址https://github.com/pa7/heatmap.js

使用demo参考 https://blog.csdn.net/Jermyo/article/details/110561098

3热力图技术之二 事件监听

给当前页面的window对象添加一个事件监听器。

在用户点击的时候，上报被点击元素的信息(主要包括url和element path等)。

在展示的时候，计算每个节点的点击PV和UV，并通过元素outline的宽度展示元素的点击量，当鼠标移动到某个元素上时，会出现tip提示框，显示具体的PV和UV数据

效果图如下

image.png

部分代码实现

window.addEventListener("click", function(e){
    console.log(e.target.tagName);
    report( url, element_path )
});

function _x(STR_XPATH) {
    var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
    var xnodes = [];
    var xres;
    while (xres = xresult.iterateNext()) {
        xnodes.push(xres);
    }
    return xnodes;
}

参考 https://segmentfault.com/q/1010000005686667