Matomo-Tracking und Aufrufzaehlung absichern

assets/js/privacy-settings.js

@@ -17,29 +17,31 @@
     }
 
     var cookieName = configuration.consentCookie;
+    var visitorCookieName = configuration.visitorCookie;
     var consentVersion = configuration.consentVersion;
-    var matomoStarted = false;
+    var pageViewSent = false;
 
-    function readDecision() {
+    function readCookie(name) {
         var cookies = document.cookie ? document.cookie.split(';') : [];
         for (var index = 0; index < cookies.length; index += 1) {
             var parts = cookies[index].trim().split('=');
-            var name = decodeURIComponent(parts.shift() || '');
-            if (name !== cookieName) {
-                continue;
+            var currentName = decodeURIComponent(parts.shift() || '');
+            if (currentName === name) {
+                return decodeURIComponent(parts.join('='));
             }
+        }
+        return null;
+    }
 
-            var value = decodeURIComponent(parts.join('='));
-            var expectedPrefix = consentVersion + ':';
-            if (value.indexOf(expectedPrefix) !== 0) {
-                return null;
-            }
-
-            var decision = value.slice(expectedPrefix.length);
-            return decision === 'granted' || decision === 'denied' ? decision : null;
+    function readDecision() {
+        var value = readCookie(cookieName);
+        var expectedPrefix = consentVersion + ':';
+        if (!value || value.indexOf(expectedPrefix) !== 0) {
+            return null;
         }
 
-        return null;
+        var decision = value.slice(expectedPrefix.length);
+        return decision === 'granted' || decision === 'denied' ? decision : null;
     }
 
     function cookieSuffix() {
@@ -53,10 +55,29 @@
         return suffix;
     }
 
+    function writeCookie(name, value) {
+        document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + cookieSuffix();
+    }
+
     function writeDecision(decision) {
-        document.cookie = encodeURIComponent(cookieName)
-            + '=' + encodeURIComponent(consentVersion + ':' + decision)
-            + cookieSuffix();
+        writeCookie(cookieName, consentVersion + ':' + decision);
+    }
+
+    function randomVisitorId() {
+        var bytes = new Uint8Array(8);
+        window.crypto.getRandomValues(bytes);
+        return Array.prototype.map.call(bytes, function (value) {
+            return value.toString(16).padStart(2, '0');
+        }).join('');
+    }
+
+    function ensureVisitorId() {
+        var visitorId = readCookie(visitorCookieName);
+        if (!visitorId || !/^[0-9a-f]{16}$/.test(visitorId)) {
+            visitorId = randomVisitorId();
+            writeCookie(visitorCookieName, visitorId);
+        }
+        return visitorId;
     }
 
     function URLWithoutParameters(value) {
@@ -68,46 +89,36 @@
         }
     }
 
-    function startMatomo() {
-        window._paq = window._paq || [];
-
-        if (matomoStarted) {
-            window._paq.push(['setConsentGiven']);
-            window._paq.push(['trackPageView']);
+    function sendPageView() {
+        if (pageViewSent || readDecision() !== 'granted') {
             return;
         }
-        matomoStarted = true;
+        pageViewSent = true;
 
-        var trackerUrl = configuration.matomoUrl + 'matomo.php';
-        window._paq.push(['requireConsent']);
-        window._paq.push(['setTrackerUrl', trackerUrl]);
-        window._paq.push(['setSiteId', configuration.siteId]);
-        window._paq.push(['setDoNotTrack', true]);
-        window._paq.push(['disableBrowserFeatureDetection']);
-        window._paq.push(['disablePerformanceTracking']);
-        window._paq.push(['setCookiePath', '/']);
-        window._paq.push(['setCookieSameSite', 'Lax']);
-        window._paq.push(['setSecureCookie', window.location.protocol === 'https:']);
-        window._paq.push(['setVisitorCookieTimeout', configuration.consentMaxAge]);
-        window._paq.push(['setReferralCookieTimeout', configuration.consentMaxAge]);
-        window._paq.push(['setCustomUrl', URLWithoutParameters(window.location.href)]);
+        var now = new Date();
+        var payload = {
+            visitorId: ensureVisitorId(),
+            pageUrl: URLWithoutParameters(window.location.href),
+            pageTitle: document.title || 'Kaffeeliste',
+            referrerUrl: URLWithoutParameters(document.referrer),
+            resolution: window.screen && window.screen.width && window.screen.height
+                ? String(window.screen.width) + 'x' + String(window.screen.height)
+                : '',
+            language: window.navigator.language || '',
+            h: now.getHours(),
+            m: now.getMinutes(),
+            s: now.getSeconds()
+        };
 
-        var referrer = URLWithoutParameters(document.referrer);
-        if (referrer) {
-            window._paq.push(['setReferrerUrl', referrer]);
-        }
-        if (configuration.cookieDomain) {
-            window._paq.push(['setCookieDomain', configuration.cookieDomain]);
-        }
-
-        window._paq.push(['setConsentGiven']);
-        window._paq.push(['trackPageView']);
-
-        var script = document.createElement('script');
-        script.async = true;
-        script.src = configuration.matomoUrl + 'matomo.js';
-        script.referrerPolicy = 'strict-origin-when-cross-origin';
-        document.head.appendChild(script);
+        window.fetch(configuration.trackingEndpoint, {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(payload),
+            keepalive: true
+        }).catch(function () {
+            // Analysefehler duerfen die Website niemals beeintraechtigen.
+        });
     }
 
     function expireCookie(name, domain) {
@@ -121,11 +132,11 @@
         document.cookie = value;
     }
 
-    function removeMatomoCookies() {
+    function removeAnalysisCookies() {
         var cookies = document.cookie ? document.cookie.split(';') : [];
         cookies.forEach(function (cookie) {
             var name = decodeURIComponent(cookie.trim().split('=')[0] || '');
-            if (name.indexOf('_pk_') !== 0 && name.indexOf('mtm_') !== 0) {
+            if (name !== visitorCookieName && name.indexOf('_pk_') !== 0 && name.indexOf('mtm_') !== 0) {
                 return;
             }
             expireCookie(name, '');
@@ -135,14 +146,6 @@
         });
     }
 
-    function stopMatomo() {
-        if (window._paq) {
-            window._paq.push(['forgetConsentGiven']);
-            window._paq.push(['deleteCookies']);
-        }
-        removeMatomoCookies();
-    }
-
     function closeBanner() {
         banner.hidden = true;
         settingsButton.hidden = false;
@@ -152,9 +155,9 @@
         writeDecision(decision);
         closeBanner();
         if (decision === 'granted') {
-            startMatomo();
+            sendPageView();
         } else {
-            stopMatomo();
+            removeAnalysisCookies();
         }
         window.dispatchEvent(new CustomEvent('kaffeeliste:analytics-consent', {
             detail: {analytics: decision}
@@ -179,10 +182,10 @@
     var initialDecision = readDecision();
     if (initialDecision === 'granted') {
         settingsButton.hidden = false;
-        startMatomo();
+        sendPageView();
     } else if (initialDecision === 'denied') {
         settingsButton.hidden = false;
-        stopMatomo();
+        removeAnalysisCookies();
     } else {
         banner.hidden = false;
     }