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">×</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.