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

【问题标题】：How to add Matomo tracking code in VueJS Single Page Apps?如何在 VueJS 单页应用程序中添加 Matomo 跟踪代码？
【发布时间】：2019-05-11 19:47:33
【问题描述】：

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

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

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

import VueMatomo from 'vue-matomo';

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

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>

以上内容是否足够，或者是否有更好的生命周期挂钩（已安装？）用于跟踪代码？也许导航守卫更合适？

谢谢

【问题讨论】：

你是怎么做到的？

标签： vue.js matomo vue-cli-3

【解决方案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);
      }
    },
...}

【讨论】：