Matomo-Tracking mit Einwilligung einbauen
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
.analytics-consent[hidden],
|
||||
.analytics-consent-settings[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.analytics-consent {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
background: #ffffff;
|
||||
border-top: solid 1px rgba(210, 215, 217, 0.95);
|
||||
box-shadow: 0 -0.75rem 2rem rgba(61, 68, 73, 0.14);
|
||||
color: #3d4449;
|
||||
padding: 1.25rem 6vw;
|
||||
}
|
||||
|
||||
.analytics-consent__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.analytics-consent__copy {
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.analytics-consent h2 {
|
||||
color: #3d4449;
|
||||
font-size: 1.15rem;
|
||||
margin: 0 0 0.35rem;
|
||||
}
|
||||
|
||||
.analytics-consent p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.analytics-consent a {
|
||||
color: #2f6418;
|
||||
}
|
||||
|
||||
.analytics-consent__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.analytics-consent__actions button,
|
||||
.analytics-consent-settings {
|
||||
appearance: none;
|
||||
background: #38761d;
|
||||
border: solid 2px #38761d;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.25;
|
||||
padding: 0.8rem 1rem;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.analytics-consent__actions button:hover,
|
||||
.analytics-consent-settings:hover {
|
||||
background: #2f6418;
|
||||
border-color: #2f6418;
|
||||
}
|
||||
|
||||
.analytics-consent__actions button:focus-visible,
|
||||
.analytics-consent-settings:focus-visible {
|
||||
outline: solid 3px #f0b429;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.analytics-consent-settings {
|
||||
position: fixed;
|
||||
bottom: 0.75rem;
|
||||
left: 0.75rem;
|
||||
z-index: 9999;
|
||||
background: #ffffff;
|
||||
color: #2f6418 !important;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 736px) {
|
||||
.analytics-consent {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.analytics-consent__inner,
|
||||
.analytics-consent__actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.analytics-consent__inner {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.analytics-consent__actions {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.analytics-consent__actions button {
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}());
|
||||
Reference in New Issue
Block a user