埋点是什么意思_从零开始写一个前端数据埋点工具（BuryingPoint）

背景

互联网发展到现在，数据的重要性已经不需要再多的强调，那如何做好数据搜集的工作则是每一家公司都要面临的问题。

数据搜集可以有不同的选择。有的公司选择使用第三方统计的SDK，比如友盟、神策等；有的公司选择自己在产品中注入统计代码，搭建查询系统，当然后者的代价会比较大，但优点就是更贴近公司的业务。

数据埋点技术

代码埋点

代码埋点就是在需要数据统计的地方植入数据上报的代码，统计用户行为。

优点：可以非常精确的选择什么时候发送数据。缺点：维护代价较大，每一次更新都要对埋点代码进行维护，否则大概率搜集不到旧版本的数据。

可视化埋点

使用可视化交互手段代替写代码，把核心代码和配置、资源分开，每次打开都通过网络更新配置和资源。

优点：解决埋点代价大和维护代价大的问题。缺点：覆盖的功能有限，不是所有的控件都可以通过这种方案定制。

无埋点

也就是全埋点的意思，无埋点尽可能收集所有控件的操作数据，然后再在系统里进行数据分析。

优点：对页面所有元素进行埋点，可以获取页面元素点击概率，并进一步分析。缺点：数据传输和服务器压力相对较大。

构建思路与核心代码

依然是先从一个思维导图开始。

自执行方法

确保埋点工具可以即插即用，只要加载完毕就可以自动上报部分数据。具体实现方式如下：

(function (win, doc) {
    
    var BP = {
    
        // 开放接口代码
    };

    win.BP = BP;
})(window, document);

这样在js文件加载完毕时，就可以直接在全局使用BP来调用埋点工具的方法了。

埋点方式

使用代码埋点的方式来上报数据，在工具中定义：

    var BP = {
     
        send: function () {
     
            // 发送数据方法
        }
    };

在页面的关键操作方法中通过BP.send()调用。

同时，考虑到服务端渲染的情况，页面可能直接由后端输出。后端开发者也可以直接在标签中添加属性bp-data，来实现用户有交互操作时进行数据上报。

    /**
     * 埋点，捕获带有bp-data属性的节点点击事件
     */
    var buryingPoint = function () {
    
        var attr = 'bp-data';
        var evtType = utils.mobile ? 'touchstart' : 'mous