阅读 1023

一个前端埋点任务引发的思考

前言

最近接到一项任务,需要给组里面的前端项目进行埋点,上报 PV 数据给别的项目使用。由于以前没有接触过前端埋点,所以中间绕了一些弯路,但最后还是顺利完成了。整个过程下来,对前端埋点也有了一点简单的思考。

什么是前端埋点

前端埋点是实现前端数据监控的一种方式,通过前端埋点,我们可以获取并跟踪用户在产品上的使用情况,在后台对上报数据进行分析,从而对产品进行优化改进,达到更好的效益。

埋点方式

埋点方式有以下几种:

  1. 全埋点
  2. 可视化埋点
  3. 手动埋点

在工作中,笔者用的是手动埋点,也就是在需要埋点的业务代码中添加数据上报处理。

如何准确上报

如何做到准确上报?需要注意的点如下:

明确上报规则

  1. 多产品区分,需要事先约定对应的渠道号或产品号为唯一标识,方便后台区分上报数据。
  2. 生产、测试环境区分,也是通过字段标识来区分。
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

<script type="text/javascript" id="report_script_tag"></script>
<script>
    report_script_tag.src = window.location.protocol.indexOf('https' === -1) ?
                            "http://xxxxx.js" : "https://xxxx.js";
</script>
复制代码

window.location.protocol 代表当前 url 所使用的协议。

使用相对协议处理

<script type="text/javascript" src="//xxxx.js"></script>
复制代码

相对协议就是将 URL 的协议(http、https)去掉,只保留 // 及后面的内容。使用了 https 协议的网站,在请求使用相对协议的文件时,会自动补上 https 前缀,所以,可以正确加载相应的 js 文件。

参考