Need help with vue-matomo?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

AmazingDreams
165 Stars 43 Forks MIT License 189 Commits 3 Opened issues

Description

Vue plugin for Piwik / Matomo Analytics

Services available

!
?

Need anything else?

Contributors list

# 227,376
HTML
JavaScr...
mining
Shell
130 commits
# 208,325
vue2
bootstr...
Perl
raku
5 commits
# 49,066
crdt
end-to-...
JavaScr...
HTML
1 commit
# 60,972
Ruby
Rails
yarn
Markdow...
1 commit
# 21,739
Vue.js
JavaScr...
CSS
Shell
1 commit
# 161,121
HTML
Shell
Vue.js
Node.js
1 commit
# 157,491
JavaScr...
vue-rou...
vuex
Nuxt.js
1 commit
# 255,869
R
Jupyter...
Flask
flask-r...
1 commit
# 248,814
Common ...
Shell
Node.js
Bootstr...
1 commit
# 635,769
TypeScr...
HTML
Shell
lottie
1 commit

VueMatomo

npm vue2 vue3 npm bundle-size license

Link your Piwik/Matomo installation. Compatible with vue 2.x and 3.x.

Installation

npm install --save vue-matomo

Browser




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: 'matomo' trackerFileName: 'matomo',

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

// Overrides the autogenerated tracker script path entirely // Default: undefined // trackerScriptUrl: 'https://example.com/whatever/script/path/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,

// Run Matomo without cookies // Default: false disableCookies: false,

// Enable the heartbeat timer (https://developer.matomo.org/guides/tracking-javascript-guide#accurately-measure-the-time-spent-on-each-page) // Default: false enableHeartBeatTimer: false,

// Set the heartbeat timer interval // Default: 15 heartBeatTimerInterval: 15,

// Whether or not to log debug information // Default: false debug: false,

// UserID passed to Matomo (see https://developer.matomo.org/guides/tracking-javascript-guide#user-id) // Default: undefined userId: undefined,

// Share the tracking cookie across subdomains (see https://developer.matomo.org/guides/tracking-javascript-guide#measuring-domains-andor-sub-domains) // Default: undefined, example '*.example.com' cookieDomain: undefined,

// Tell Matomo the website domain so that clicks on these domains are not tracked as 'Outlinks' // Default: undefined, example: '*.example.com' domains: undefined,

// A list of pre-initialization actions that run before matomo is loaded // Default: [] // Example: [ // ['API_method_name', parameter_list], // ['setCustomVariable','1','VisitorType','Member'], // ['appendToTrackingUrl', 'new_visit=1'], // etc. // ] preInitActions: [] });

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

Note on async loading

This plugin loads the

matomo.js
asynchronously, which means it is possible that
$matomo
is not (yet) loaded. Furthermore anti-tracking plugins on browsers might block
matomo.js
entirely. You should always guard your calls to
$matomo
, or use
window._paq.push
:
this.$matomo && this.$matomo.trackPageView()

// Or...

window._paq.push(['trackPageView'])

Nuxt

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

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

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

Accept Cookies

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.