程序员必备小知识：埋点

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

埋点 大家肯定都听过，但究竟什么是埋点？ 它的目的是什么？前端如何埋点？后端如何配合？这些问题相信很多人都说不上来，接下来，我们来看看 到底如何实现 埋点功能。

1.什么是埋点，它的目的是什么

数据埋点，即统计用户操作数据，例如页面曝光PV，用户点击量等等，以便获取用户基本信息、行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化的方向。

2.埋点原理

实现原理：每次用户操作(打开页面、点击按钮) 向服务器发送一个请求，由服务器统计相关数据并保存处理。

3.前端如何埋点

3.1 可直接引用第三方SDK实现，如某盟、某策等，他们的功能更完善，数据统计场景更丰富，当然，有的可能会收费；

3.2 自己手撸，简单粗暴： 说到 发送请求，最先想到的就是 Ajax，但是这样比较麻烦，我们采取另外一种方式：image 标签的 src 属性

手撸代码如下：

function send(options, url) {
    var arr = [];
    for (var key in options) {
        if (options.hasOwnProperty(key)) {
            arr.push(encodeURIComponent(key) + '=' + encodeURIComponent(options[key]));
        }
    }
    var image = new Image(1, 1);
    image.src = url + '?' + arr.join('&');
    image.onload = function () {
        image = null;
    }
    image.onerror = function () {
        image = null;
    }
}

使用方式：

let options = { // 测试数据
    from: '张三',
    uid: 111111,
    type: 1
}

send(options, 'xxxxxx'); // xxxxxx 为服务器地址

然后，在服务端，接收图片src(上文中的xxxxxx)发出的请求，就能获取拼接在url ?后面的参数，来做对应的埋点逻辑