Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
vue-matomo
Advanced tools
Link your Piwik/Matomo installation
npm install --save vue-matomo
<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-matomo/dist/vue-matomo.js"></script>
<!-- From CDN -->
<script src="https://unpkg.com/vue-matomo"></script>
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',
// 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
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 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 **/
})
}
It is possible to ignore routes using the route meta:
{
path: '/page-2',
name: 'Page2',
component: Page2,
meta: {
analyticsIgnore: true
}
}
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:
<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.
Bundle the js and css of to the dist
folder:
npm run build
FAQs
Link your Piwik/Matomo installation
The npm package vue-matomo receives a total of 18,359 weekly downloads. As such, vue-matomo popularity was classified as popular.
We found that vue-matomo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.