# Consent-Banner-Vorlage für verbraucherzentrale.de

verbraucherzentrale.de: Banner-Vorlage mit 6 Kategorien, 3 Dienstsignal(en), 3 Prior-Blocking-Regel(n) und Default-Denied Consent Mode.

> Diese Banner-Vorlage ist kein vollständiger CMP-Dienst. Betreiber müssen prior blocking, Backend/Consent-Ledger, Rechtsgrundlagen, Barrierefreiheit, Lokalisierung und Re-Scan vor Produktivstart fachlich freigeben.

## Kategorien
- Notwendig: Erforderliche Dienste für Sicherheit und Grundfunktionen. Default: active
- Statistik: Reichweitenmessung und Analyse erst nach Einwilligung. Default: denied
- Marketing / Tracking: Werbung, Profiling, Retargeting und Tracking erst nach Einwilligung. Default: denied
- Externe Medien: Videos, Karten, Captchas, Fonts und eingebettete Inhalte verzögert laden. Default: denied
- Komfort: Optionale Funktionen getrennt von Statistik und Marketing steuerbar machen. Default: denied
- Unklar / klassifizieren: Unklare Dienste bleiben aus, bis Zweck und Rechtsgrundlage geklärt sind. Default: denied

## Code
### HTML/CSS/JS Banner-Vorlage

```html
<link rel="stylesheet" href="https://saferpage.de/assets/consent-banner.css?v=20260610a">
<div id="saferpage-consent" class="sp-consent" data-sp-host="verbraucherzentrale.de" data-sp-categories="[{&quot;id&quot;:&quot;notwendig&quot;,&quot;label&quot;:&quot;Notwendig&quot;,&quot;description&quot;:&quot;Erforderliche Dienste für Sicherheit und Grundfunktionen.&quot;,&quot;default_state&quot;:&quot;active&quot;},{&quot;id&quot;:&quot;statistik&quot;,&quot;label&quot;:&quot;Statistik&quot;,&quot;description&quot;:&quot;Reichweitenmessung und Analyse erst nach Einwilligung.&quot;,&quot;default_state&quot;:&quot;denied&quot;},{&quot;id&quot;:&quot;marketing&quot;,&quot;label&quot;:&quot;Marketing / Tracking&quot;,&quot;description&quot;:&quot;Werbung, Profiling, Retargeting und Tracking erst nach Einwilligung.&quot;,&quot;default_state&quot;:&quot;denied&quot;},{&quot;id&quot;:&quot;externe_medien&quot;,&quot;label&quot;:&quot;Externe Medien&quot;,&quot;description&quot;:&quot;Videos, Karten, Captchas, Fonts und eingebettete Inhalte verzögert laden.&quot;,&quot;default_state&quot;:&quot;denied&quot;},{&quot;id&quot;:&quot;komfort&quot;,&quot;label&quot;:&quot;Komfort&quot;,&quot;description&quot;:&quot;Optionale Funktionen getrennt von Statistik und Marketing steuerbar machen.&quot;,&quot;default_state&quot;:&quot;denied&quot;},{&quot;id&quot;:&quot;unklar&quot;,&quot;label&quot;:&quot;Unklar / klassifizieren&quot;,&quot;description&quot;:&quot;Unklare Dienste bleiben aus, bis Zweck und Rechtsgrundlage geklärt sind.&quot;,&quot;default_state&quot;:&quot;denied&quot;}]" hidden>
  <div class="sp-consent__panel" role="dialog" aria-modal="true" aria-labelledby="sp-consent-title">
    <h2 id="sp-consent-title">Datenschutz-Einstellungen</h2>
    <p>Wir verwenden notwendige Dienste. Statistik, Marketing und externe Inhalte werden erst nach Ihrer Einwilligung geladen.</p>
    <div id="sp-consent-options"></div>
    <div class="sp-consent__actions">
      <button type="button" data-sp-consent="reject">Ablehnen</button>
      <button type="button" data-sp-consent="settings">Einstellungen</button>
      <button type="button" data-sp-consent="accept">Akzeptieren</button>
    </div>
  </div>
</div>
<button id="saferpage-consent-trigger" type="button">Datenschutz-Einstellungen</button>
<script src="https://saferpage.de/assets/consent-banner.js?v=20260610a" defer></script>
```

### Privacy Trigger Link

```html
<button type="button" id="saferpage-consent-trigger">Datenschutz-Einstellungen</button>
```

### GTM Event

```html
window.addEventListener('saferpage-consent-update', function(e){ dataLayer.push({event:'saferpage_consent_update', consent:e.detail}); });
```