Vue遇上Analytics

周公來發表於2019-01-16
Vue

在"大資料"背景下, 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%)

相關文章