Vue中使用matomo進(jìn)行訪問流量統(tǒng)計(jì)的實(shí)現(xiàn)
前言
之前做到了一個頁面及接口訪問流量統(tǒng)計(jì)的需求, 然后在網(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)維護(hù)你的piwik服務(wù)器地址和網(wǎng)站
import VueMatomo from 'vue-matomo' // 動態(tài)維護(hù)的文件 import baseUrlto from './utils/baseUrlto' // 這段代碼作用是獲取當(dāng)前加載的路徑,并去維護(hù)文件中數(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ù)組第一項(xiàng),即為,當(dāng)路徑匹配不到時,默認(rèn)傳送的統(tǒng)計(jì)網(wǎng)址,可以是開發(fā)環(huán)境下測試統(tǒng)計(jì)的地址 { staUrl: '//analytics.baowei-inc.com/', // 統(tǒng)計(jì)網(wǎng)址 staId: '2', // 統(tǒng)計(jì)ID environmentUrl: '默認(rèn)' }, { staUrl: '//analytics.baowei-inc.com/', // 開發(fā)環(huán)境統(tǒng)計(jì)網(wǎng)址 staId: '2', // 統(tǒng)計(jì)ID environmentUrl: 'http://bwcaigou.baowei-inc.com' }, { staUrl: '//analytics.baowei-inc.com/', // 生產(chǎn)環(huán)境統(tǒng)計(jì)網(wǎng)址 staId: '1', // 統(tǒng)計(jì)ID environmentUrl: 'http://portal.baowei-inc.com' }, { staUrl: '//106.12.95.245:8888/', // 本地環(huán)境統(tǒng)計(jì)網(wǎng)址 staId: '2', // 統(tǒng)計(jì)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)計(jì)的組件中,添加上一段追蹤信息的代碼,每一個頁面組件, 對于反復(fù)使用的子組件不需要添加,彈窗等也不需要,針對的是頁面級得組件,
// 這里說明一下, this.$matomo是注冊過后,自動會有得, 不需要進(jìn)行其他得操作. created(){ const hashLocation= sessionStorage.getItem("hashLocation");//緩存中獲取當(dāng)前頁面的路由名稱 const newLocation = hashLocation.split("#/")[1]; // 注意, 這里使用全路徑匹配,在hash模式中,因?yàn)榈刂窌y帶#,所以頁面報(bào)告中的url需要重新覆蓋一下, 將#去除 this.$matomo.setCustomUrl("http:baidu.com"+"/"+newLocation);//覆蓋頁面報(bào)告的url,可以自定義頁面url,加上本頁面路由 // this.$matomo.trackEvent(shopCode,hashLocation);//事件 this.$matomo.trackPageView(hashLocation);//頁面名稱,可以自定義頁面名稱 }
圖片現(xiàn)在上傳不了,稍后回去上傳上來,
特地說明一下, setCustomUrl的作用是重新設(shè)定url,因?yàn)樵趍atomo的頁面網(wǎng)址統(tǒng)計(jì)那塊中,它是通過url去統(tǒng)計(jì)的, 如果不做處理的話, 會自動統(tǒng)計(jì)域名后一級目錄為相同頁面, 也就是說, /#/會被讀取為一個頁面網(wǎng)址,不處理的話,那么無論訪問哪個頁面,都會被統(tǒng)計(jì)為/index頁面.
// 注意, 這里使用全路徑匹配,在hash模式中,因?yàn)榈刂窌y帶#,所以頁面報(bào)告中的url需要重新覆蓋一下, 將#去除 this.$matomo.setCustomUrl("http:baidu.com"+"/"+newLocation);// 非全路徑 this.$matomo.setCustomUrl("http://www.baidu.com"+"/"+newLocation); // 全路徑 //覆蓋頁面報(bào)告的url,可以自定義頁面url,加上本頁面路由
重要的事說兩遍, 需要全路徑字符串, 否則依然會把#帶上.
第五步, 其實(shí)到這里, 已經(jīng)能正常統(tǒng)計(jì)數(shù)據(jù)了,下面是一些優(yōu)化的步驟.
針對接口的統(tǒng)計(jì)
針對接口的統(tǒng)計(jì)就是在請求攔截器中添加發(fā)送統(tǒng)計(jì)信息的代碼
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)計(jì)的地址名做了中文化的匹配.因?yàn)榻涌诘亩鄻有?需要做一個處理,比如說,路徑傳參中, 其實(shí)只是參數(shù)變了,地址沒變, 這個時候不能算一個新的地址, 所以就需要匹配處理. 代碼沒寫太復(fù)雜, 一步一步深入,基本上很容易懂.
附上pathname的代碼. 用于將地址匹配為中文統(tǒng)計(jì),:
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': '財(cái)務(wù)管理-獲取JIT財(cái)務(wù)列表', '/statement/export': '財(cái)務(wù)管理-導(dǎo)出JIT財(cái)務(wù)報(bào)表', '/statement/count': '財(cái)務(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管理-實(shí)時獲取倉庫信息', '/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)計(jì)也是類似的.有需要的話,評論留言,我后續(xù)傳上來.
結(jié)語
Vue-matomo流量統(tǒng)計(jì)這塊,就算整理完成了, 實(shí)際項(xiàng)目中已經(jīng)正常使用,所以正常來講應(yīng)該不會出現(xiàn)問題. 加油, 各位
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)
kkFileView是git的開源在線文件預(yù)覽項(xiàng)目,這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線預(yù)覽功能,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯的問題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue中mock數(shù)據(jù),模擬后臺接口實(shí)例
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺接口實(shí)例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
本文通過實(shí)例給大家介紹了vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04網(wǎng)站國際化多語言處理工具i18n安裝使用方法圖文詳解
國際化是設(shè)計(jì)軟件應(yīng)用的過程中應(yīng)用被使用與不同語言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國際化多語言處理工具i18n安裝使用方法的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09