最近接到一项任务，需要给组里面所有的前端项目进行前端埋点，上报 PV 数据给别的项目使用。由于以前没有接触过前端埋点，所以中间绕了一些弯路，但最后还是顺利完成了。整个过程下来，对前端埋点也有了一点简单的思考。
什么是前端埋点
前端埋点是实现前端数据监控的一种方式，通过前端埋点，我们可以获取并跟踪用户在产品上的使用情况，在后台对上报数据进行分析，从而对产品进行优化改进，达到更好的效益。
埋点方式
埋点方式有以下几种：
全埋点
可视化埋点
手动埋点
在工作中，笔者用的是手动埋点，也就是在需要埋点的业务代码中添加数据上报处理。
如何准确上报
如何做到准确上报？需要注意的点如下：
明确上报规则
多产品区分，需要事先约定对应的渠道号或产品号为唯一标识，方便后台区分上报数据。
生产、测试环境区分，也是通过字段标识来区分。
ReportConfig.upload({
CHANNEL_ID: 1, //渠道号标识，0 为 xxx, 1 为 xxx
ENVIRONMENT: 0 //环境区分标识，0 为测试环境，1 为正式环境
});
复制代码对齐上报口径
对齐上报口径这一点比较好理解，也就是确认 What，When，How 这个三个问题。在产品的哪些地方，什么时候，怎么上报。
PS：前期的口径对齐比较关键，因为上报逻辑是糅合在项目工程代码中的，所以确认清楚，非常重要。
注意点
代码兼容性处理
尽量使用 ES5 语法，如 ES6 中的模板字符串和 let 关键字等，建议不要使用。
笔者在埋点时也遇到这个问题，如同一个网页在微信浏览器访问时，上报数据出现问题(上报逻辑中使用了 ES6 语法中的模板字符串)，最后问题定位是微信浏览器内核是 X5 内核，不支持 ES6 语法，导致了在移动微信端访问网页时数据上报出现问题。
上报时机
笔者在项目中的上报时机是用户进入页面或切换模块上报。
老项目
在老项目中，如 jQuery 等实现的项目中，通常是在页面的 onload 事件中添加的。
window.onload = function() {
ReportConfig.upload({
CHANNEL_ID: 1, //渠道号标识，0 为 xxx, 1 为 xxx
ENVIRONMENT: 0 //环境区分标识，0 为测试环境，1 为正式环境
url: document.documentURL
});
}
复制代码
在 onload 事件中上报是有原因的，因为引用的 js sdk 是异步加载的，而 onload 事件是等页面所有资源(如 js、css 等)加载好才会触发。此时，上报不会出现空引用等错误，是一个比较合理的时机。
新项目
在使用 vue 开发的单页面应用中，模块的切换通常是对应不同的 route，所以我们在路由守卫钩子 beforeEach 或者 afterEach 中添加即可。
router.afterEach((to, from) => {
ReportConfig.upload({
CHANNEL_ID: 1, //渠道号标识，0 为 xxx, 1 为 xxx
ENVIRONMENT: 0 //环境区分标识，0 为测试环境，1 为正式环境
url: http://xxxxx#{to.path}
});
});
复制代码根据协议加载不同 js sdk
同一个网页会通过不同的域名来访问，不同域名协议也会存在不一致的情况，我们需要根据不用协议动态加载对应的 js。
复制代码
window.location.protocol 代表当前 url 所使用的协议。
