Fix matomo

app/App.vue

@@ -17,44 +17,5 @@ export default {
   components: {
     HeaderComponent,
   },
-  mounted() {
-    // Stats Matomo
-    if (!(navigator.doNotTrack === 'yes'
-        || navigator.doNotTrack === '1'
-        || navigator.msDoNotTrack === '1'
-        || window.doNotTrack === '1')) {
-
-      var _paq = _paq || []; // eslint-disable-line
-
-      // Conformité CNIL
-      _paq.push([function piwikCNIL() {
-        const self = this;
-        function getOriginalVisitorCookieTimeout() {
-          const now = new Date();
-          const nowTs = Math.round(now.getTime() / 1000);
-          const visitorInfo = self.getVisitorInfo();
-          const createTs = parseInt(visitorInfo[2], 10);
-          const cookieTimeout = 33696000; // 13 mois en secondes
-          const originalTimeout = (createTs + cookieTimeout) - nowTs;
-          return originalTimeout;
-        }
-        this.setVisitorCookieTimeout(getOriginalVisitorCookieTimeout());
-      }]);
-
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      // Code Piwik JS
-      (function piwikJS() {
-        const u = 'https://stats.framasoft.org/';
-        _paq.push(['setTrackerUrl', [u, 'p.php'].join('')]);
-        _paq.push(['setSiteId', 68]);
-        const d = document;
-        const g = d.createElement('script');
-        const s = d.getElementsByTagName('script')[0];
-        g.type = 'text/javascript'; g.defer = true; g.async = true;
-        g.src = [u, 'p.js'].join(''); s.parentNode.insertBefore(g, s);
-      }());
-    }
-  },
 }
 </script>

app/index.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import VueMatomo from 'vue-matomo';
 import VueRouter from 'vue-router';
 import VueI18n from 'vue-i18n';
 import vueHeadful from 'vue-headful';
@@ -139,6 +140,53 @@ const router = new VueRouter({
   base: `${__dirname}${process.env.BASE_URL}`,
 });
 
+// Stats Matomo
+if (!(navigator.doNotTrack === 'yes'
+  || navigator.doNotTrack === '1'
+  || navigator.msDoNotTrack === '1'
+  || window.doNotTrack === '1')
+) {
+  Vue.use(VueMatomo, {
+    // Configure your matomo server and site
+    host: 'https://stats.framasoft.org/',
+    siteId: 68,
+
+    // Enables automatically registering pageviews on the router
+    router,
+
+    // 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: 'p',
+
+    enableLinkTracking: true,
+  });
+
+  const _paq = _paq || []; // eslint-disable-line
+
+  // Conformité CNIL
+  _paq.push([function piwikCNIL() {
+    const self = this;
+    function getOriginalVisitorCookieTimeout() {
+      const now = new Date();
+      const nowTs = Math.round(now.getTime() / 1000);
+      const visitorInfo = self.getVisitorInfo();
+      const createTs = parseInt(visitorInfo[2], 10);
+      const cookieTimeout = 33696000; // 13 mois en secondes
+      const originalTimeout = (createTs + cookieTimeout) - nowTs;
+      return originalTimeout;
+    }
+    this.setVisitorCookieTimeout(getOriginalVisitorCookieTimeout());
+  }]);
+}
+
 new Vue({ // eslint-disable-line no-new
   el: '#app',
   router,

package-lock.json

@@ -13472,6 +13472,11 @@
         }
       }
     },
+    "vue-matomo": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vue-matomo/-/vue-matomo-0.3.2.tgz",
+      "integrity": "sha512-QI0gdG94HXcOzgbhYBCQnP9fZ5C+DH2KLXpBSPFWTp6/DKHsZkGPmyprdsttCSXKAYOwyul2YGJcFU6O33FFbg=="
+    },
     "vue-router": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-2.8.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "vue": "^2.5.16",
     "vue-headful": "^2.0.1",
     "vue-i18n": "^7.6.0",
+    "vue-matomo": "^0.3.2",
     "vue-router": "^2.8.1"
   },
   "devDependencies": {