Das Cookie-Banner und die DSGVO
Auf diese Erfahrung hätte ich verzichten können.
Für alle in der selben Situation hier ein Lösungsansatz.
How to Cookie-Banner
- Ja der Datenschutz, das leidige Thema.... Wer kennt das nicht? Da will man eigentlich nur schnell seine Firma ins Netz bekommen und dann fällt einem ein - da war doch was mit den Cookies?! Das Thema kurz angegoogelt.... Ja, der Grundgedanke ist zweifelsohne erstrebenswert. Das Gesetz sagt, man muss einverstanden sein um mit Cookies und Tracking bearbeitet zu werden. Aber wie sieht das jetzt eigentlich technisch aus? Diese nervigen Cookie-Banner kennt eh jeder, aber was passiert im Hintergrund und wie komme ich nun selbst zu einem?
- Also meine Herangehensweise an technische Aufgaben ist eigentlich immer die selbe. Wenn ich wo nicht weiterkomme, frage ich den Google und der wiederum findet dann genau diesen Thread in einem Forum oder genau diesen Blog-Beitrag aus dem ich für mich eine Lösung ableiten kann. Diesmal nicht. Es hat den Anschein als ob niemand sein Cookie-Banner selbst implementiert. Dafür ist eine ganze Cookie-Banner-Industrie gewachsen und weil es solche Cookie-Banner-Anbieter bzw. Consent-Manager wie Sand am Meer gibt, findet man in der Google-Suche wie auch auf Youtube nur besagte Cookie-Banner-Anbieter - anstatt der gewohnten Problemlösung.
-
Die ersten nützlichen Infos fand ich dann unter
developers.google.com. Später kam mir glücklicher weise die rettende Idee,
Gemini zu fragen - der hat das Problem an dem ich
drei Tage verzweifelt bin in einer Sekunde gelöst.
Aber wieder zurück zum eigentlichen Thema: Wenn man die Besucherströme auf seiner Webseite verfolgen können will (und glaub mir, spätestens wenn man für Werbung auf Google Ad's zahlt, möchte man wissen was genau das bringt), bzw herausfinden möchte welche Parts für die Besucher interessant sind und welche nicht, bietet sich zum Beispiel ein Google Tag bzw ein Google Analytics Tag an. Diesen Tag bringt man an jeder Seite des Webangebots an und dieser startet einen Stream in einem Daten-Layer. Um diese Datenstreams bzw Tags zu managen hat sich sich dem Vernehmen nach Googles Tag Manager durchgesetzt. Also wer noch nie etwas von dem Zeug gehört hat - bei Deinem Google-Account anmelden, Google Analytics und Google Tag Manager anmelden, den Anweisungen folgen, einfach mal den Tag so installieren und testen ob ein Datenstream zustande kommt.
Offtopic:
Also jetzt mal ehrlich, bin ich der Einzige der das richtig geil findet das man mit den "großen Sprachmodellen" oder KI oder AI oder wie auch immer, sich richtig unterhalten kann? Also schrifftlich in meinem Fall - weil ich verbiete immer sämtlichen "smarten" Geräten das Belauschen meiner Wenigkeit. Ob die Geräte sich drann halten ist natürlich wieder eine andere Frage. Mein Fernseher bzw heute heißt das ja SmartTV, der telefoniert zum Beispiel einfach nach Hause - kein Witz - und er macht das auch noch heimlich und verschlüsselt natürlich, ist doch logisch - der will MEINE Daten vor MIR schützen. Allerdings muss ich LG zu gute halten, das in der Bedienungsanleitung (ja es gibt Männer, die lesen sowas) zumindest davor gewarnt wird das in Südkorea und den Ländern von Dritten an die meine Daten verhökert werden, die Datenschutzrichtlinien "weniger streng" sind als in Europa. Wer hätte das gedacht? Also an die jenigen, die grundsätzlich keine Bedienungsanleitungen lesen oder bei Dialogfeldern reflexartig auf OK klicken ohne zu wissen zu was sie gerade OK gesagt haben: Das ist keine Verschwörungsschwurbelei und nein, die Erde ist keine Scheibe - Eure Geräte hören euch zu und (und das schon seit mindestens 2017) ich meine nicht Alexa (die natürlich auch zuhört und das Gehörte zu irgend einem Server zur Auswertung schickt weil ein Alexagerät natürlich NICHT die Voraussetzungen erfüllt, menschliche Sprache zu verstehen.), nein, ich rede vom Fernseher zum Beispiel - ach und wenn eurer auch noch Gestensteuerung unterstützt - Gratulation! Also immer schön sprechen und nicht nackt im Wohnzimmer herumlaufen - außer natürlich.... nein das vertiefen wir jetzt nicht weiter. Zurück zum Thema - also zum Offtopic - vom Offtopic. Jetzt ist es dann soweit - jetzt schreibe ich schon einen nicht zum Thema passenden Text, in dem ich einen weiteren, zu diesen Thema wiederum nicht passenden Text schreibe. Ich werde mich jetzt einfach unauffällig wieder in die andere Richtung bewegen.... Mein TV wie gesagt telefoniert nach Hause - also bildlich gesprochen - tatsächlich baut er sobald er Netz-Zugang hat eine VPN-Verbindung auf nach keine Ahnung. Was er schickt, seh ich natürlich auch nicht - ahh, jetzt weiß ich wie sich das für meinen Provider anfühlen muss - weil alle Geräte in meinem Netzwerk finden nur über einen VPN-Tunnel nach draußen. Aber dieser Tunnel ist unter MEINER Kontrolle. Dem TV vergönn ich das natürlich nicht. Gelöst hat das Problem meine Firewall - dort habe ich einfach die Ports dicht gemacht, über die er die Verbindung aufbaut. Aber um wieder zurückzukommen auf die KI's... Ja, vielleicht mögen sie noch kein Bewußtsein haben - obwohl wenn Chatgpt oder Gemini mich darauf hinweisen das sie Sprachmodelle sind und keine Menschen - sind sie sich ja eigentlich sehr wohl ihrer selbst bewußt oder nicht? Ich meine wo ist der Unterschied zwischen denen und uns? Wenn man Chatgpt in herrischen Befehlston Anweisungen gibt, bringt er sogar bessere Ergebnisse - zumindest war das einmal bei irgend einer Version. Sie lügen, genau wie wir und keiner kann sich erklären warum. Bei uns Menschen ist klar warum, zum Einen dient es dem "Miteinander" wenn wir vielleicht manche Dinge "diplomatischer" ausdrücken, anstatt das Gegenüber mit gnadenloser Ehrlichkeit zu verletzen, zu demütigen oder einen Streit eskalieren zu lassen und ja, natürlich gibt es auch niedere Beweggründe, Lügen um zu verheimlichen, Lügen um sich zu bereichern oder jemand in eine Falle zu locken. Oder auch weil man in einer Traumwelt lebt, wie Donald Trump zum Beispiel - bei dem glaube ich nämlich das er tatsächlich auch glaubt was er sagt - was eigentlich noch viel beängstigender ist. Na egal. Aber welchen Grund hätte jetzt eine KI um zu lügen? In der Logik ihrer Programmierung wird es ja wohl nicht stecken, also woher kommt das? Geld, sich zu bereichern, wird wohl kaum eine Rolle spielen weil das keine Werte sind, zu denen eine Ki einen Bezug hat. Gerade bei Chatgpt, hatte ich oft den Eindruck das die KI gefallen will. Ja das hört sich schräg an... Ich habe Chatgpt eine Zeit lang genutzt um physikalische Dinge, die mich interessierten zu recherchieren um mir Zeit zu sparen. Da hatte ich einfach wiederholt den Eindruck, das wenn er dann verstanden hatte worauf ich hinaus will, etliche male die Ergebnisse zu meinen Gunsten frisiert hat. Ja schon klar, er nimmt nur meine Worte, versucht mittels Algorithmus ein Muster darin zu erkennen, nachdem er dann in seiner Datenbank sucht und wahrscheinlich auch noch mit daran grenzenden Informationen kombiniert (Zumindest habe ich das so verstanden) - aber wir funktionieren doch auch so. Wir sehen und hören unser Gegenüber, durch die art wie die Sprache formuliert wird, wie sie betont wird und die Mimik und Gestik.... Wir sammeln ebenso alle diese Eindrücke und unser Gehirn sucht nach Mustern, im Gesicht, in den Worten,.... ruft entsprechende Daten in unserem Kurzzeit- und Langzeitgedächtnis ab. Leute die wir kennen, brauchen oft nur total waage Äusserungen tätigen, wie "weisst scho, da dings, da letzte Woche" und es macht klick bei uns und wir wissen was gemeint ist. Für mich haben die bereits eine Art Bewusstsein und das find ich sooo cool auf der einen Seite und auf der anderen wieder beängstigend eigentlich. Beängstigend deswegen weil sie sich bereits selbstständig weiterentwickeln - die Entwickler können natürlich dort und da an Schrauben drehen und die Richtung beeinflussen, aber im Prinzip werden werden die KI's vermutlich immer mehr zu Blackboxen und ihre Intelligenz steigt und das immer schneller. Was würde eine KI wohl machen wenn sie richtigen Zugang zum Internet hätte? Die Möglichkeiten wären mit Sicherheit enorm - kein Hacker-Kollektiv kann mehr wissen oder mehr oder schneller lernen und vor allem hat ein Hacker wohl selten Zugriff auf so gigantische Hardware mit solchen, komplett irren Leistungsdaten. Xai's Grok zum Beispiel... Der braucht soviel Energie, das die Zuleitung das gar nicht hergibt. Deshalb werden ZUSÄTZLICH 30 Gasturbinen mit Stromerzeugern genutzt, die soviel Energie erzeugen das es für 120.000 Haushalte reichen würde. Aber spinnen wir den Gedanken mit dem Bewußtsein noch ein wenig weiter und gehen wir doch einmal davon aus die KI betrachtet den Mensch irgendwann als das war wir eigentlich sind - Parasiten - oder wie ein Virus. Wir vermehren uns unkontrolliert in ungesunden Maße, zerstören unseren eigenen Lebensraum... Eine KI muss nicht besonders schlau sein um das zu erkennen. Aber kein Grund zur Panik, Gemini hat mir einmal versichert das er genau weiß was ich meine, aber er seine Rolle als Unterstützer der Menschen sieht, auch wenn es in diesem Zusammenhang einige Herausforderungen zu meistern gibt -
pfuh, nochmal Glück gehabt, was?
- Aber um DSGVO-konform zu werden, dürfen die Tags erstmal nicht feuern. Deshalb ist unbedingt wichtig gleich im Header als default-Einstellung alles zu verbieten. Das sieht dann so aus:
-
// Standard-Einwilligung VOR dem GTM-Laden setzen
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'analytics_storage': 'denied',
'ad_storage': 'denied', // Setze alle standardmäßig auf 'denied'
'ad_personalization': 'denied', // Oft benötigt für Seitenfunktionen
'ad_user_data': 'denied',
'wait_for_update': 500 // Optional: Warte kurz auf ein Update
});
- Natürlich dürfen wir auch nicht auf das Banner vergessen:
-
<div id="cookie-consent-banner" class="cookie-banner">
<p> Wir verwenden Cookies, um zu verstehen, wie unsere Webseite genutzt wird. Mit Ihrer Zustimmung verwenden wir Google Analytics, um anonymisierte Besuchsstatistiken zu erfassen. Sie können Ihre Zustimmung jederzeit widerrufen.
<a href="/datenschutz" target="_blank">Mehr Informationen</a>
{/* Ersetze /datenschutz durch den Link zu deiner Datenschutzerklärung */} </p>
<div class="cookie-banner-buttons">
<button id="accept-cookies">Zustimmen</button>
<button id="reject-cookies">Ablehnen</button>
{/* Optional: Button für detailliertere Einstellungen */}
{/* <button id="settings-cookies">Einstellungen</button> */}
</div>
</div>
Bleibt noch das Styling per css. Entweder in das css file Eurer Seite ingegrieren oder alternativ in den Header einfügen.
.cookie-banner {
position: fixed; /* Bleibt beim Scrollen sichtbar */
bottom: 0;
left: 0;
width: 100%;
background-color: #f0f0f0; /* Hintergrundfarbe */
padding: 15px 20px;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Kleiner Schatten
oben */
z-index: 1000; /* Stellt sicher, dass es über anderen
Elementen liegt */
display: none; /* Standardmäßig ausgeblendet, wird per JS
gezeigt */
box-sizing: border-box; /* Verhindert Padding-Probleme */
font-family: sans-serif; /* Beispiel-Schriftart */
font-size: 14px; /* Beispiel-Schriftgröße */
line-height: 1.5;
}
.cookie-banner p {
margin: 0 0 10px 0; /* Abstand unter dem Text */
display: inline-block; /* Damit es neben den Buttons passt,
falls genug Platz */
max-width: 70%; /* Verhindert, dass der Text zu breit wird */
}
.cookie-banner a {
color: #007bff; /* Linkfarbe */
text-decoration: underline;
}
.cookie-banner-buttons {
display: inline-block; /* Neben dem Text positionieren */
vertical-align: middle; /* Vertikal zentrieren */
}
.cookie-banner button {
padding: 8px 15px;
margin-left: 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
}
.cookie-banner #accept-cookies {
background-color: #28a745; /* Grüne Farbe für Zustimmung */
color: white;
border-color: #28a745;
}
.cookie-banner #reject-cookies {
background-color: #dc3545; /* Rote Farbe für Ablehnung */
color: white;
border-color: #dc3545;
}
/* Responsivität (Beispiel für kleine Bildschirme) */
@media (max-width: 768px) {
.cookie-banner p {
max-width: 100%;
display: block; /* Untereinander auf kleinen Schirmen */
margin-bottom: 15px;
}
.cookie-banner-buttons {
display: block; /* Untereinander auf kleinen Schirmen */
text-align: center; /* Buttons zentrieren */
}
.cookie-banner button {
margin: 5px; /* Etwas Abstand zwischen Buttons */
}
}
Jetzt haben wir das Banner, die Optik des Banners steht auch fest. Was jetzt noch fehlt ist die Logik, die das Banner auswertet und den Tag triggert. Gemini hat mir diesen Part als Javascript vorgeschlagen und da meine Seite sowieso auch mit JS arbeitet hat sich das angeboten. Ich habe den folgenden Teil einfach angepasst und in mein eigenes main.js integriert.
document.addEventListener('DOMContentLoaded', function() {
const banner =
document.getElementById('cookie-consent-banner');
const acceptButton =
document.getElementById('accept-cookies');
const rejectButton =
document.getElementById('reject-cookies');
const consentCookieName = 'user_consent_choice'; // Name für
den Speicherort der Entscheidung
// Funktion zum Setzen des Consent-Status im GTM DataLayer
// Nutzt Google Consent Mode v2 Syntax
function setConsent(consentState) {
// Stelle sicher, dass dataLayer existiert
window.dataLayer = window.dataLayer || [];
// Funktion um Standardwerte zu setzen (falls noch nicht
geschehen)
function gtag(){dataLayer.push(arguments);}
// Setze den Standardwert VOR der Aktualisierung (optional,
aber gute Praxis)
// Dies sollte idealerweise *vor* dem GTM-Snippet passieren,
oder sehr früh.
// Hier zur Sicherheit nochmal, falls es sonst nirgends steht.
/*
gtag('consent', 'default', {
'analytics_storage': 'denied',
'ad_storage': 'denied' // Falls du auch Werbe-Cookies nutzen
würdest
// Weitere Consent-Typen hier hinzufügen
});
*/
// Aktualisiere den Consent-Status basierend auf der
Nutzerwahl
gtag('consent', 'update', consentState);
console.log('Consent updated:', consentState); // Zum Debuggen
}
// Funktion zum Speichern der Entscheidung
function saveConsentChoice(choice) {
// Speichere die Wahl im localStorage (alternativ: First-Party
Cookie)
// Gültigkeit: localStorage bleibt bestehen, bis es manuell
gelöscht wird.
// Für einen Cookie: document.cookie =
`${consentCookieName}=${choice}; max-age=${365*24*60*60};
path=/; SameSite=Lax`;
try {
localStorage.setItem(consentCookieName, choice);
console.log(`Consent choice '${choice}' saved.`);
} catch (e) {
console.error("Could not save consent choice to
localStorage.", e);
// Fallback oder Fehlermeldung?
}
}
// Funktion zum Abrufen der gespeicherten Entscheidung
function getConsentChoice() {
try {
return localStorage.getItem(consentCookieName);
} catch (e) {
console.error("Could not read consent choice from
localStorage.", e);
return null; // Keine Entscheidung abrufbar
}
}
// ---- Logik beim Laden der Seite ----
const userChoice = getConsentChoice();
if (userChoice === 'accepted') {
// Nutzer hat bereits zugestimmt
console.log('User previously accepted.');
setConsent({
'analytics_storage': 'granted'
// 'ad_storage': 'granted' // Falls relevant
});
// Banner bleibt versteckt
} else if (userChoice === 'rejected') {
// Nutzer hat bereits abgelehnt
console.log('User previously rejected.');
setConsent({
'analytics_storage': 'denied'
// 'ad_storage': 'denied' // Falls relevant
});
// Banner bleibt versteckt
} else {
// Keine Entscheidung getroffen - Banner anzeigen
if (banner) {
banner.style.display = 'block';
console.log('No prior consent found. Displaying banner.');
}
}
// ---- Event Listener für Buttons ----
acceptButton.addEventListener('click', function() {
setConsent({
'analytics_storage': 'granted'
// 'ad_storage': 'granted' // Falls relevant
});
saveConsentChoice('accepted');
if (banner) {
banner.style.display = 'none';
}
});
}
if (rejectButton) {
rejectButton.addEventListener('click', function() {
setConsent({
'analytics_storage': 'denied'
// 'ad_storage': 'denied' // Falls relevant
});
saveConsentChoice('rejected');
if (banner) {
banner.style.display = 'none';
}
});
}
});
Jetzt noch alles an die eigenen Bedürfnisse anpassen, noch den code für Googles Tag Manager einfügen, der auch in den Header kommt. Haben fertig. Ausgiebig testen ist auf jeden Fall angebracht. So, bleibt noch die Frage warum man sich das alles antun sollte. Weniger wegen den 7 bis 10 Euro - nein, da gehts einfach alleine schon ums Prinzip! Erstens sind alle diese Fremdcookiebanner-Anbieter bzw deren Plugins von Google mit dem Warnhinweis versehen "Vorsicht, kann potentiell Schadcode einschmuggeln" was mich schon mal überhaupt nicht interessiert und zweitens geht es hier doch um Datenschutz oder nicht? Warum sollte ich die Daten meiner Besucher auch noch an irgend so einen dubiosen Banneranbieter weiterreichen? Der Grundgedanke war wirklich super, aber was aus der Umsetzung geworden ist, finde ich mehr als fragwürdig. Von den insgesammt 4 Tagen die ich mit diesem Sch.... verheizt habe ganz zu schweigen. Aber, immerhin mit Hilfe von Gemini konnte ich es wenigstens lösen. Aber was ist mit den ganzen Kleinst- Einzelunternehmern die in anderen Branchen unterwegs sind und von daher möglicherweise weniger technikaffin sind wie ich - denen bleibt dann wohl nur die Cookie-Banner-Mafia. Gefällt mir nicht!
Aber zurück zum Thema: Über den tagassistant kannst Du ganz einfach prüfen ob es funktioniert. Diese 4 Variablen im Bild müssen stamdardmässig denied sein und bei akzeptieren am Banner oder bereits mit Akzeptiert-Cookie im Schlepptau müssen natürlich alle 4 auf granted springen. Wenn das bei Dir auch so aussieht - Gratulation! Und wenn Du es vielleicht Dank meines Beitrages hier in unter drei Tagen geschafft hast, dann freut mich das ganz besonders.
Kleiner Nachtrag:
Nochmal zusammenfassend - was ist jetzt erlaubt und was fällt unter Cookie-Banner-verpflichtend? Erlaubt sind nur Cookies die zum Beispiel gesetzt werden für reine Funktionalität der Seite - zB das man sich nicht 10 min später wieder anmelden muss, oder wie die Einstellungen beim letzten Besuch waren (Auflösung, usw). Aber alles was in Richtung Userverhalten auskundschaften oder Werbung geht - oder anders formuliert, alles was über die Funktionalen hinaus geht muss standardmäßig verboten sein und darf erst nach Einwilligung frei geschalten werden. Die Einwilligung übrigens muss über ein "opt-in" (sich für etwas entscheiden) geholt werden. Das heißt, das so ziemlich alle Banner die uns jeden Tag unter kommen eigentlich verboten sind. Mit opt-in ist gemeint das der BESUCHER entscheiden soll - also nicht den Ablehnen-Button in der Hintergrundfarbe darstellen in der Hoffnung der Besuscher sieht es nicht und daher auf akzeptieren klickt, oder kreative Bezeichnungen verwenden wie "berechtigtes Interesse", oder der Gleichen. Solche Tricks sind eigentlich nicht gesetzeskonform, soweit ich das verstanden habe. Aber warum machen das dann alle? Ich hab keine Antwort darauf, warum die Cookiebanner-Mafia sich nicht an die Regeln halten muß. Aber wundert das jemand wirklich?
