Matomo-Tracking mit Einwilligung einbauen

2026-08-27 09:20:46 +02:00
parent a2dcc4df65
commit 528af07890
28 changed files with 793 additions and 2 deletions
@@ -0,0 +1,189 @@
+(function () {
+    'use strict';
+
+    var configurationElement = document.getElementById('analytics-configuration');
+    var banner = document.getElementById('analytics-consent');
+    var settingsButton = document.getElementById('analytics-consent-settings');
+
+    if (!configurationElement || !banner || !settingsButton) {
+        return;
+    }
+
+    var configuration;
+    try {
+        configuration = JSON.parse(configurationElement.textContent || '');
+    } catch (error) {
+        return;
+    }
+
+    var cookieName = configuration.consentCookie;
+    var consentVersion = configuration.consentVersion;
+    var matomoStarted = false;
+
+    function readDecision() {
+        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 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;
+        }
+
+        return null;
+    }
+
+    function cookieSuffix() {
+        var suffix = '; Path=/; Max-Age=' + String(configuration.consentMaxAge) + '; SameSite=Lax';
+        if (configuration.cookieDomain) {
+            suffix += '; Domain=' + configuration.cookieDomain;
+        }
+        if (configuration.secureCookies || window.location.protocol === 'https:') {
+            suffix += '; Secure';
+        }
+        return suffix;
+    }
+
+    function writeDecision(decision) {
+        document.cookie = encodeURIComponent(cookieName)
+            + '=' + encodeURIComponent(consentVersion + ':' + decision)
+            + cookieSuffix();
+    }
+
+    function URLWithoutParameters(value) {
+        try {
+            var url = new URL(value, window.location.href);
+            return url.origin + url.pathname;
+        } catch (error) {
+            return '';
+        }
+    }
+
+    function startMatomo() {
+        window._paq = window._paq || [];
+
+        if (matomoStarted) {
+            window._paq.push(['setConsentGiven']);
+            window._paq.push(['trackPageView']);
+            return;
+        }
+        matomoStarted = 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 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);
+    }
+
+    function expireCookie(name, domain) {
+        var value = encodeURIComponent(name) + '=; Path=/; Max-Age=0; SameSite=Lax';
+        if (domain) {
+            value += '; Domain=' + domain;
+        }
+        if (configuration.secureCookies || window.location.protocol === 'https:') {
+            value += '; Secure';
+        }
+        document.cookie = value;
+    }
+
+    function removeMatomoCookies() {
+        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) {
+                return;
+            }
+            expireCookie(name, '');
+            if (configuration.cookieDomain) {
+                expireCookie(name, configuration.cookieDomain);
+            }
+        });
+    }
+
+    function stopMatomo() {
+        if (window._paq) {
+            window._paq.push(['forgetConsentGiven']);
+            window._paq.push(['deleteCookies']);
+        }
+        removeMatomoCookies();
+    }
+
+    function closeBanner() {
+        banner.hidden = true;
+        settingsButton.hidden = false;
+    }
+
+    function choose(decision) {
+        writeDecision(decision);
+        closeBanner();
+        if (decision === 'granted') {
+            startMatomo();
+        } else {
+            stopMatomo();
+        }
+        window.dispatchEvent(new CustomEvent('kaffeeliste:analytics-consent', {
+            detail: {analytics: decision}
+        }));
+    }
+
+    banner.querySelectorAll('[data-analytics-consent]').forEach(function (button) {
+        button.addEventListener('click', function () {
+            choose(button.getAttribute('data-analytics-consent'));
+        });
+    });
+
+    settingsButton.addEventListener('click', function () {
+        banner.hidden = false;
+        settingsButton.hidden = true;
+        var firstButton = banner.querySelector('[data-analytics-consent="denied"]');
+        if (firstButton) {
+            firstButton.focus();
+        }
+    });
+
+    var initialDecision = readDecision();
+    if (initialDecision === 'granted') {
+        settingsButton.hidden = false;
+        startMatomo();
+    } else if (initialDecision === 'denied') {
+        settingsButton.hidden = false;
+        stopMatomo();
+    } else {
+        banner.hidden = false;
+    }
+}());