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的代码的代码
评论0