So binden Sie ein Cookie-Banner auf Ihrer Website ein

Ein Cookie-Banner ist der kleine Hinweis, der erscheint, wenn jemand Ihre Website zum ersten Mal aufruft, und der fragt, ob die Person nicht notwendigen Cookies und Trackern zustimmt. Unter Gesetzen wie GDPR, den Regeln der UK PECR und Indiens DPDPA ist das Banner nur die sichtbare Spitze des Systems. Die eigentliche Arbeit passiert darunter: Nicht notwendige Skripte wie Analyse, Werbepixel und Chat-Widgets dürfen nicht laufen, bevor die Besucherin oder der Besucher eingewilligt hat.

Diese Unterscheidung ist wichtig, denn ein Banner, das nur eine Meldung anzeigt, aber Google Analytics oder das Meta-Pixel beim Seitenaufruf feuern lässt, ist nicht konform. Die Aufsichtsbehörden haben klargestellt, dass die Einwilligung eingeholt werden muss, bevor der Tracker lädt, nicht danach. Das Ziel beim Einbinden eines Banners ist deshalb zweierlei zugleich: eine klare Wahl anzeigen und Tracker blockieren, bis diese Wahl getroffen ist.

Der schnellste Weg, ein Banner einzubinden, ist ein einzelnes Script im head Ihres HTML. Nachdem Sie in Ihrem ConsentX-Dashboard eine Website angelegt haben, erhalten Sie ein Embed-Snippet, das wie eine einzelne Zeile mit einem Verweis auf embed.js und Ihrem Site-Key aussieht. Fügen Sie es so weit oben wie möglich im head ein, damit es vor Ihren anderen Skripten lädt.

Platzieren Sie es oberhalb Ihrer Analyse- und Werbe-Tags. Die Reihenfolge ist wichtig, denn ConsentX muss sich zuerst registrieren, um die darunter liegenden Tracker zurückhalten zu können, bis die Besucherin oder der Besucher entscheidet. Wenn Sie Ihre Tracker im Dashboard korrekt kennzeichnen, hält der Loader sie beim ersten Besuch blockiert und gibt sie in dem Moment frei, in dem die Einwilligung erteilt wird.

Dieser Ansatz funktioniert auf jeder handgeschriebenen Website, jedem Static-Site-Generator und jedem Framework, bei dem Sie den HTML-head kontrollieren. Er ist außerdem die sauberste Methode, weil keine Plugin-Ebene dazwischenliegt.

Wenn Ihre Tracker bereits in Google Tag Manager verwaltet werden, können Sie ConsentX auch über GTM einbinden. Legen Sie ein neues Custom-HTML-Tag an, fügen Sie das Embed-Snippet darin ein und stellen Sie es so ein, dass es beim Trigger Consent Initialization auslöst, damit es vor allem anderen läuft.

Das sauberere Muster ist, das Banner mit Google Consent Mode zu koppeln. Statt GTM-Tags frei feuern zu lassen, koppeln Sie sie an den Einwilligungsstatus, und ConsentX aktualisiert diesen Status, wenn die Besucherin oder der Besucher wählt. So hält GTM selbst die Tags zurück, bis die Einwilligung erteilt ist, und genau dieses Verhalten erwarten die Aufsichtsbehörden.

Vermeiden Sie den häufigen Fehler, ConsentX über GTM zu laden, während Ihr Analyse-Tag weiterhin auf All Pages ohne Einwilligungsprüfung feuert. Wenn der Tracker nicht gekoppelt ist, ist das Banner reine Dekoration und Sie bleiben angreifbar.

Bei WordPress brauchen Sie kein schwergewichtiges Plugin. Der einfachste Weg ist, das Embed-Snippet über ein Header-und-Footer-Code-Plugin oder das Feld für eigenen Head-Code Ihres Themes in den Header Ihres Themes einzufügen, damit es websiteweit im head lädt.

Wenn Sie ein SEO- oder Caching-Plugin nutzen, platzieren Sie das Snippet dort, wo es nicht entfernt oder verzögert wird, denn ein verzögerter Einwilligungs-Loader kann Tracker durchschlüpfen lassen, bevor er initialisiert ist. Leeren Sie nach dem Einfügen den Seiten-Cache, damit Besucher das neue Head-Markup erhalten.

WordPress-Websites laden Tracker oft über mehrere Plugins gleichzeitig; nutzen Sie daher die Tracker-Erkennung im Dashboard, um jedes Script zu finden und zu kennzeichnen, bevor Sie sich auf das Banner verlassen.

Bei Shopify fügen Sie das Embed-Snippet in Ihr Theme ein, indem Sie theme.liquid bearbeiten und es weit oben innerhalb des head-Elements einsetzen. Shopify-Themes laden mehrere First-Party- und App-Skripte, deshalb ist eine hohe Positionierung des Loaders im head wichtig.

Shopify hat außerdem eine eigene Customer-Privacy- und Einwilligungs-API für den Storefront. Verbinden Sie ConsentX nach Möglichkeit mit diesem Signal, damit Shopify-eigene Pixel die Entscheidung der Besucherin oder des Besuchers ebenso respektieren wie Ihre anderen Tracker. Testen Sie mit einem Checkout-Ablauf, denn Checkout-Seiten laden manchmal Skripte, die Ihre Storefront-Seiten nicht laden.

Das Testen ist der Schritt, den die meisten Teams überspringen, und er entscheidet darüber, ob Sie tatsächlich konform sind. Öffnen Sie Ihre Website in einem frischen privaten Browserfenster, öffnen Sie dann die Entwicklerwerkzeuge Ihres Browsers und beobachten Sie den Tab Network, während die Seite lädt. Bevor Sie irgendetwas im Banner anklicken, sollten Sie keine Anfragen an Analyse- oder Werbedomains sehen.

Klicken Sie als Nächstes auf Ablehnen und laden Sie neu. Die Tracker sollten weiterhin ausbleiben und im Tab Application oder Storage sollten keine Marketing-Cookies erscheinen. Klicken Sie dann auf Akzeptieren und bestätigen Sie, dass die Tracker nun laden und die Cookies erscheinen. Wenn Tracker feuern, bevor Sie wählen, ist das Script entweder zu weit unten im head platziert oder der Tracker ist nicht für das Blockieren gekennzeichnet.

Wiederholen Sie den Test auf einigen wichtigen Seitentypen, darunter Ihre Startseite, eine Produkt- oder Inhaltsseite und jede Seite mit einem Chat-Widget oder eingebettetem Video, da diese oft zusätzliche Drittanbieter-Skripte nachladen.