Vue中使用matomo進行訪問流量統計
前言
之前做到了一個頁面及接口訪問流量統計的需求, 然后在網上找了很多帖子,發現有些有的但是寫的都不是很詳細,所以今天就整理了一下, 今天修改一下, 之前的有點小問題,就是this.$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值 // 注冊名稱 =>this.$matomo trackerFileName: 'matomo', // 根據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); } }, 復制代碼- 第四步, 然后在每一個被跳轉時都需要統計的組件中,添加上一段追蹤信息的代碼,每一個頁面組件, 對於反復使用的子組件不需要添加,彈窗等也不需要,針對的是頁面級的組件,// 純js不需要此步驟
created(){ const hashLocation= sessionStorage.getItem("hashLocation");//緩存中獲取當前頁面的路由名稱 const newLocation = hashLocation.split("#/")[1]; // 注意, 這里使用全路徑匹配,在hash模式中,因為地址會攜帶#,所以頁面報告中的url需要重新覆蓋一下, 將#去除 window._paq.push(['setCustomUrl',"http：baidu.com"+"/"+newLocation);//覆蓋頁面報告的url，可以自定義頁面url，加上本頁面路由 window._paq.push(['trackPageView'], hashLocation);//頁面名稱,可以自定義頁面名稱 } 復制代碼
特地說明一下, setCustomUrl的作用是重新設定url,因為在matomo的頁面網址統計那塊中,它是通過url去統計的, 如果不做處理的話, 會自動統計域名后一級目錄為相同頁面, 也就是說, /#/會被讀取為一個頁面網址,不處理的話,那么無論訪問哪個頁面,都會被統計為/index頁面.
一級之后的目錄會作為子目錄被統計
// 注意, 這里使用全路徑匹配,在hash模式中,因為地址會攜帶#,所以頁面報告中的url需要重新覆蓋一下, 將#去除 window._paq.push(['setCustomUrl',"http：baidu.com"+"/"+newLocation);// 非全路徑 window._paq.push(['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 復制代碼純JSmatomo統計, 效果和上面一樣,比較簡單,就一個步驟,在main.js注冊,然后就可以在其他頁面使用.
// 動態維護的文件
import baseUrlto from './utils/baseUrlto' let uitem baseUrlto.map(e => { if (document.URL.indexOf(e.environmentUrl) !== -1) { uitem = e } }) if (!uitem) { uitem = baseUrlto[0] } var _paq = _paq || [] window._paq = _paq /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ const arr = (document.URL.split('#')[1]).split('/') let CurlName if (arr.length >= 5) { arr.splice(arr.length - 1, 1) const str = arr.join('/') CurlName = urlName[str] } else { const str = arr.join('/') CurlName = urlName[str] } CurlName = CurlName || '其他頁面' sessionStorage.setItem('urlName', CurlName) // 頁面刷新執行一次, 記錄頁面訪問 _paq.push(['setCustomUrl', `${document.URL.split('/#')[0]}${document.URL.split('/#')[1]}`]) _paq.push(['setDocumentTitle', CurlName]) _paq.push(['trackPageView']) _paq.push(['enableLinkTracking']); (function() { const u = uitem.staUrl _paq.push(['setTrackerUrl', u + 'matomo.php']) _paq.push(['setSiteId', uitem.staId]) var d = document var g = d.createElement('script') var s = d.getElementsByTagName('script')[0] g.type = 'text/javascript' g.async = true g.defer = true g.src = u + 'matomo.js' s.parentNode.insertBefore(g, s) })() // 其他頁面 window._paq.push(['setDocumentTitle', 'ODS管理-發貨單列表頁面']) window._paq.push(['trackPageView']) 復制代碼js方式比較簡單, 就一個步驟, 其他的轉換地址, 漢化之類的和上述的方式是一樣的, 如果學友們用第一種方式有什么問題,又沒及時答復的話, 可以直接使用js的方式.
其他的就不贅述了,中文轉化方面, 各人有各人的理解, 能達到效果就行.
js方式的統計也是類似的.有需要的話,評論留言,我后續傳上來.
結語
Vue-matomo與js流量統計這塊,就算整理完成了, 實際項目中已經正常使用,所以正常來講應該不會出現問題. 加油, 各位