vue中的浏览量_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

environme