VueMatomo

Link your Piwik/Matomo installation

Installation

npm install --save vue-matomo

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-matomo/dist/vue-matomo.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/vue-matomo"></script>

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueMatomo from 'vue-matomo'

Vue.use(VueMatomo, {
  // Configure your matomo server and site by providing
  host: 'https://matomo.example.com',
  siteId: 5,

  // Changes the default .js and .php endpoint's filename
  // Default: 'piwik'
  trackerFileName: 'piwik',

  // Overrides the autogenerated tracker endpoint entirely
  // Default: undefined
  // trackerUrl: 'https://example.com/whatever/endpoint/you/have',

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

  // Whether or not to log debug information
  // Default: false
  debug: false
});

// Now you can access piwik api in components through
this.$matomo

// or
window._paq.push

// or through
window.Piwik.getTracker

For available operations see the matomo api docs

Nuxt

Nuxt can work by creating a plugin that will load VueMatomo with SSR disabled. Note how the router is passed:

// nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/vue-matomo.js', ssr: false }
  ]
}

// plugins/vue-matomo.js

import Vue from 'vue'
import VueMatomo from 'vue-matomo'

export default ({ app }) => {
  Vue.use(VueMatomo, {
    router: app.router

    /** Other configuration options **/
  })
}

Ignoring routes

It is possible to ignore routes using the route meta:

{
  path: '/page-2',
  name: 'Page2',
  component: Page2,
  meta: {
  analyticsIgnore: true
  }
}

Managing consent

First of all load the plugin with the following option enabled:

Vue.use(VueMatomo, {
  // ...
  requireConsent: true
})

Matomo has a built in way to give and remember consent. The simplest way is to simply use this method provided by matomo:

<button @click="handleConsent()">Accept Cookies</button>

handleConsent() {
  this.$matomo.rememberConsentGiven()
}

Another option is to use your own implementation for remembering consent. In that case you can simply call this.$matomo.setConsentGiven() on each page load when you establish that the user has given consent.

Build

Bundle the js and css of to the dist folder:

npm run build

License

MIT