Vue遇上Analytics

落日映苍穹つ 2022-10-01 08:54 202阅读 0赞

在"大数据"背景下, Analytics 这类分析系统在项目中扮演着很重要的角色.  
笔者这次主要 以 vue 配上 Google Analytics 做案例演示如何 在项目中做分析记录.

## 分析系统: ##

笔者在项目中添加了 Google Analytics 分析大致快满一年了.其实一直并没有太关注这方面.但是年末项目要计划2019年"重构计划".专门花了一些时间看了一下分析数据. 不愧是互联网大佬. 分析数据栏目众多.数据也相当丰富.相当一部分 "重构清单"都参考了这些数据. 笔者这里也是**极力**推荐大家在项目中使用分析系统.稍具规模的项目在沉淀一段时间之后都能提供相当有价值的参考数据来做预测依据. 笔者知道的有 Google Analytics 和 GrowingIO . Facebook Analytics这些. 就分析系统的挑选 大家可以根据项目的实际需要.

*  analytics.js : 面向国外项目. 免费. 数据记录相当全面.
 *  gtag.js : Google Analytics的下一代产品.analytics.js是专注用户跟踪.而gtag的设计是面向Google Marketing Platform旗下的所有产品.包括 Google ADs. Google TagManager等.可以一次配置多款Google产品.
 *  GrowingIO : 国内的一家分析产品.公司有项目在使用.'傻瓜式'配置.很多产品喜欢用.带热点图. (笔者认为这种远端配置跟踪热点这种方案使得页面要不断给远端定时发送数据.有点"使用过度")
 *  Facebook Analytics : 如果你项目创建了Facebook 开发者用户.还是建议你在项目中去使用它.FB的用户流量相当大. Facebook Analytics 还能帮你追溯到一些用户的基础数据.有利于项目 就人群划分上做出一些决策.

--------------------

## 自定义数据字段: ##

分析系统的'跟踪器'会自动把用户的一些操作发送到操作系统中.但是一般的PV/UV/UA 这些比较基础的数据并不太能满足产品的野心. 分析系统本身也有提供很多 API 能够让我们充分利用起来.  
这里主要介绍笔者在项目中如何用到的几个 API : 'fields' , 'event', 'timing','exception', 'social', 'ecommerce'

#### fields ####

Vue.use(VueAnalytics, {
      id: 'UA-xxx',
      checkDuplicatedScript: true,
      router,
      autoTracking: {
        exception: true,
        shouldRouterUpdate (to, from) {
          // next route path is not the same as the previous
          return to.path !== from.path
        }
      },
      // 字段跟踪
      fields: {
        version: 'v1.2.4'
      },
      //...
    })
    复制代码

'version' 字段用于给用户观察 不同 版本所带来的数据差异

#### event/timing/exception ####

/**
     * @argument { category<String>, action<String>, label<String>, value<Number>}
     * @description 分类, 动作, 标签, 价值(这里不做事件的价值衡量)
     */
    targetEvents (){
      this.$ga.event(...arguments)
    }
    
    // vuex
    export default {
      namespaced: true,
      state:{
        // ...
        api: {
          submit: 'api/v1/submit'
        }
      },
      actions: {
        async submit({state, rootState}, params){
          const t0 = performance.now();
          const {data, code ,info} = await http.post(state.api.submit, params);
          const t1 = performance.now();
          time(state.api.submit, 
               `${navigator.connection.type}
              |${navigator.connection.effectiveType}
              |${navigator.connection.downlink}
              |${navigator.connection.rtt}`,
               t1 - t0, 
               rootState.user.cid);
          event(state.api.submit, info, rootState.user.cid);
          return data;
        },
      }
    }
    
    // http.js
    function checkStatus(response) {
      if (response.status >= 200 && response.status < 300) {
        return response;
      }
    
      const error = new Error(response.statusText);
      exception(error);
      error.response = response;
      throw error;
    }
    export default {
      get: async (url, params, option) =>
        await fetch(`${url}?${params ? new URLSearchParams(params).toSting() : ''}`, {
          ...options,
          ...option
        }).then(res => res.json()).catch(checkStatus),
      post: async (url, body, option) =>
        await fetch(url, {
          ...options,
          ...option,
          method: 'POST', body
        }).then(res => res.json()).catch(checkStatus)
    }
    复制代码

*  Event : 主要用于记录用户重要操作. 通常只用于记录 POST 接口的提交状况. 这里主要记录三个维度的数据:\[目标接口,服务器提供的信息,目标用户\].
 *  Timing : 主要用于记录用户接口操作耗时. 这种计时器用在了所有的接口上. 我这里是记录了四个维度数据,分别是: \[目标接口, 网络信息, 接口耗时, 目标用户\].
 *  exception : 接口错误记录

Event 结合 Timing 可以让测试或者产品能够观察到某个 cid 用户每日的特定动作操作状况

#### social ####

this.$ga.social('Facebook','Share',`https://www.test.com/?cid=${user.cid}`)
    复制代码

social主要记录用户在社交平台上的分享事件.

#### ecommerce ####

*  addItem
 *  addTransaction
 *  addProduct
 *  addImpression
 *  setAction
 *  addPromo
 *  send

电商专用API.主要记录 添加商品/交易/收藏/评价等动作记录.并没有机会用上.不过用法大体一致.

--------------------

计时器报表

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>标签</th> 
   <th>变量</th> 
   <th>计时</th> 
   <th>采样数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>api/v1/submit</td> 
   <td>cidA</td> 
   <td>wifi:3g:200</td> 
   <td>0.3</td> 
   <td>259</td> 
  </tr> 
  <tr> 
   <td>api/v2/submit</td> 
   <td>cidB</td> 
   <td>wifi:4g:225</td> 
   <td>0.2</td> 
   <td>124</td> 
  </tr> 
  <tr> 
   <td>api/v1/xxxx</td> 
   <td>cidC</td> 
   <td>wifi:4g:225</td> 
   <td>0.6</td> 
   <td>122</td> 
  </tr> 
  <tr> 
   <td>api/v1/xxxxx</td> 
   <td>cidD</td> 
   <td>wifi:4g:225</td> 
   <td>0.4</td> 
   <td>99</td> 
  </tr> 
 </tbody> 
</table>

事件报表

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>标签</th> 
   <th>操作</th> 
   <th>总数</th> 
   <th>唯一身份数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>api/v1/submit</td> 
   <td>cidA</td> 
   <td>用户已注册</td> 
   <td>69(6.24%)</td> 
   <td>54(x%)</td> 
  </tr> 
  <tr> 
   <td>api/v2/submit</td> 
   <td>cidB</td> 
   <td>缺少必要参数</td> 
   <td>57(5.21%)</td> 
   <td>32(x%)</td> 
  </tr> 
 </tbody> 
</table>

转载于:https://juejin.im/post/5c3e1e0f51882524b77b7130