前端项目接入埋点系统的优化

1、基本概述

   根据产品的需求，会针对一些页面做PV/UV的统计。埋点的实质就是向埋点服务器发送请求，埋点服务器埋点的数据做统计。正常情况下，我们需要在埋点的页面里添加埋点代码。而埋点的代码与实际的业务代码，是没有任何关系，往往会造成大量恶心的代码掺杂在业务代码中。

   埋点接入时，首先通过script标签，引入埋点的js文件，具体参考对应的埋点系统的api文档。针对具体的场景加入埋单代码，以我司自研埋点系统为例，埋点代码如下：

BossService.trace(moduleName , json字符串)；

   如果你接入的是百度统计等，也需要在埋点的地方添加如下代码:

_hmt.push(['_trackPageview', pageURL]);

   其本质都是需要在需要埋点的地方添加与业务无关的埋点代码。针对以上问题，在dva框架中按照如下方式改进，具体思路如下：

   1、构造一个需要埋点的页面集合traceMapping，该集合中包含埋点页面的路由，以及需要埋点的页面数据（通常是对应埋点系统接口的moduleName）；

   2、通过全局的model，监听页面路由的变化，当当前路由在traceMapping中能找到时，则说明当前路由需要埋点。

   本质上来讲，就是对比当前路由是否是埋点集合中的数据，如果是则添加埋点数据。该方法同样适用于Vue、微信小程序。在Vue中，可以通过App.vue中的watch可以监听路由变化；在微信小程序中也可以通过手动添加监听器，在app.js中对路由的变化的做监听（https://blog.csdn.net/weixin_30877181/article/details/101731135）

2、核心代码分析

  埋点集合

// traceMapping.js
export const traceMapping = {
   '/about/version': { content: '关于传化优化-版本记录' },
   '/finance/billManage/list': { content: '账单管理-页面访问情况' },
   '/finance/invoice/list': { content: '开票管理-页面访问情况' },
   '/': { content: '首页-页面访问情况' },
   '/messageCenter/list': { content: '油品管理-页面访问情况' },
};

  在全局的Layout中添加如下代码：：

//layout.js
componentDidMount() {
   this.props.history.listen(({ pathname }) => {
      if (traceMapping[pathname]){
         window.BossService && window.BossService.trace(traceMapping[pathname].content);
      }
   });
}

  优点：

  1、 解耦业务与埋点代码，埋点代码window.BossService.trace集中处理；

  2、 有利于后期扩展，当埋点页面增加时，只需要添加对应的页面路由和埋点的内容。

  当前方法只能优化PV/UV的埋点代码，针对按钮操作的埋点监听，还是需要手动添加到具体的业务代码中。