Vue中使用matomo進行訪問流量統計

時間  2019-11-07
標籤 vue 使用 matomo 進行 訪問 流量 統計 简体版
原文   原文鏈接

前言

以前作到了一個頁面及接口訪問流量統計的需求, 而後在網上找了不少帖子,發現有些有的可是寫的都不是很詳細,因此今天就整理了一下vue

正文

  • 第一步 首先天然是引入matomo
npm i vue-matomo
複製代碼
  • 第二步 在main.js中註冊一下matomo
import VueMatomo from 'vue-matomo'
Vue.use(VueMatomo, {
  host: 'http://matomo.na.xyz', // 這裏配置你本身的piwik服務器地址和網站ID
  siteId: 3,//siteId值
  // 根據router自動註冊
  router: router,
  // // 是否須要在發送追蹤信息以前請求許可
  // // 默認false
  requireConsent: false,
  enableLinkTracking: true,
  // // 是否追蹤初始頁面
  // // 默認true
  trackInitialView: false,
  // // 最終的追蹤js文件名
  // // 默認 'piwik'
  trackerFileName: 'matomo',
  debug: false
});
複製代碼

固然這裏也能夠提出一個公共的文件來動態維護你的piwik服務器地址和網站npm

import VueMatomo from 'vue-matomo'
// 動態維護的文件
import baseUrlto from './utils/baseUrlto'

// 這段代碼做用是獲取當前加載的路徑,並去維護文件中數組裏匹配出相應的的集合對象.
let uitem
baseUrlto.map(e => {
  if (document.URL.indexOf(e.environmentUrl) !== -1) {
    uitem = e
  }
})
if (!uitem) {
  uitem = baseUrlto[0]
}
Vue.use(VueMatomo, {
  host: uitem.staUrl, // 這裏是匹配到的地址
  siteId: uitem.staId, //這裏是匹配到的siteId值
  // 根據router自動註冊
  router: router,
  // // 是否須要在發送追蹤信息以前請求許可
  // // 默認false
  requireConsent: false,
  enableLinkTracking: true,
  // // 是否追蹤初始頁面
  // // 默認true
  trackInitialView: false,
  // // 最終的追蹤js文件名
  // // 默認 'piwik'
  trackerFileName: 'matomo',
  debug: false
});
複製代碼

附上baseUrlto的代碼

const statistics = [
// 數組第一項,即爲,當路徑匹配不到時,默認傳送的統計網址,能夠是開發環境下測試統計的地址
  {
    staUrl: '//analytics.baowei-inc.com/', // 統計網址
    staId: '2', // 統計ID
    environmentUrl: '默認'
  },
  {
    staUrl: '//analytics.baowei-inc.com/', // 開發環境統計網址
    staId: '2', // 統計ID
    environmentUrl: 'http://bwcaigou.baowei-inc.com'
  },
  {
    staUrl: '//analytics.baowei-inc.com/', // 生產環境統計網址
    staId: '1', // 統計ID
    environmentUrl: 'http://portal.baowei-inc.com'
  },
  {
    staUrl: '//106.12.95.245:8888/', // 本地環境統計網址
    staId: '2', // 統計ID
    environmentUrl: 'http://localhost:'
  }
]

export default statistics

複製代碼
  • 第三步 ,是在app.vue中監聽路由變化
watch: {
      '$route' () {
        let locationHash = window.location.hash;
        //把路由存在緩存中，此處你能夠console.log看出路由變化
        sessionStorage.setItem("hashLocation",locationHash);
      }
    },
複製代碼
  • 第四步, 而後在每個被跳轉時都須要統計的組件中,添加上一段追蹤信息的代碼,每個頁面組件, 對於反覆使用的子組件不須要添加,彈窗等也不須要,針對的是頁面級的組件,
// 這裏說明一下, this.$matomo是註冊事後,自動會有的, 不須要進行其餘的操做.
 created(){
      const hashLocation= sessionStorage.getItem("hashLocation");//緩存中獲取當前頁面的路由名稱
      const newLocation = hashLocation.split("#/")[1];
      // 注意, 這裏使用全路徑匹配,在hash模式中,由於地址會攜帶#,因此頁面報告中的url須要從新覆蓋一下, 將#去除
      this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);//覆蓋頁面報告的url，能夠自定義頁面url，加上本頁面路由
      // this.$matomo.trackEvent(shopCode,hashLocation);//事件
      this.$matomo.trackPageView(hashLocation);//頁面名稱,能夠自定義頁面名稱
    }
複製代碼

特意說明一下, setCustomUrl的做用是從新設定url,由於在matomo的頁面網址統計那塊中,它是經過url去統計的, 若是不作處理的話, 會自動統計域名後一級目錄爲相同頁面, 也就是說, /#/會被讀取爲一個頁面網址,不處理的話,那麼不管訪問哪一個頁面,都會被統計爲/index頁面.

一級以後的目錄會做爲子目錄被統計api

// 注意, 這裏使用全路徑匹配,在hash模式中,由於地址會攜帶#,因此頁面報告中的url須要從新覆蓋一下, 將#去除
      this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);// 非全路徑
      this.$matomo.setCustomUrl("http://www.baidu.com"+"/"+newLocation); // 全路徑
      //覆蓋頁面報告的url，能夠自定義頁面url，加上本頁面路由
複製代碼

重要的事說兩遍, 須要全路徑字符串, 不然依然會把#帶上.數組

  • 第五步, 其實到這裏, 已經能正常統計數據了,下面是一些優化的步驟.緩存

    針對接口的統計

    針對接口的統計就是在請求攔截器中添加發送統計信息的代碼bash

    import pathToname from '@/utils/pathname'
// 請求攔截器
service.interceptors.request.use(
config => {
 if (config.url.indexOf('/login') === -1) {
   // 設置用戶名
   const name = store.getters.name
   let urlName
   let curl = config.url
   curl = curl.split('?')[0] || curl
   // 將請求地址轉爲中文
   for (const k in pathToname) {
     if (curl === k) {
       urlName = pathToname[k]
     } else {
       const kurl = k
       const turl = curl
       const karr = kurl.split('/')
       if (karr[karr.length - 1] === '*') {
         // 表明最後一位爲*
         karr.splice(karr.length - 1, 1)
         const karr1 = turl.split('/')
         karr1.splice(karr1.length - 1, 1)
         const str = karr.join('/')
         const str2 = karr1.join('/')
         if (str === str2) {
           urlName = pathToname[k]
         }
       } else {
         karr.splice(karr.length - 2, 1)
         const str = karr.join('/')
         const karr1 = turl.split('/')
         karr1.splice(karr1.length - 2, 1)
         const str2 = karr1.join('/')
         if (str === str2) {
           urlName = pathToname[k]
         }
       }
     }
   }
   // urlName = urlName || '其餘'
   urlName = urlName || config.url
   window._paq.push(['setCustomUrl', `${document.URL.split('/#')[0]}${curl}123`])
   window._paq.push(['setDocumentTitle', urlName])
   window._paq.push(['setUserId', name])
   window._paq.push(['trackPageView'])
 }
複製代碼

固然,我這裏用的是js的方式原理是同樣的,上面的代碼,是我對統計的地址名作了中文化的匹配.由於接口的多樣性,須要作一個處理,好比說,路徑傳參中, 其實只是參數變了,地址沒變, 這個時候不能算一個新的地址, 因此就須要匹配處理. 代碼沒寫太複雜, 一步一步深刻,基本上很容易懂.服務器

附上pathname的代碼. 用於將地址匹配爲中文統計,:

const changeName = {
// goods相關API
'/pdc/api/v1/dic/query': '基礎檔案管理-獲取貨品信息',
'/pdc/api/v1/product/query': '基礎檔案管理-獲取貨品詳情',
// role相關API
'/api/root/list': '基礎-獲取菜單權限',
'/api/createRole': '權限管理-建立角色',
'/api/checkRoleName': '權限管理-查詢角色是否存在',
'/api/custom/master/permission': '權限管理-獲取外部客戶角色列表',
'/api/internal/user/info': '基礎-獲取用戶信息',
// statement相關API
'/statement/financialForm': '財務管理-獲取JIT財務列表',
'/statement/export': '財務管理-導出JIT財務報表',
'/statement/count': '財務管理-獲取JIT數據總條目',
// trade相關API(待定)
// user相關API
'/api/internal/user/list': '權限管理-獲取外部用戶列表',
'/api/internal/custom/list': '權限管理-獲取外部客戶列表',
'/user/create': '權限管理-建立用戶',
'/user/update': '權限管理-修改用戶信息',
'/api/user/password': '權限管理-修改用戶密碼',
// 訂單列表相關API
'/order/api/v1/orderConfirmation': 'B2B交易管理-提交訂單',
'/order/api/v1/serviceApprove': 'B2B交易管理-確認訂單',
'/order/api/v1/serviceRefuse': 'B2B交易管理-拒絕訂單',
'/order/api/v1/getDispatchSelectInfo': 'B2B交易管理-獲取訂單字典數據',
'/order/api/v1/import/productList': 'B2B交易管理-導入訂單數據',
'/order/api/v1/*/orderInformation': 'B2B交易管理-獲取訂單基本信息',
'/order/api/v1/*/customerCode': 'B2B交易管理-檢查客戶代碼是否存在',
'/order/api/v1/*/discount': 'B2B交易管理-導入訂單折扣',
'/order/api/v1/*/occupyInventory': 'B2B交易管理-導出佔庫結果',
'/order/api/v1/createDispatch': 'B2B交易管理-提交發貨單',
'/order/api/vi/dispatchCancel': 'B2B交易管理-取消發貨單',
'/order/api/vi/*/orderCancel': 'B2B交易管理-取消訂單',
'/order/api/v1/dispatchApprove': 'B2B交易管理-贊成發貨單',
'/order/api/v1/dispatchRefuse': 'B2B交易管理-拒絕發貨單',
'/order//api/v1/confirmSubmissionApproval': 'B2B交易管理-訂單提交審批',
'/order/api/v1/orderStatus': 'B2B交易管理-獲取訂單狀態',
'/bff/api/v1/dispatch/*': 'ODS管理-獲取發貨單基本信息',
'/bff/api/v1/receive/*': 'ODS管理-獲取收貨單基本信息',
'/bff/api/v1/vend-cust': 'ODS管理-獲取客商列表信息',
'/bff/api/v1/warehouses': 'ODS管理-實時獲取倉庫信息',
'/bff/api/v1/dict/type': 'ODS管理-倉庫類型查詢',
'/bff/api/v1/dispatch/_export': 'ODS管理-導出發貨單信息',
'/bff/api/v1/receive/_export': 'ODS管理-導出收貨單信息',
'/bff/api/v1/dict/type/_list': 'ODS管理-查詢字典數據',
'/bff/api/v1/dispatch/_page': 'ODS管理-查詢發貨單列表',
'/order/api/v1/orderList': 'B2B交易管理-查詢訂單列表',
'/order/api/v1/orderDetail': 'B2B交易管理-獲取訂單商品列表',
'/order/api/v1/orderDispatchInfo': 'B2B交易管理-獲取訂單發貨單信息',
'/order/api/v1/dispatchList': 'B2B交易管理-獲取訂單發貨單列表',
'/order/api/v1/confirm': 'B2B交易管理-修改佔庫結果',
'/order/api/v1/toBeConfirmedDispatch': 'B2B交易管理-查看歷史發貨單信息',
'/order/api/v1/cumulativeState': 'B2B交易管理-獲取佔庫結果信息'
}
export default changeName
複製代碼

其餘的就不贅述了,中文轉化方面, 各人有各人的理解, 能達到效果就行.

js方式的統計也是相似的.有須要的話,評論留言,我後續傳上來.session

結語

Vue-matomo流量統計這塊,就算整理完成了, 實際項目中已經正常使用,因此正常來說應該不會出現問題. 加油, 各位app

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程