Cookie-Consent-Banner

Ein DSGVO-konformes Cookie-Consent-Banner mit Speicherung der Benutzerpräferenz.

Demo

Code

HTML
CSS
JavaScript
<div id="cookie-consent-banner" class="cookie-consent">
  <div class="cookie-consent__content">
    <p><strong>Wir verwenden Cookies!</strong> Diese Website verwendet Cookies, um die Benutzererfahrung zu verbessern.</p>
    <div class="cookie-consent__buttons">
      <button class="cookie-consent__btn cookie-consent__btn--accept">Alle akzeptieren</button>
      <button class="cookie-consent__btn cookie-consent__btn--necessary">Nur notwendige</button>
      <button class="cookie-consent__btn cookie-consent__btn--settings">Einstellungen</button>
    </div>
  </div>
</div>

<!-- Optional: Detaillierte Einstellungen Modal -->
<div id="cookie-settings-modal" class="cookie-settings-modal">
  <div class="cookie-settings-modal__content">
    <h2>Cookie-Einstellungen</h2>
    <span class="cookie-settings-modal__close">&times;</span>
    
    <div class="cookie-settings-modal__options">
      <div class="cookie-settings-option">
        <input type="checkbox" id="necessary-cookies" checked disabled>
        <label for="necessary-cookies">Notwendige Cookies</label>
        <p>Diese Cookies sind erforderlich, damit die Website ordnungsgemäß funktioniert.</p>
      </div>
      
      <div class="cookie-settings-option">
        <input type="checkbox" id="analytics-cookies">
        <label for="analytics-cookies">Analyse-Cookies</label>
        <p>Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren.</p>
      </div>
      
      <div class="cookie-settings-option">
        <input type="checkbox" id="marketing-cookies">
        <label for="marketing-cookies">Marketing-Cookies</label>
        <p>Diese Cookies werden verwendet, um Besucher auf Websites zu verfolgen.</p>
      </div>
    </div>
    
    <div class="cookie-settings-modal__actions">
      <button class="cookie-settings-modal__save">Einstellungen speichern</button>
    </div>
  </div>
</div>
.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 15px;
  z-index: 1000;
  display: none;
  animation: slideUp 0.5s forwards;
}

.cookie-consent__content p {
  margin: 0 0 15px;
  line-height: 1.5;
}

.cookie-consent__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-consent__btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.cookie-consent__btn--accept {
  background-color: #4CAF50;
  color: white;
}

.cookie-consent__btn--accept:hover {
  background-color: #45a049;
}

.cookie-consent__btn--necessary {
  background-color: #f1f1f1;
  color: #333;
}

.cookie-consent__btn--necessary:hover {
  background-color: #e7e7e7;
}

.cookie-consent__btn--settings {
  background-color: transparent;
  border: 1px solid #ddd;
  color: #333;
}

.cookie-consent__btn--settings:hover {
  background-color: #f9f9f9;
}

/* Cookie-Einstellungen Modal */
.cookie-settings-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1001;
  overflow-y: auto;
}

.cookie-settings-modal__content {
  background-color: #fff;
  margin: 50px auto;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  position: relative;
}

.cookie-settings-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #aaa;
}

.cookie-settings-option {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.cookie-settings-option:last-child {
  border-bottom: none;
}

.cookie-settings-option label {
  font-weight: bold;
  margin-left: 10px;
}

.cookie-settings-option p {
  margin: 5px 0 0 30px;
  color: #666;
  font-size: 0.9em;
}

.cookie-settings-modal__save {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

@keyframes slideUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .cookie-consent__buttons {
    flex-direction: column;
  }
  
  .cookie-consent__btn {
    width: 100%;
  }
}
// Cookie Consent Manager
class CookieConsentManager {
  constructor() {
    this.consentBanner = document.getElementById('cookie-consent-banner');
    this.settingsModal = document.getElementById('cookie-settings-modal');
    this.cookiePreferences = {
      necessary: true, // Immer erforderlich
      analytics: false,
      marketing: false
    };
    
    // Prüfen, ob bereits Einstellungen gespeichert sind
    this.loadPreferences();
    
    // Ereignishandler binden
    this.bindEvents();
    
    // Banner anzeigen, wenn keine Einstellungen vorhanden sind
    if (!this.hasUserConsent()) {
      this.showConsentBanner();
    }
  }
  
  bindEvents() {
    // Alle akzeptieren Button
    document.querySelector('.cookie-consent__btn--accept').addEventListener('click', () => {
      this.acceptAll();
      this.hideConsentBanner();
    });
    
    // Nur notwendige Button
    document.querySelector('.cookie-consent__btn--necessary').addEventListener('click', () => {
      this.acceptNecessaryOnly();
      this.hideConsentBanner();
    });
    
    // Einstellungen Button
    document.querySelector('.cookie-consent__btn--settings').addEventListener('click', () => {
      this.showSettingsModal();
    });
    
    // Modal schließen
    document.querySelector('.cookie-settings-modal__close').addEventListener('click', () => {
      this.hideSettingsModal();
    });
    
    // Einstellungen speichern
    document.querySelector('.cookie-settings-modal__save').addEventListener('click', () => {
      this.saveSettingsFromModal();
      this.hideSettingsModal();
      this.hideConsentBanner();
    });
  }
  
  hasUserConsent() {
    return localStorage.getItem('cookieConsent') !== null;
  }
  
  loadPreferences() {
    const savedPreferences = localStorage.getItem('cookieConsent');
    if (savedPreferences) {
      this.cookiePreferences = JSON.parse(savedPreferences);
      
      // Checkboxen im Modal aktualisieren
      if (this.settingsModal) {
        document.getElementById('analytics-cookies').checked = this.cookiePreferences.analytics;
        document.getElementById('marketing-cookies').checked = this.cookiePreferences.marketing;
      }
      
      // Aktiviere zugelassene Cookies
      this.applyPreferences();
    }
  }
  
  savePreferences() {
    localStorage.setItem('cookieConsent', JSON.stringify(this.cookiePreferences));
    this.applyPreferences();
  }
  
  saveSettingsFromModal() {
    this.cookiePreferences.analytics = document.getElementById('analytics-cookies').checked;
    this.cookiePreferences.marketing = document.getElementById('marketing-cookies').checked;
    this.savePreferences();
  }
  
  applyPreferences() {
    // Hier könnten verschiedene Tracking-Skripte aktiviert/deaktiviert werden
    if (this.cookiePreferences.analytics) {
      // Analytics-Code aktivieren
      console.log('Analytics aktiviert');
    }
    
    if (this.cookiePreferences.marketing) {
      // Marketing-Code aktivieren
      console.log('Marketing aktiviert');
    }
  }
  
  acceptAll() {
    this.cookiePreferences.analytics = true;
    this.cookiePreferences.marketing = true;
    this.savePreferences();
  }
  
  acceptNecessaryOnly() {
    this.cookiePreferences.analytics = false;
    this.cookiePreferences.marketing = false;
    this.savePreferences();
  }
  
  showConsentBanner() {
    this.consentBanner.style.display = 'block';
  }
  
  hideConsentBanner() {
    this.consentBanner.style.display = 'none';
  }
  
  showSettingsModal() {
    this.settingsModal.style.display = 'block';
  }
  
  hideSettingsModal() {
    this.settingsModal.style.display = 'none';
  }
}

// Initialisieren, wenn DOM geladen ist
document.addEventListener('DOMContentLoaded', () => {
  new CookieConsentManager();
});

Erklärung

Dieses DSGVO-konforme Cookie-Consent-Banner bietet mehrere Zustimmungsoptionen:

  • "Alle akzeptieren" erlaubt alle Cookie-Kategorien
  • "Nur notwendige" beschränkt die Cookies auf die für die Funktionalität erforderlichen
  • "Einstellungen" öffnet ein Modal mit detaillierten Einstellungsmöglichkeiten

Der JavaScript-Code verwendet eine Klasse, um den Cookie-Consent zu verwalten und speichert die Einstellungen im localStorage. So bleiben die Präferenzen für zukünftige Besuche erhalten.

Bei der ersten Implementierung auf deiner Website solltest du:

  • Die Cookie-Kategorien an deine tatsächlichen Anforderungen anpassen
  • Die applyPreferences()-Methode ändern, um deine tatsächlichen Tracking-Skripte zu aktivieren/deaktivieren
  • Möglicherweise eine Ablaufzeit für den Consent einrichten (nach DSGVO)

Verwendung

Implementiere dieses Banner auf deiner Website, um DSGVO-konform Benutzerzustimmung für Cookies einzuholen. Das Banner erscheint beim ersten Besuch und schützt dich vor rechtlichen Konsequenzen durch nicht-konforme Cookie-Nutzung.