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

Question

I wanted to confirm whether I got my analytics tracking setup correctly in my single page application within the VueJS framework.

I am using the Vue plugin for Matomo which is found here: https://github.com/AmazingDreams/vue-matomo

I imported the VueMatomo plugin in my main.js entry file like so:

import VueMatomo from 'vue-matomo';

Then, I assign the VueMatomo as a global method in my main.js file like so:

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
});

That gives me access to the Matomo API (_paq) in my components. However, this is where I am confused.

For example, I have a view called overview.vue which is the main page of the site. In this vue template, I have the following code in my created() hook. Since I am using a SPA, I need to somehow get the name of the page that the user is on and push it to the Matomo Reporting Tool. This is what I did:

<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>

Is the above adequate or is there a better lifecyle hook (mounted?) for the tracking code? Perhaps navigation guards are more appropriate?

Thank you

How did you end up doing this? – Jackson Apr 29 '19 at 13:15 — Jackson, Apr 29 '19 at 13:15

Eric · Accepted Answer · 2019-06-12T14:21:00.210

I got matomo working on my vue.js app (v 2.6.10).

I'm using a trial account from https://matomo.org/

In my main.js file:

// 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
});

I can confirm that all of my nested routes are tracked. I can see what pages i viewed on my matomo dashboard.

To get custom events working just add the following: this.$matomo.trackEvent("Event Category", "Event Name", "event action");

To give this some context, for my app i'm using it in a computed property:

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

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

1 Answers1