首先在main.js找那个引入vue-matomo
安装一下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
});
然后下面是关键一步,就是需要在app.vue中监听路由变化
watch: {
'$route' () {
let locationHash = window.location.hash;
sessionStorage.setItem("hashLocation",locationHash);//把路由存在缓存中,此处你可以console.log看出路由变化
}
},
然后再每个组件中发送追踪信息就行了,注意是每个组件哦
created(){
const hashLocation= sessionStorage.getItem("hashLocation");//缓存中获取当前页面的路由名称
const newLocation = hashLocation.split("#/")[1];
this.$matomo.setCustomUrl("http:baidu.com"+"/"+newLocation);//覆盖页面报告的url,可以自定义页面url,加上本页面路由
// this.$matomo.trackEvent(shopCode,hashLocation);//事件
this.$matomo.trackPageView(hashLocation);//页面名称,可以自定义页面名称
}
然后就可以在matomo网站中查看这些数据如下图,在页面名称选项中可以看到自定义名字的页面
matomo参数说明官方网站https://developer.matomo.org/api-reference/tracking-javascript
以下是js版本使用matomo的,比较简单,需要在每个html中加上此段代码
<script type="text/javascript">
var _paq = window._paq || [];
_paq.push(['setCustomUrl', 'http://h5t.namektest.xyz/hyhlc/car']);//自定义每个页面链接
_paq.push(['setDocumentTitle', 'hyhlc-car']);//自定义每个页面名称
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//matomo.name.xyz/";// // 这里配置你自己的piwik服务器地址和网站ID
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '5']);//setId
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>