Cookie-Consent-Banner selbst erstellen 
Autore: Paul S.Liebe Community,
da meine CookieConsent-Einstellung immer noch nicht richtig funktioniert hat, habe ich mir von ChatGPT einen Code schreiben lassen und ihn in WX5 jeweils im Head- und Body-Bereich eingebunden. Trotz erheblicher Arbeit und vielen Abwandlungen funktioniert er aber leider bisher nicht. Hat jemand Ahnung, wo der Fehler liegen könnte? Einen kommerziellen Anbieter möchte ich ungern nehmen, da meine Websites viele Einzelseiten haben, ich aber wenig daran verdiene und das deshalb sehr, sehr teuer würde. Irgendwie finde ich das grenzwertig, für ein bisschen Code den Anbietern jedes Jahr hunderte von Euros in den Rachen zu werfen und finde es komisch, dass da nicht längst so ein Code im Netz zu finden ist. Oder habe ich nicht richtig gesucht?
Da ja sicher viele tausend Nutzer sich mit diesem Cookie-Consent-Problem herumschlagen, möchte ich mal nachfragen, ob der ein oder andere eine kostenlose oder zumindest preisgünstige Lösung hat.
Im Voraus vielen Dank!
Beste Grüße
Paul Schmitt
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie-Einwilligung</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #003366;
}
.cookie-banner {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 500px;
background-color: #e0e0e0;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
text-align: center;
display: none;
}
.cookie-buttons {
margin-top: 15px;
}
.cookie-button {
background-color: #003366;
color: white;
border: none;
padding: 10px 15px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.cookie-button:hover {
background-color: #002244;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var consent = localStorage.getItem("cookieConsent");
var banner = document.getElementById("cookieBanner");
if (!banner) {
console.error("Fehler: cookieBanner nicht gefunden!");
return;
}
if (consent === null) {
banner.style.display = "block"; // Banner anzeigen, wenn keine Entscheidung getroffen wurde
}
});
function acceptCookies() {
document.getElementById("cookieBanner").style.display = "none";
localStorage.setItem("cookieConsent", "true");
// Google Tag Manager aktivieren
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event': 'cookie_consent', 'cookieConsent': 'granted'});
}
function disablePerformanceMeasurement() {
document.getElementById("cookieBanner").style.display = "none";
localStorage.setItem("cookieConsent", "false");
// Google Analytics deaktivieren
window['ga-disable-G-PJ0XFW00P9'] = true;
// Google Tag Manager informieren
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event': 'cookie_consent', 'cookieConsent': 'denied'});
}
</script>
</head>
<body>
<div id="cookieBanner" class="cookie-banner">
<p>Diese Website verwendet Cookies, um Ihr Erlebnis zu verbessern. Bitte wählen Sie eine Option:</p>
<div class="cookie-buttons">
<button class="cookie-button" onclick="acceptCookies()">Akzeptieren</button>
<button class="cookie-button" onclick="disablePerformanceMeasurement()">Ablehnen</button>
</div>
</div>
</body>
</html>
Hast wo eine Url zum schauen?
https://spirituelle-werte.de müsste das sein.
Aber das Skript ist nur der Quellcode und nicht wirklich ein Cookiebanner Skript. Das müsste normlerweise sehr viel mehr Javascript Code sein.
So viele Seiten sind auf deiner Website nicht, aber es sind mehr als die erlaubten Seiten wo es Gratis wäre bei Cookiebot! Aber mehr als € 15,-- im Monat kostet es auch nicht.
(It > De) ... der von Ihnen gepostete Code entspricht dem Cookie-Banner des Programms für technische Cookies und wird mit einem Klick angewendet ...
... Ohnehin. wenn Sie Ihren eigenen Code verwenden möchten, müssen Sie in Schritt 1 – Experte, 3. Option, ein einfaches Kopieren/Einfügen durchführen, „bevor Sie das /HEAD-Tag schließen, und nur den Code einfügen, der in den Style- und Script-Tags enthalten ist:
<style>
***
</style>
<script>
***
</script>
------------------------------------------------
...dann kopiere den kompletten Div-Tag,
<div>
***
</div>
...ohne andere Seiten-Tags und fügen Sie sie in Schritt 1 - Experte 6. Option ein, Vor dem Schließen des /BODY-Tags...
.
ciao
.
Autore
Vielen Dank, besonders an KolAsim.
Leider funktioniert es bei mir nicht - es erscheint kein Cookie-Banner, gar nichts. Ich bin aber auch kein Experte; da ist sicher wieder eine Kleinigkeit, die die Auslieferung verhindert.
Ist jemand bereit, mir einen Code zu liefern, den ich einfach nur einbinden muss? Da ich lediglich eine Lösung ohne dauerhafte Kosten suche, bin ich gerne bereit, dafür 50.- €, oder bei viel Aufwand auch mehr, zu zahlen. Es muss dann allerdings zuverlässig funktionieren.
Kommerzielle Lösungen summieren sich im Laufe der Jahre auf vierstellige Summen, nur, um Google Analytics dann ein- oder auszuschalten. Das finde ich zu viel und würde es nur dann anwenden, wenn sich sonst keine Lösung finden lässt. Meine Seite bringt kein Geld, sondern verursacht nur Kosten, die ich gerne gering halten möchte.
Autore
P. S.: Wenn der Code nicht öffentlich eingestellt werden soll, können wir es natürlich auch gerne über E-Mail regeln.
Der Code ist falsch eingefügt! Deshalb ist der interne Banner von WSX5 komplett fixiert!
Wenn du Hilfe benötigst beim Einfügen des Codes, dann könnte ich per TeamViewer helfen!
Autore
@Andreas S.
Das wäre natürlich super! Wann und wie treffen wir uns?
... dieser Schlüssel G-PJ0XFW00P9 in Ihrem Code ist Ihre persönliche Tracking-ID für Google Analytics…?…
...falls ja und Interesse besteht, kann ich Ihren Code in dynamischen JS-Code umwandeln, der sich mit einem einfachen und einmaligen Kopieren/Einfügen anwenden lässt...
...falls Sie Interesse haben, lassen Sie es mich wissen...
...
... allerdings scheint es mir bei der Betrachtung Deines Codes so, als ob eine Aktion fehlt, die mit der Schaltfläche [Ablehnen] verknüpft werden kann, beispielsweise die Weiterleitung auf eine Höflichkeitsseite…
.
ciao
.
Autore
Ja, der Schlüssel G-PJ0XFW00P9 ist richtig. Und mein Interesse an einer einfachen und guten Lösung ist definitiv groß. Hat ein dynamischer JS-Code Vorteile? Vermutlich.
Das mit der Höflichkeitsseite verstehe ich nicht so ganz. Ist es nicht so, dass beim Cookie-Consent-Banner bei "Ablehnen" die Seite ganz normal weiterläuft, aber nicht getrackt wird, und bei OK die Daten an Google Analytics weitergegeben werden können? Oder bin ich irgendwie im falschen Gleis?
Also das Angebot steht; es hat allerdings auch Moderator Andreas S. schon seine Hilfe angeboten. Da können Sie sich sicher einigen? Am verlockendsten erscheint mir ja das einfache Copy/Paste eines dynamischen JS-Codes.
Eine Frage noch: Textabwandlungen wären dann auch für mich noch machbar? So würde ich z. B. den Text "Diese Website verwendet Cookies, um Ihr Erlebnis zu verbessern" ersetzen durch: "Liebe Besucherinnen und Besucher, Sie selbst bleiben für mich anonym. Ihre Zustimmung würde aber helfen, diese kostenlose Seite inhaltlich sehr zu verbessern und effektiver zu machen. Möchten Sie trotzdem ablehnen:"
Beste Grüße
Paul Schmitt