Vue中使用matomo進行訪問流量統(tǒng)計的實現
更新時間：2019年11月05日 09:57:01 作者：何記云
這篇文章主要介紹了Vue中使用matomo進行訪問流量統(tǒng)計的實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
之前做到了一個頁面及接口訪問流量統(tǒng)計的需求, 然后在網上找了很多帖子,發(fā)現有些有的但是寫的都不是很詳細,所以今天就整理了一下
正文
第一步
首先自然是引入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,
// // 是否需要在發(fā)送追蹤信息之前請求許可
// // 默認false
requireConsent: false,
enableLinkTracking: true,
// // 是否追蹤初始頁面
// // 默認true
trackInitialView: false,
// // 最終的追蹤js文件名
// // 默認 'piwik'
trackerFileName: 'matomo',
debug: false
});
當然這里也可以提出一個公共的文件來動態(tài)維護你的piwik服務器地址和網站
import VueMatomo from 'vue-matomo'
// 動態(tài)維護的文件
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,
// // 是否需要在發(fā)送追蹤信息之前請求許可
// // 默認false
requireConsent: false,
enableLinkTracking: true,
// // 是否追蹤初始頁面
// // 默認true
trackInitialView: false,
// // 最終的追蹤js文件名
// // 默認 'piwik'
trackerFileName: 'matomo',
debug: false
});
附上baseUrlto的代碼
const statistics = [
// 數組第一項,即為,當路徑匹配不到時,默認傳送的統(tǒng)計網址,可以是開發(fā)環(huán)境下測試統(tǒng)計的地址
{
staUrl: '//analytics.baowei-inc.com/', // 統(tǒng)計網址
staId: '2', // 統(tǒng)計ID
environmentUrl: '默認'
},
{
staUrl: '//analytics.baowei-inc.com/', // 開發(fā)環(huán)境統(tǒng)計網址
staId: '2', // 統(tǒng)計ID
environmentUrl: 'http://bwcaigou.baowei-inc.com'
},
{
staUrl: '//analytics.baowei-inc.com/', // 生產環(huán)境統(tǒng)計網址
staId: '1', // 統(tǒng)計ID
environmentUrl: 'http://portal.baowei-inc.com'
},
{
staUrl: '//106.12.95.245:8888/', // 本地環(huán)境統(tǒ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);
}
},
第四步, 然后在每一個被跳轉時都需要統(tǒng)計的組件中,添加上一段追蹤信息的代碼,每一個頁面組件, 對于反復使用的子組件不需要添加,彈窗等也不需要,針對的是頁面級得組件,
// 這里說明一下, 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的頁面網址統(tǒng)計那塊中,它是通過url去統(tǒng)計的, 如果不做處理的話, 會自動統(tǒng)計域名后一級目錄為相同頁面, 也就是說, /#/會被讀取為一個頁面網址,不處理的話,那么無論訪問哪個頁面,都會被統(tǒng)計為/index頁面.
// 注意, 這里使用全路徑匹配,在hash模式中,因為地址會攜帶#,所以頁面報告中的url需要重新覆蓋一下, 將#去除
this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);// 非全路徑
this.$matomo.setCustomUrl("http://www.baidu.com"+"/"+newLocation); // 全路徑
//覆蓋頁面報告的url，可以自定義頁面url，加上本頁面路由
重要的事說兩遍, 需要全路徑字符串, 否則依然會把#帶上.
第五步, 其實到這里, 已經能正常統(tǒng)計數據了,下面是一些優(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) {
// 設置用戶名
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的方式原理是一樣的,上面的代碼,是我對統(tǒng)計的地址名做了中文化的匹配.因為接口的多樣性,需要做一個處理,比如說,路徑傳參中, 其實只是參數變了,地址沒變, 這個時候不能算一個新的地址, 所以就需要匹配處理. 代碼沒寫太復雜, 一步一步深入,基本上很容易懂.
附上pathname的代碼. 用于將地址匹配為中文統(tǒng)計,:
const changeName = {
// goods相關API
'/pdc/api/v1/dic/query': '基礎檔案管理-獲取貨品信息',
'/pdc/api/v1/product/query': '基礎檔案管理-獲取貨品詳情',
// role相關API
'/api/root/list': '基礎-獲取菜單權限',
'/api/createRole': '權限管理-創(chuàng)建角色',
'/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': '權限管理-創(chuàng)建用戶',
'/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交易管理-提交發(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管理-導出發(fā)貨單信息',
'/bff/api/v1/receive/_export': 'ODS管理-導出收貨單信息',
'/bff/api/v1/dict/type/_list': 'ODS管理-查詢字典數據',
'/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交易管理-修改占庫結果',
'/order/api/v1/toBeConfirmedDispatch': 'B2B交易管理-查看歷史發(fā)貨單信息',
'/order/api/v1/cumulativeState': 'B2B交易管理-獲取占庫結果信息'
}
export default changeName
其他的就不贅述了,中文轉化方面, 各人有各人的理解, 能達到效果就行.
js方式的統(tǒng)計也是類似的.有需要的話,評論留言,我后續(xù)傳上來.
結語
Vue-matomo流量統(tǒng)計這塊,就算整理完成了, 實際項目中已經正常使用,所以正常來講應該不會出現問題. 加油, 各位
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了簡單了解vue.js數組的常用操作,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue實現可搜索的下拉菜單組件功能，在文中通過實例代碼給大家補充介紹了vue組件實踐-可搜索下拉框，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue-router結合vuex實現用戶權限控制功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
kkFileView是git的開源在線文件預覽項目，這篇文章主要介紹了KKFileView結合vue多格式文件在線預覽功能，本文給大家介紹的非常詳細,需要的朋友可以參考下2024-02-02
vue 解決uglifyjs-webpack-plugin打包出現報錯的問題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue中mock數據,模擬后臺接口實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
ue3因其出色的響應式系統(tǒng),以及便利的功能特性,完全勝任大型業(yè)務系統(tǒng)的開發(fā),這篇文章主要介紹了如何為Vue3提供一個可媲美Angular的ioc容器,需要的朋友可以參考下2024-08-08
vue.js與element-ui實現菜單樹形結構的解決方法
本文通過實例給大家介紹了vue.js與element-ui實現菜單樹形結構，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
國際化是設計軟件應用的過程中應用被使用與不同語言和地區(qū),下面這篇文章主要給大家介紹了關于網站國際化多語言處理工具i18n安裝使用方法的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09