Sprint 14: Impressum, Datenschutz, Google Analytics (cookieless)
- Impressum-Seite (§5 TMG / §18 MStV) mit René Degelmanns Daten - Datenschutzerklärung (DSGVO) mit GA-Erläuterung und Opt-out - Google Analytics G-YLG780DV3Z, Option B (cookieless, kein Consent nötig) - Sidebar-Footer-Links Impressum / Datenschutz - APP_VER → 86, SW-Cache → by-v110
This commit is contained in:
parent
21e50c6c7b
commit
6698543d14
5 changed files with 327 additions and 22 deletions
|
|
@ -22,8 +22,8 @@
|
|||
|
||||
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
|
||||
<link rel="stylesheet" href="/css/design-system.css">
|
||||
<link rel="stylesheet" href="/css/layout.css?v=81">
|
||||
<link rel="stylesheet" href="/css/components.css?v=81">
|
||||
<link rel="stylesheet" href="/css/layout.css?v=86">
|
||||
<link rel="stylesheet" href="/css/components.css?v=86">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -119,6 +119,14 @@
|
|||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>
|
||||
<span id="sidebar-username">Anmelden</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:var(--space-4);padding-top:var(--space-3);
|
||||
border-top:1px solid var(--c-border,#e5e7eb);
|
||||
font-size:var(--text-xs);color:var(--c-text-muted);
|
||||
display:flex;gap:var(--space-3);padding-bottom:var(--space-2)">
|
||||
<span data-page="impressum" style="cursor:pointer;text-decoration:underline">Impressum</span>
|
||||
<span data-page="datenschutz" style="cursor:pointer;text-decoration:underline">Datenschutz</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
|
@ -231,6 +239,14 @@
|
|||
<div class="page-body page-container-chat"></div>
|
||||
</section>
|
||||
|
||||
<section class="page" id="page-impressum">
|
||||
<div class="page-body page-container"></div>
|
||||
</section>
|
||||
|
||||
<section class="page" id="page-datenschutz">
|
||||
<div class="page-body page-container"></div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- MOBILE BOTTOM NAVIGATION -->
|
||||
|
|
@ -269,12 +285,86 @@
|
|||
<div id="modal-container"></div>
|
||||
|
||||
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
|
||||
<script src="/js/api.js?v=81"></script>
|
||||
<script src="/js/ui.js?v=81"></script>
|
||||
<script src="/js/app.js?v=81"></script>
|
||||
<script src="/js/api.js?v=86"></script>
|
||||
<script src="/js/ui.js?v=86"></script>
|
||||
<script src="/js/app.js?v=86"></script>
|
||||
|
||||
<!-- Feature-Seiten werden lazy geladen -->
|
||||
|
||||
<!-- Google Analytics (Option B: cookieless/anonymisiert, kein Consent nötig)
|
||||
Wechsel zu Option A (mit Consent-Banner): GA_MODE auf 'A' setzen -->
|
||||
<script>
|
||||
(function() {
|
||||
var GA_ID = 'G-YLG780DV3Z';
|
||||
var GA_MODE = 'B'; // 'B' = cookieless | 'A' = mit Consent-Banner
|
||||
|
||||
function _loadGA(withConsent) {
|
||||
var s = document.createElement('script');
|
||||
s.async = true;
|
||||
s.src = 'https://www.googletagmanager.com/gtag/js?id=' + GA_ID;
|
||||
document.head.appendChild(s);
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function(){ dataLayer.push(arguments); };
|
||||
gtag('js', new Date());
|
||||
if (withConsent) {
|
||||
gtag('config', GA_ID, { anonymize_ip: true });
|
||||
} else {
|
||||
// Option B: komplett cookieless
|
||||
gtag('config', GA_ID, { anonymize_ip: true, storage: 'none', client_storage: 'none' });
|
||||
}
|
||||
}
|
||||
|
||||
// Opt-out respektieren (setzbar über Datenschutz-Seite)
|
||||
if (localStorage.getItem('gaOptOut') === 'yes') return;
|
||||
|
||||
if (GA_MODE === 'B') {
|
||||
_loadGA(false);
|
||||
|
||||
} else {
|
||||
// Option A: Consent-Banner
|
||||
var consent = localStorage.getItem('gaConsent');
|
||||
if (consent === 'yes') { _loadGA(true); }
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
if (consent !== null) return;
|
||||
var banner = document.getElementById('ga-consent-banner');
|
||||
if (banner) banner.style.display = 'flex';
|
||||
document.getElementById('ga-consent-accept')?.addEventListener('click', function() {
|
||||
localStorage.setItem('gaConsent', 'yes');
|
||||
_loadGA(true);
|
||||
banner.style.display = 'none';
|
||||
});
|
||||
document.getElementById('ga-consent-decline')?.addEventListener('click', function() {
|
||||
localStorage.setItem('gaConsent', 'no');
|
||||
banner.style.display = 'none';
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- GA Consent-Banner (nur für Option A aktiv, im Mode B versteckt) -->
|
||||
<div id="ga-consent-banner"
|
||||
style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:9000;
|
||||
background:var(--c-surface,#fff);border-top:1px solid var(--c-border,#e5e7eb);
|
||||
padding:var(--space-3) var(--space-4);flex-wrap:wrap;
|
||||
align-items:center;gap:var(--space-3)">
|
||||
<span style="flex:1;min-width:200px;font-size:var(--text-xs);color:var(--c-text-secondary)">
|
||||
Wir nutzen Google Analytics (anonymisiert) um die App zu verbessern.
|
||||
<span data-page="datenschutz" style="color:var(--c-primary);cursor:pointer;text-decoration:underline">Mehr erfahren</span>
|
||||
</span>
|
||||
<div style="display:flex;gap:var(--space-2)">
|
||||
<button id="ga-consent-decline"
|
||||
style="padding:var(--space-2) var(--space-3);border:1px solid var(--c-border,#e5e7eb);
|
||||
border-radius:var(--radius-md);background:transparent;cursor:pointer;
|
||||
font-size:var(--text-xs);color:var(--c-text-secondary)">Ablehnen</button>
|
||||
<button id="ga-consent-accept"
|
||||
style="padding:var(--space-2) var(--space-3);border:none;
|
||||
border-radius:var(--radius-md);background:var(--c-primary,#C4843A);
|
||||
color:#fff;cursor:pointer;font-size:var(--text-xs)">Akzeptieren</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Worker -->
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue