Question

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

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

我将VueMatomo插件导入了main.js条目文件中，如下所示：

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

我让我的vomo.js应用程序（v 2.6.10）上有matomo。

我正在使用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跟踪代码？

1 个答案: