无埋点

无埋点

无埋点并不是没有任何埋点，所谓无只是不需要工程师在业务代码里面插入侵入式的代码。只需要简单的加载了一段定义好的SDK代码，技术门槛更低，使用与部署也简单，避免了需求变更，埋点错误导致的重新埋点。

第三方SDK

可以直接接入百度全埋点

 <script>
      var _hmt = _hmt || []
      ;(function() {
        var hm = document.createElement('script')
        hm.src =
          'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduCode %>'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>

无痕埋点代码实现

原理很简单，这里只讲click的无痕埋点原理

当用户点击了页面上某一个元素

我们要把当前元素到body之间整个dom的路径记录下来，作为这个元素的唯一标识，我们称之为domPath

这个domPath不仅是这个元素唯一标识

还可以通过document.querySelector(domPath)去唯一选择和定位到这个元素

当用户点击一次这个元素，就会将埋点数据上传到服务器

服务器上这个domPath对应的统计数据加一

    document.body.addEventListener('click',  (event) => {
        const eventFix = getEvent(event);
        if (!eventFix) {
            return;
        }
        this._handleEvent(eventFix);
    }, false)