Cookie Consent DSGVO-konform umsetzen: Vollständiger Leitfaden

Ein DSGVO-konformer Cookie-Banner ist Pflicht für fast jede Website. Doch viele Implementierungen sind fehlerhaft und riskieren Bußgelder bis zu 150 Millionen Euro - wie das Beispiel SHEIN in Frankreich zeigt. Dieser Guide zeigt, wie Sie es richtig machen.

DSGVO-Anforderungen an Cookie Consent

Die DSGVO und das TTDSG stellen klare Anforderungen:

1. Informierte Einwilligung: Nutzer müssen verstehen, wozu sie zustimmen
2. Freiwilligkeit: Echte Wahlmöglichkeit, kein Zwang
3. Opt-In für nicht-essentielle Cookies: Vorher fragen, nicht nachher
4. Widerrufbarkeit: Einwilligung muss jederzeit widerrufbar sein
5. Dokumentation: Einwilligungen müssen nachweisbar sein

Cookie-Kategorien verstehen

1. Essentielle Cookies (Notwendig)

Kein Consent erforderlich

• Session-Cookies für den Login
• Warenkorb-Cookies im E-Commerce
• Cookie-Consent-Speicherung selbst
• Load-Balancer-Cookies

2. Analyse/Statistik Cookies

Consent erforderlich

• Google Analytics
• Matomo (wenn nicht anonymisiert)
• Hotjar, Clarity
• Eigene Tracking-Lösungen

3. Marketing/Werbung Cookies

Consent erforderlich

• Google Ads Remarketing
• Facebook Pixel
• LinkedIn Insight Tag
• Affiliate-Tracking

4. Präferenzen/Funktionen

Consent empfohlen

• Spracheinstellungen
• Theme-Präferenzen
• Chat-Widget-Daten

Grundstruktur eines Cookie-Banners

HTML-Struktur

<div id="cookie-consent" role="dialog" aria-modal="true" aria-labelledby="cookie-title">
  <div class="cookie-content">
    <h2 id="cookie-title">Cookie-Einstellungen</h2>
    <p>
      Wir verwenden Cookies, um Ihnen die beste Erfahrung zu bieten.
      <a href="/datenschutz/">Mehr erfahren</a>
    </p>

    <div class="cookie-options">
      <label>
        <input type="checkbox" id="essential" checked disabled>
        Notwendig (immer aktiv)
      </label>
      <label>
        <input type="checkbox" id="analytics">
        Analyse & Statistik
      </label>
      <label>
        <input type="checkbox" id="marketing">
        Marketing
      </label>
    </div>

    <div class="cookie-buttons">
      <button id="accept-all">Alle akzeptieren</button>
      <button id="accept-selected">Auswahl bestätigen</button>
      <button id="reject-all">Nur notwendige</button>
    </div>
  </div>
</div>

JavaScript-Logik

const CONSENT_KEY = 'cookie-consent';

function getConsent() {
  try {
    return JSON.parse(localStorage.getItem(CONSENT_KEY)) || null;
  } catch {
    return null;
  }
}

function setConsent(consent) {
  localStorage.setItem(CONSENT_KEY, JSON.stringify({
    ...consent,
    timestamp: new Date().toISOString()
  }));

  // Custom Event für andere Scripts
  window.dispatchEvent(new CustomEvent('cookieConsentChanged', {
    detail: consent
  }));
}

function acceptAll() {
  setConsent({ essential: true, analytics: true, marketing: true });
  hideBanner();
  loadConsentedScripts();
}

function acceptSelected() {
  setConsent({
    essential: true,
    analytics: document.getElementById('analytics').checked,
    marketing: document.getElementById('marketing').checked
  });
  hideBanner();
  loadConsentedScripts();
}

function rejectAll() {
  setConsent({ essential: true, analytics: false, marketing: false });
  hideBanner();
}

Scripts erst nach Consent laden

Vor dem Consent: Scripts blockieren

<!-- FALSCH - lädt sofort -->
<script src="https://www.googletagmanager.com/gtag/js"></script>

<!-- RICHTIG - lädt erst nach Consent -->
<script type="text/plain" data-category="analytics"
        data-src="https://www.googletagmanager.com/gtag/js"></script>

Nach Consent: Scripts aktivieren

function loadConsentedScripts() {
  const consent = getConsent();

  document.querySelectorAll('script[type="text/plain"]').forEach(script => {
    const category = script.dataset.category;

    if (consent[category]) {
      const newScript = document.createElement('script');
      newScript.src = script.dataset.src;
      document.head.appendChild(newScript);
    }
  });
}

Google Consent Mode v2

Seit März 2024 erfordert Google Consent Mode v2 für EWR-Traffic:

// Standardmäßig verweigert (vor dem Banner)
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('consent', 'default', {
  'ad_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied',
  'analytics_storage': 'denied',
  'wait_for_update': 500
});

// Nach Consent-Erteilung aktualisieren
function updateGoogleConsent(consent) {
  gtag('consent', 'update', {
    'ad_storage': consent.marketing ? 'granted' : 'denied',
    'ad_user_data': consent.marketing ? 'granted' : 'denied',
    'ad_personalization': consent.marketing ? 'granted' : 'denied',
    'analytics_storage': consent.analytics ? 'granted' : 'denied'
  });
}

Einwilligung widerrufen

Nutzer müssen ihre Einwilligung jederzeit widerrufen können:

<!-- Link im Footer -->
<button onclick="window.openCookieSettings()">
  Cookie-Einstellungen
</button>

window.openCookieSettings = function() {
  // Aktuellen Consent laden und anzeigen
  const consent = getConsent();
  document.getElementById('analytics').checked = consent?.analytics || false;
  document.getElementById('marketing').checked = consent?.marketing || false;

  // Banner wieder anzeigen
  document.getElementById('cookie-consent').classList.add('visible');
};

Mobile-Optimierung

Probleme vermeiden

/* Cookie-Banner darf nicht die ganze Seite verdecken */
#cookie-consent {
  max-height: 80vh;
  overflow-y: auto;
}

/* Touch-freundliche Buttons */
.cookie-buttons button {
  min-height: 48px;
  padding: 12px 24px;
}

/* Checkboxen groß genug */
.cookie-options input[type="checkbox"] {
  width: 24px;
  height: 24px;
}

Accessibility (Barrierefreiheit)

WCAG-Anforderungen

<div
  id="cookie-consent"
  role="dialog"
  aria-modal="true"
  aria-labelledby="cookie-title"
  aria-describedby="cookie-description"
>
  <h2 id="cookie-title">Cookie-Einstellungen</h2>
  <p id="cookie-description">
    Wählen Sie, welche Cookies Sie akzeptieren möchten.
  </p>

  <!-- Focus-Management -->
  <button autofocus id="accept-all">Alle akzeptieren</button>
</div>

Focus-Trap

function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'button, [href], input, select, textarea'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  element.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });

  first.focus();
}

Häufige DSGVO-Verstöße

1. Vorangekreuzte Checkboxen

<!-- FALSCH -->
<input type="checkbox" id="marketing" checked>

<!-- RICHTIG -->
<input type="checkbox" id="marketing">

2. Kein “Ablehnen”-Button

Der Ablehnen-Button muss genauso prominent sein wie “Akzeptieren”.

3. Dark Patterns

• “Akzeptieren” in grün, “Ablehnen” in grau
• “Ablehnen” versteckt hinter “Einstellungen”
• Wiederholte Aufforderungen nach Ablehnung

4. Cookies vor Consent

Scripts werden geladen, bevor der Nutzer zustimmt.

5. Keine Widerrufsmöglichkeit

Nutzer können ihre Einwilligung nicht ändern.

Consent dokumentieren

Für Compliance sollten Sie Einwilligungen dokumentieren:

function setConsent(consent) {
  const consentRecord = {
    ...consent,
    timestamp: new Date().toISOString(),
    userAgent: navigator.userAgent,
    url: window.location.href
  };

  // Lokal speichern
  localStorage.setItem(CONSENT_KEY, JSON.stringify(consentRecord));

  // Optional: An Server senden
  fetch('/api/consent', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(consentRecord)
  });
}

Consent Management Plattformen (CMPs)

Wann eine CMP nutzen?

• Bei vielen Third-Party-Scripts
• Für internationalen Traffic
• Wenn IAB TCF erforderlich ist
• Für einfachere Compliance

Empfohlene CMPs

CMP	Kostenlos	Vorteile
Cookiebot	Begrenzt	Automatisches Scanning
Usercentrics	Nein	Umfangreiche Features
Klaro	Ja (Open Source)	Selbst gehostet
Osano	Begrenzt	Einfache Einrichtung

Checkliste DSGVO-konformer Cookie Consent

• Opt-In für alle nicht-essentiellen Cookies
• Keine vorangekreuzten Checkboxen
• “Ablehnen”-Button gleichwertig sichtbar
• Cookie-Kategorien erklärt
• Link zur Datenschutzerklärung
• Widerrufsmöglichkeit vorhanden
• Scripts erst nach Consent laden
• Google Consent Mode v2 implementiert
• Mobile-optimiert
• Barrierefrei (ARIA, Focus-Management)
• Dokumentation der Einwilligungen

Fazit

Ein DSGVO-konformer Cookie-Banner schützt Sie vor Bußgeldern und zeigt Besuchern, dass Sie Datenschutz ernst nehmen. Mit den richtigen Techniken - Opt-In, gleichwertige Buttons, Consent Mode - können Sie Compliance und Nutzerfreundlichkeit verbinden.

Für eine vollständige technische SEO-Implementierung inklusive Datenschutz beraten wir Sie gerne.

---

FAQ

Brauche ich einen Cookie-Banner, wenn ich nur essentielle Cookies nutze?

Bei ausschließlich technisch notwendigen Cookies ist kein Banner erforderlich. Allerdings sollten Sie in der Datenschutzerklärung darüber informieren.

Wie lange darf Consent gespeichert werden?

Die DSGVO gibt keine genaue Frist vor. Empfohlen werden 6-12 Monate, danach sollten Sie erneut fragen.

Gilt die DSGVO auch für Nutzer außerhalb der EU?

Die DSGVO gilt, wenn Sie Ihre Website an EU-Bürger richten oder deren Verhalten beobachten - unabhängig davon, wo die Nutzer gerade sind.

Muss ich jedes Cookie einzeln aufführen?

Nein, Kategorien reichen aus. Allerdings müssen Sie in der Datenschutzerklärung detailliert informieren, welche Cookies Sie setzen.