如何在VueJS单页应用程序中添加Matomo跟踪代码

Question

我想确认我在VueJS框架内的单页应用程序中是否正确设置了分析跟踪。

我正在使用Matomo的Vue插件，可以在这里找到：https://github.com/AmazingDreams/vue-matomo

我在main.js入口文件中导入了VueMatomo插件，如下所示：

import VueMatomo from 'vue-matomo';

然后，我在main.js文件中将VueMatomo分配为全局方法，如下所示：

Vue.use(VueMatomo, {
// Configure your matomo server and site
host: 'https://matomo.example.com', <-- i configured this to match my real site
siteId: 5, <--- i configured this to match my real site
// Enables automatically registering pageviews on the router
router: router,
// Enables link tracking on regular links. Note that this won't
// work for routing links (ie. internal Vue router links)
// Default: true
enableLinkTracking: true,
// Require consent before sending tracking information to matomo
// Default: false
requireConsent: false,
// Whether to track the initial page view
// Default: true
trackInitialView: true,
// Changes the default .js and .php endpoint's filename
// Default: 'piwik'
trackerFileName: 'piwik',
// Whether or not to log debug information
// Default: false
debug: false
});

这使我能够访问组件中的Matomo API(_paq(。然而，这正是我感到困惑的地方。

例如，我有一个名为overview.vue的视图，它是网站的主页面。在这个vue模板中，我的created()钩子中有以下代码。由于我使用的是SPA，我需要以某种方式获得用户所在页面的名称，并将其推送到Matomo报告工具。这就是我所做的：

<template>...snip...</template>
<script>
export default {
name: 'OverView',
created: function() {
window._paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)]);
window._paq.push(['setDocumentTitle', 'Overview Page']);
window._paq.push(['trackPageView']);
}
};
</script>

以上内容是否足够，或者是否有更好的救生圈挂钩(已安装？(用于跟踪代码？也许导航警卫更合适？

谢谢

Answer 1

我让matomo在我的vue.js应用程序(v2.6.10(上工作。

我正在使用https://matomo.org/的试用帐户

在我的main.js文件中：

// Analytics
import VueMatomo from "vue-matomo";
Vue.use(VueMatomo, {
host: "https://example.matomo.cloud", // switch this to your account
siteId: 1,                            // switch this as well you can find the site id after adding the website to the dashboard. 
router: router,
enableLinkTracking: true,
requireConsent: false,
trackInitialView: true,
trackerFileName: "piwik",
debug: true
});

我可以确认我的所有嵌套路由都已被跟踪。我可以在matomo仪表板上看到我查看的页面。

要使自定义事件工作，只需添加以下内容：this.$matomo.trackEvent("Event Category", "Event Name", "event action");

为了给它一些上下文，对于我的应用程序，我在一个计算属性中使用它：

computed: {
selectedMapDataType: {
get() {
return this.$store.state.mapDataType;
},
set(selected) {
this.$matomo.trackEvent("Dashboard Update", "Dashboard Data", selected);
this.$store.dispatch("updateMapDataType", selected);
}
},
...}