Originally published on webdeasy.de !

Matomo allows us to perform analysis and tracking under privacy protection. Matomo is also easy to integrate into Vue.js. I will show you how it works!

We may collect data about visitors to our Vue.js site, i.e. track and analyse their behaviour. At Matomo we pay special attention to the privacy and data protection of visitors, but we still have many ways to analyze the relevant data.

Tracking without cookies is also possible with Matomo. This is one of the reasons why I use Matomo in Vue.js applications and also on this site. Furthermore Matomo On-Premise is free of charge .

Corresponding opt-in and opt-out procedures are of course also provided.

Attention: I now have my own newsletter . From time to time there is information about new tutorials & code snippets. 📬🙂

First you have to download Matomo here and unzip the target directory or directly into your webspace.

If you are using tracking software, such as Matomo, you should also make sure to include the necessary information in your privacy policy. This is no legal protection, please contact your data protection officer.

You can host Matomo either in an extra directory, a subdomain or on a completely different domain. Also note that you can create multiple pages in one Matomo installation.

So if you plan to use Matomo on several sites, it might make sense to install Matomo on a neutral domain and enter all sites there in a bundled way.

This offers you the advantage that you can compare several pages with each other. Here are a few ideas in case you need inspiration:

https://example.com/analytics

https://analytics.example.com/

https://analytics.example.com/

https://analytics.other-domain.com/

I host my test application for this tutorial locally and have chosen the following directory: http://localhost:81/vue-matomo-test/matomo .

Additionally you can protect the Matomo site with a .htaccess and .htpasswd to provide even more security.

In the next step you have to create a MySQL database at your hoster or locally. If you want to create a local database, I can recommend the program XAMPP .

You need a database and a MySQL user with a secure password that has all rights for the database.

Once you have chosen your URL, put the downloaded files inside and created a database, you can simply visit the page. This is what you will see there:

Here you can now go through the eight steps and enter the required data. All steps are self-explanatory and should not be a problem.

When you reach the end, this view appears. If you run your Vue.js site in the EU, you should check the box “Anonymize the last byte(s) of visitors IP addresses to comply with your local privacy laws/guidelines .

Nevertheless again the hint that you should consult your data protection officer for legal questions, I cannot and do not give any information or recommendations!

The installation is now complete. You can now open Matomo for the first time.

We need the information marked in red again in step 4.1 – so please write it down.

Besides Matomo you can also integrate Google Analytics into Vue.js to collect even more data.

2. Create Vue project

Now we come to the Vue.js part, of course we have to create a Vue.js application first, if not already done. We can do that easily with the Vue CLI.

If you are just starting out and want to learn Vue.js, I have examples of how to learn Vue.js here.

vue create vue-matomo-test
    import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueMatomo from 'vue-matomo';
Vue.config.productionTip = false;
Vue.use(VueMatomo, {
  host: "https://your-local-matomo-url.com/",
  siteId: 1,
  trackerFileName: 'matomo',
  router: router,
  enableLinkTracking: true,
  requireConsent: false,
  trackInitialView: true,
  disableCookies: false,
  enableHeartBeatTimer: false,
  heartBeatTimerInterval: 15,
  debug: false,
  userId: undefined,
  cookieDomain: undefined,
  domains: undefined,
  preInitActions: []
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
    
// src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
    path: "/",
    name: "Home",
    component: Home
    path: "/about",
    name: "About",
    meta: {
      analyticsIgnore: true
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
export default router;
    
Matomo offers the possibility to activate an opt-in for tracking. This means that a user must first actively agree that his visit may be tracked.
For this purpose we set the parameter requireConsent in our main.js to true. This way the visitor is no longer tracked.
You can now create a hint, like when you visit this page, where the user has to agree before his visit via a button. This can be implemented as an example:

<template>
  <div class="home">
    <button @click="allowCookies">Accept Cookies</button>
    <img alt="Vue logo" loading="lazy" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld
  methods: {
    allowCookies() {
      this.$matomo.rememberConsentGiven();
</script>
    
This function must be executed once by the user. So calls to the subpages are tracked after the approval. Important is the call of the method this.$matomo.rememberConsentGiven();. You can find more information about this directly at matomo.org.
So you have all the information you need for successful tracking with Vue.js and Matomo! If you have any questions, you will find the comment field below. 🙂
If you're interested in more tutorials, code snippets and more, follow me on twitter on checkout my blog.
      
Built on Forem — the open source software that powers DEV and other inclusive communities.
      
Made with love and Ruby on Rails. DEV Community © 2016 - 2024.