如何在 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 应用程序 (v 2.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);
      }
    },
...}

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

How to add Matomo tracking code in VueJS Single Page Apps?

matomo

vue.js

vue-cli-3