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%)