Vue中使用matomo進(jìn)行訪問流量統(tǒng)計的實現(xiàn)

更新時間：2019年11月05日 09:57:01 作者：何記云

這篇文章主要介紹了Vue中使用matomo進(jìn)行訪問流量統(tǒng)計的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

之前做到了一個頁面及接口訪問流量統(tǒng)計的需求, 然后在網(wǎng)上找了很多帖子,發(fā)現(xiàn)有些有的但是寫的都不是很詳細(xì),所以今天就整理了一下

正文

第一步

首先自然是引入matomo

npm i vue-matomo

第二步

在main.js中注冊一下matomo

import VueMatomo from 'vue-matomo'
Vue.use(VueMatomo, {
 host: 'http://matomo.na.xyz', // 這里配置你自己的piwik服務(wù)器地址和網(wǎng)站ID
 siteId: 3,//siteId值
 // 根據(jù)router自動注冊
 router: router,
 // // 是否需要在發(fā)送追蹤信息之前請求許可
 // // 默認(rèn)false
 requireConsent: false,
 enableLinkTracking: true,
 // // 是否追蹤初始頁面
 // // 默認(rèn)true
 trackInitialView: false,
 // // 最終的追蹤js文件名
 // // 默認(rèn) 'piwik'
 trackerFileName: 'matomo',
 debug: false
});

當(dāng)然這里也可以提出一個公共的文件來動態(tài)維護你的piwik服務(wù)器地址和網(wǎng)站

import VueMatomo from 'vue-matomo'
// 動態(tài)維護的文件
import baseUrlto from './utils/baseUrlto'

// 這段代碼作用是獲取當(dāng)前加載的路徑,并去維護文件中數(shù)組里匹配出相應(yīng)的的集合對象.
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值
 // 根據(jù)router自動注冊
 router: router,
 // // 是否需要在發(fā)送追蹤信息之前請求許可
 // // 默認(rèn)false
 requireConsent: false,
 enableLinkTracking: true,
 // // 是否追蹤初始頁面
 // // 默認(rèn)true
 trackInitialView: false,
 // // 最終的追蹤js文件名
 // // 默認(rèn) 'piwik'
 trackerFileName: 'matomo',
 debug: false
});

附上baseUrlto的代碼

const statistics = [
// 數(shù)組第一項,即為,當(dāng)路徑匹配不到時,默認(rèn)傳送的統(tǒng)計網(wǎng)址,可以是開發(fā)環(huán)境下測試統(tǒng)計的地址
 {
 staUrl: '//analytics.baowei-inc.com/', // 統(tǒng)計網(wǎng)址
 staId: '2', // 統(tǒng)計ID
 environmentUrl: '默認(rèn)'
 },
 {
 staUrl: '//analytics.baowei-inc.com/', // 開發(fā)環(huán)境統(tǒng)計網(wǎng)址
 staId: '2', // 統(tǒng)計ID
 environmentUrl: 'http://bwcaigou.baowei-inc.com'
 },
 {
 staUrl: '//analytics.baowei-inc.com/', // 生產(chǎn)環(huán)境統(tǒng)計網(wǎng)址
 staId: '1', // 統(tǒng)計ID
 environmentUrl: 'http://portal.baowei-inc.com'
 },
 {
 staUrl: '//106.12.95.245:8888/', // 本地環(huán)境統(tǒng)計網(wǎng)址
 staId: '2', // 統(tǒng)計ID
 environmentUrl: 'http://localhost:'
 }
]

export default statistics

第三步 ,是在app.vue中監(jiān)聽路由變化

watch: {
  '$route' () {
  let locationHash = window.location.hash;
  //把路由存在緩存中，此處你可以console.log看出路由變化
  sessionStorage.setItem("hashLocation",locationHash);
  }
 },

第四步, 然后在每一個被跳轉(zhuǎn)時都需要統(tǒng)計的組件中,添加上一段追蹤信息的代碼,每一個頁面組件, 對于反復(fù)使用的子組件不需要添加,彈窗等也不需要,針對的是頁面級得組件,

// 這里說明一下, this.$matomo是注冊過后,自動會有得, 不需要進(jìn)行其他得操作.
 created(){
  const hashLocation= sessionStorage.getItem("hashLocation");//緩存中獲取當(dāng)前頁面的路由名稱
  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);//頁面名稱,可以自定義頁面名稱
 }

圖片現(xiàn)在上傳不了,稍后回去上傳上來,

特地說明一下, setCustomUrl的作用是重新設(shè)定url,因為在matomo的頁面網(wǎng)址統(tǒng)計那塊中,它是通過url去統(tǒng)計的, 如果不做處理的話, 會自動統(tǒng)計域名后一級目錄為相同頁面, 也就是說, /#/會被讀取為一個頁面網(wǎng)址,不處理的話,那么無論訪問哪個頁面,都會被統(tǒng)計為/index頁面.

// 注意, 這里使用全路徑匹配,在hash模式中,因為地址會攜帶#,所以頁面報告中的url需要重新覆蓋一下, 將#去除
  this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);// 非全路徑
  this.$matomo.setCustomUrl("http://www.baidu.com"+"/"+newLocation); // 全路徑
  //覆蓋頁面報告的url，可以自定義頁面url，加上本頁面路由

重要的事說兩遍, 需要全路徑字符串, 否則依然會把#帶上.

第五步, 其實到這里, 已經(jīng)能正常統(tǒng)計數(shù)據(jù)了,下面是一些優(yōu)化的步驟.

針對接口的統(tǒng)計

針對接口的統(tǒng)計就是在請求攔截器中添加發(fā)送統(tǒng)計信息的代碼

import pathToname from '@/utils/pathname'
// 請求攔截器
service.interceptors.request.use(
config => {
 if (config.url.indexOf('/login') === -1) {
 // 設(shè)置用戶名
 const name = store.getters.name
 let urlName
 let curl = config.url
 curl = curl.split('?')[0] || curl
 // 將請求地址轉(zhuǎn)為中文
 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'])
 }

圖片依然等回去上傳

當(dāng)然,我這里用的是js的方式原理是一樣的,上面的代碼,是我對統(tǒng)計的地址名做了中文化的匹配.因為接口的多樣性,需要做一個處理,比如說,路徑傳參中, 其實只是參數(shù)變了,地址沒變, 這個時候不能算一個新的地址, 所以就需要匹配處理. 代碼沒寫太復(fù)雜, 一步一步深入,基本上很容易懂.

附上pathname的代碼. 用于將地址匹配為中文統(tǒng)計,:

const changeName = {
// goods相關(guān)API
'/pdc/api/v1/dic/query': '基礎(chǔ)檔案管理-獲取貨品信息',
'/pdc/api/v1/product/query': '基礎(chǔ)檔案管理-獲取貨品詳情',
// role相關(guān)API
'/api/root/list': '基礎(chǔ)-獲取菜單權(quán)限',
'/api/createRole': '權(quán)限管理-創(chuàng)建角色',
'/api/checkRoleName': '權(quán)限管理-查詢角色是否存在',
'/api/custom/master/permission': '權(quán)限管理-獲取外部客戶角色列表',
'/api/internal/user/info': '基礎(chǔ)-獲取用戶信息',
// statement相關(guān)API
'/statement/financialForm': '財務(wù)管理-獲取JIT財務(wù)列表',
'/statement/export': '財務(wù)管理-導(dǎo)出JIT財務(wù)報表',
'/statement/count': '財務(wù)管理-獲取JIT數(shù)據(jù)總條目',
// trade相關(guān)API(待定)
// user相關(guān)API
'/api/internal/user/list': '權(quán)限管理-獲取外部用戶列表',
'/api/internal/custom/list': '權(quán)限管理-獲取外部客戶列表',
'/user/create': '權(quán)限管理-創(chuàng)建用戶',
'/user/update': '權(quán)限管理-修改用戶信息',
'/api/user/password': '權(quán)限管理-修改用戶密碼',
// 訂單列表相關(guān)API
'/order/api/v1/orderConfirmation': 'B2B交易管理-提交訂單',
'/order/api/v1/serviceApprove': 'B2B交易管理-確認(rèn)訂單',
'/order/api/v1/serviceRefuse': 'B2B交易管理-拒絕訂單',
'/order/api/v1/getDispatchSelectInfo': 'B2B交易管理-獲取訂單字典數(shù)據(jù)',
'/order/api/v1/import/productList': 'B2B交易管理-導(dǎo)入訂單數(shù)據(jù)',
'/order/api/v1/*/orderInformation': 'B2B交易管理-獲取訂單基本信息',
'/order/api/v1/*/customerCode': 'B2B交易管理-檢查客戶代碼是否存在',
'/order/api/v1/*/discount': 'B2B交易管理-導(dǎo)入訂單折扣',
'/order/api/v1/*/occupyInventory': 'B2B交易管理-導(dǎo)出占庫結(jié)果',
'/order/api/v1/createDispatch': 'B2B交易管理-提交發(fā)貨單',
'/order/api/vi/dispatchCancel': 'B2B交易管理-取消發(fā)貨單',
'/order/api/vi/*/orderCancel': 'B2B交易管理-取消訂單',
'/order/api/v1/dispatchApprove': 'B2B交易管理-同意發(fā)貨單',
'/order/api/v1/dispatchRefuse': 'B2B交易管理-拒絕發(fā)貨單',
'/order//api/v1/confirmSubmissionApproval': 'B2B交易管理-訂單提交審批',
'/order/api/v1/orderStatus': 'B2B交易管理-獲取訂單狀態(tài)',
'/bff/api/v1/dispatch/*': 'ODS管理-獲取發(fā)貨單基本信息',
'/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管理-導(dǎo)出發(fā)貨單信息',
'/bff/api/v1/receive/_export': 'ODS管理-導(dǎo)出收貨單信息',
'/bff/api/v1/dict/type/_list': 'ODS管理-查詢字典數(shù)據(jù)',
'/bff/api/v1/dispatch/_page': 'ODS管理-查詢發(fā)貨單列表',
'/order/api/v1/orderList': 'B2B交易管理-查詢訂單列表',
'/order/api/v1/orderDetail': 'B2B交易管理-獲取訂單商品列表',
'/order/api/v1/orderDispatchInfo': 'B2B交易管理-獲取訂單發(fā)貨單信息',
'/order/api/v1/dispatchList': 'B2B交易管理-獲取訂單發(fā)貨單列表',
'/order/api/v1/confirm': 'B2B交易管理-修改占庫結(jié)果',
'/order/api/v1/toBeConfirmedDispatch': 'B2B交易管理-查看歷史發(fā)貨單信息',
'/order/api/v1/cumulativeState': 'B2B交易管理-獲取占庫結(jié)果信息'
}
export default changeName

其他的就不贅述了,中文轉(zhuǎn)化方面, 各人有各人的理解, 能達(dá)到效果就行.

js方式的統(tǒng)計也是類似的.有需要的話,評論留言,我后續(xù)傳上來.

結(jié)語

Vue-matomo流量統(tǒng)計這塊,就算整理完成了, 實際項目中已經(jīng)正常使用,所以正常來講應(yīng)該不會出現(xiàn)問題. 加油, 各位

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: