怎么在Vue項目中使用matomo統計訪問流量

怎么在Vue項目中使用matomo統計訪問流量？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

第一步

首先自然是引入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服務器地址和網站

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頁面.

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

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

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

針對接口的統計

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

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

關于怎么在Vue項目中使用matomo統計訪問流量問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。