Vue赶上Analytics

在"大数据"背景下, 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.主要记录 添加商品/交易/收藏/评价等动做记录.并无机会用上.不过用法大致一致.

---

计时器报表

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

事件报表

类型	标签	操做	总数	惟一身份数
api/v1/submit	cidA	用户已注册	69(6.24%)	54(x%)
api/v2/submit	cidB	缺乏必要参数	57(5.21%)	32(x%)