staId: '2', // 统计ID
environmentUrl: 'http://localhost:'
}
]
export default statistics
第三步 ,是在app.vue中监听路由变化
watch: {
'$route' () {
let locationHash = window.location.hash;
//把路由存在缓存中，此处你可以console.log看出路由变化
sessionStorage.setItem("hashLocation",locationHash);
}
},第四步, 然后在每一个被跳转时都需要统计的组件中,添加上一段追踪信息的代码,每一个页面组件, 对于反复使用的子组件不需要添加,弹窗等也不需要,针对的是页面级得组件,
// 这里说明一下, 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的页面网址统计那块中,它是通过url去统计的, 如果不做处理的话, 会自动统计域名后一级目录为相同页面, 也就是说, /#/会被读取为一个页面网址,不处理的话,那么无论访问哪个页面,都会被统计为/index页面.
// 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);// 非全路径
this.$matomo.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
