Cookie-Banner einbinden

Das Cookie-Banner von Consentaur binden Sie mit einer einzigen Zeile Code ein. Diese Anleitung zeigt, wie Sie das Script richtig platzieren, damit Cookies blockiert bleiben, bis Ihre Besucher einwilligen, und wie Sie es in WordPress, Shopify, Wix und Squarespace einfügen.

Schnellstart

Kopieren Sie Ihr persönliches Script-Tag aus dem Dashboard und fügen Sie es im <head>-Bereich Ihrer Website ein:

<head>

...

</head>

Wo finde ich meine Site-ID?

IHRE_SITE_ID ist in den Beispielen ein Platzhalter. Ersetzen Sie ihn durch die Site-ID Ihrer Website.

Ihr persönliches Script-Tag mit der richtigen Site-ID finden Sie im Consentaur-Dashboard: Öffnen Sie Ihre Website und dort die Seite Script. Der Code ist fertig zum Einfügen, Sie müssen nichts anpassen.

Beispiel: Lautet Ihre Site-ID site_3f9a1c2b7d4e, sieht Ihr Script-Tag so aus:
<script src="https://cdn.consentaur.com/v1/site_3f9a1c2b7d4e.js"></script>

Wichtig: die Position

Das Script muss das allererste <script>-Tag im <head> sein. Nur dann kann Consentaur Cookies von Google Analytics, Meta Pixel und anderen Diensten blockieren, bevor diese geladen werden.

Warum muss das Script an erster Stelle stehen?

Der Browser führt Scripts von oben nach unten aus. Steht Google Analytics über Consentaur, setzt Google Analytics seine Cookies, bevor Consentaur sie blockieren kann. Als erstes Script kann Consentaur:

Google Consent Mode v2 standardmäßig auf „denied“ setzen, bevor Google-Scripts laden
alle nachfolgenden Scripts überwachen und blockieren, die ohne Einwilligung Cookies setzen würden
das Cookie-Banner so früh wie möglich anzeigen

Anleitungen für Ihre Plattform

Cookie-Banner in WordPress einbinden

Mit Plugin (empfohlen): Installieren Sie ein Plugin wie WPCode (Insert Headers and Footers). Öffnen Sie im WordPress-Menü Code Snippets → Header & Footer und fügen Sie das Consentaur-Script in das Feld „Header“ ein, ganz oben vor allen anderen Scripts. Speichern, fertig.

Manuell im Theme: Öffnen Sie die Datei header.php Ihres Themes und fügen Sie das Script direkt nach dem öffnenden <head>-Tag ein:

<head>
  <script src="https://cdn.consentaur.com/v1/IHRE_SITE_ID.js"></script>
  <?php wp_head(); ?>
</head>

Ersetzen Sie IHRE_SITE_ID durch Ihre Site-ID aus dem Dashboard. Änderungen an header.php können bei einem Theme-Update überschrieben werden. Nutzen Sie dafür ein Child-Theme oder den Weg über das Plugin.

Caching- und Optimierungs-Plugins: Plugins, die JavaScript verzögern, zusammenfassen oder mit defer laden, dürfen das Consentaur-Script nicht verändern. Nehmen Sie cdn.consentaur.com in den Einstellungen des Plugins von diesen Optimierungen aus.

Eine ausführliche Schritt-für-Schritt-Anleitung finden Sie in unserem Ratgeber zum Cookie-Banner in WordPress.

Shopify

Öffnen Sie Onlineshop → Themes und beim aktiven Theme Code bearbeiten. Öffnen Sie theme.liquid und fügen Sie das Consentaur-Script direkt nach dem <head>-Tag ein, vor allen anderen Scripts:

<head>
  <script src="https://cdn.consentaur.com/v1/IHRE_SITE_ID.js"></script>
  {{ content_for_header }}
  ...
</head>

Ersetzen Sie IHRE_SITE_ID durch Ihre Site-ID aus dem Dashboard.

Wix

Öffnen Sie in den Einstellungen Ihrer Website den Bereich Benutzerdefinierter Code (Custom Code). Fügen Sie das Consentaur-Script hinzu, wählen Sie „Head“ als Position und laden Sie es auf allen Seiten.

Squarespace

Öffnen Sie die Code Injection Ihrer Website und fügen Sie das Consentaur-Script in das Feld „Header“ ein.

Eigene Website / HTML

Fügen Sie das Script direkt in Ihr HTML-Template ein, als erstes Script im <head>. Das Script darf kein async oder defer haben: Es muss synchron laden, damit es andere Scripts blockieren kann.

Scripts manuell blockieren

Consentaur blockiert automatisch Scripts von Drittanbieter-Domains, die beim Scan Cookies gesetzt haben, auch Scripts, die ein Tag-Manager oder anderer Code später einfügt. Außerdem erkennt Consentaur bekannte Tracker, die ihre Cookies auf Ihrer eigenen Domain setzen, etwa das Meta Pixel, Hotjar, TikTok und LinkedIn, sobald der Scan ihre Cookies gefunden hat. Google-Tags deckt Google Consent Mode ab (siehe unten). Kennzeichnen Sie alle anderen Scripts mit type="text/plain" und data-consentaur-category. Dann führt der Browser sie gar nicht aus, und Consentaur startet sie, sobald der Besucher in die Kategorie einwilligt:

<!-- Läuft, sobald der Besucher in Marketing einwilligt -->
<script
  type="text/plain"
  data-consentaur-category="marketing"
  src="https://example.com/tracking.js"
></script>

<!-- Läuft, sobald der Besucher in Statistik einwilligt -->
<script type="text/plain" data-consentaur-category="analytics">
  // Inline-Code für die Statistik
</script>

Scripts laufen in der Reihenfolge, in der sie auf der Seite stehen. Für ein JavaScript-Modul ergänzen Sie data-consentaur-type="module".

Scripts für Anmeldung, CAPTCHAs und Zahlungen blockiert Consentaur nie automatisch, damit sie schon vor der Einwilligung funktionieren: die Anmeldung mit Google, Apple oder Microsoft, reCAPTCHA, hCaptcha, Cloudflare Turnstile, Stripe, PayPal und Klarna. Beim Meta Pixel blockiert Consentaur die Scripts des Pixels, nicht das Facebook SDK, das Facebook Login verwendet. Wenn Sie die Social Plugins von Facebook nutzen, etwa den Gefällt-mir-Button, kennzeichnen Sie das SDK-Script wie oben gezeigt mit data-consentaur-category="marketing".

Gültige Kategorien:

necessary: notwendige Cookies (werden nie blockiert)
analytics: Statistik und Analyse
marketing: Marketing und Werbung
preferences: Präferenzen und Funktionen

YouTube, Google Maps und andere eingebettete Inhalte

Eingebettete Inhalte wie Videos von YouTube und Vimeo, Google Maps, Spotify, SoundCloud, Instagram, X, TikTok und die Plugins von Facebook setzen Cookies, sobald sie laden. Consentaur hält sie zurück, bis der Besucher in ihre Kategorie einwilligt, und zeigt an ihrer Stelle einen Hinweis, wer den Inhalt bereitstellt, mit einer Schaltfläche, die die Kategorie akzeptiert und den Inhalt sofort anzeigt.

Consentaur erkennt eingebettete Inhalte beim Laden der Seite, aber Chrome und Firefox können mit dem Abruf beginnen, bevor ein Script ihn stoppen kann. Sicher ist es, wenn Sie data-consentaur-src statt src schreiben. Dann lädt der Browser den Inhalt nie von selbst:

<!-- Lädt erst, wenn der Besucher in Marketing einwilligt -->
<iframe
  data-consentaur-src="https://www.youtube.com/embed/VIDEO-ID"
  data-consentaur-category="marketing"
  width="560" height="315"
  title="Unser Video"
  allowfullscreen
></iframe>

Die Kategorie bestimmt, wann der Inhalt erscheint. Ohne data-consentaur-category verwendet Consentaur die Kategorie, die es für den Anbieter kennt: Statistik für Vimeo, Marketing für die übrigen. Soll ein iframe nie zurückgehalten werden, etwa Ihr eigenes Buchungssystem, ergänzen Sie data-consentaur-ignore. Der Cookie-Scan zeigt Ihnen im Dashboard, welche Einbettungen auf Ihrer Website noch nicht markiert sind.

Google Consent Mode v2

Consentaur unterstützt Google Consent Mode v2 automatisch. Beim Laden des Scripts stehen alle Signale standardmäßig auf „denied“. Sobald ein Besucher einwilligt, wird der Consent Mode aktualisiert:

analytics_storage: folgt der Kategorie „Statistik“
ad_storage, ad_user_data, ad_personalization: folgen der Kategorie „Marketing“
personalization_storage: folgt der Kategorie „Präferenzen“
functionality_storage, security_storage: immer „granted“

Sie müssen Google Consent Mode nicht separat einrichten, das übernimmt Consentaur. Bis der Besucher einwilligt, laufen Google-Tags deshalb ohne Cookies. Sollen sie vor der Einwilligung gar nicht laden, aktivieren Sie in den Einstellungen Ihrer Website im Dashboard Google-Tags bis zur Einwilligung blockieren.

Consentaur kann eine automatisch aktualisierte Übersicht der Cookies Ihrer Website anzeigen, nach Kategorien gruppiert. Den Code finden Sie im Dashboard auf der Seite Ihrer Website unter Cookie-Erklärung. Fügen Sie ihn auf der Seite mit Ihrer Cookie-Richtlinie oder Datenschutzerklärung ein:

<script src="https://cdn.consentaur.com/v1/IHRE_SITE_ID-declaration.js" defer></script>
<div data-consentaur-declaration></div>

Die Übersicht zeigt die für Ihre Website erfassten Cookies und bleibt nach jedem neuen Scan aktuell. Ist das Consentaur-Script auf derselben Seite eingebunden, enthält sie einen Link, über den Besucher ihre Einwilligung ändern können.

JavaScript-API

Consentaur stellt das globale Objekt window.Consentaur bereit, mit dem Sie die Einwilligung aus Ihrem eigenen Code steuern können, zum Beispiel für einen Link „Cookie-Einstellungen“ im Footer.

Cookie-Einstellungen öffnen

Zeigt die Einstellungen an, damit Besucher ihre Auswahl ändern können:

// Beispiel: an einen Button im Footer binden
document.getElementById('cookie-settings-btn')
  .addEventListener('click', () => {
    window.Consentaur.showSettings()
  })

Ohne eigenes JavaScript geht es mit dem Attribut data-consentaur-settings: Ein Klick auf das Element öffnet die Einstellungen.

<button data-consentaur-settings>
  Cookie-Einstellungen
</button>

Aktuelle Einwilligung abfragen

Liest den aktuellen Stand, etwa um Scripts nur bei Einwilligung zu laden:

const consent = window.Consentaur.getConsent()
// { necessary: true, analytics: true, marketing: false, preferences: false }

if (consent?.analytics) {
  // Statistik-Script manuell laden
}

Auf die Entscheidung des Besuchers warten

Widgets von Drittanbietern wie Chat, Video oder Karten sollten erst laden, wenn der Besucher das Cookie-Banner beantwortet hat. Dann liegen sie nicht über dem Banner und setzen keine Cookies vorab. onConsent() ruft Ihre Funktion auf, sobald eine Entscheidung vorliegt. Gibt es bereits eine gültige Einwilligung aus einem früheren Besuch, wird sie sofort aufgerufen:

let chatLoaded = false

window.Consentaur.onConsent((consent) => {
  // consent.action:     'accept_all' | 'reject_all' | 'customize' | 'stored'
  // consent.categories: { necessary, analytics, marketing, preferences }
  if (chatLoaded) return
  chatLoaded = true
  loadChatWidget()   // Ihr eigener Aufruf, z. B. das Chat-Script einfügen
})

Dasselbe Signal wird als Event auf window ausgelöst, jedes Mal, wenn die Einwilligung erteilt oder geändert wird:

window.addEventListener('consentaur:consent', (event) => {
  const { action, categories } = event.detail
})

// Hat der Besucher schon entschieden?
window.Consentaur.hasDecided()   // true / false

Setzt Ihr Widget Cookies einer Kategorie (z. B. Marketing), darf es nur laden, wenn genau diese Kategorie erlaubt ist: Prüfen Sie consent.categories.marketing oder lassen Sie Consentaur das Script mit data-consentaur-category automatisch blockieren. Auf eine Entscheidung zu warten ersetzt nicht die Einwilligung in die jeweilige Kategorie.

Mobilgeräte

Im Dashboard können Sie unter Banner → Layout → „Layout auf Mobilgeräten“ die Option Kompakt wählen. Auf Bildschirmen bis 640 px Breite zeigt das Banner dann eine Textzeile mit „Mehr lesen“, „Alle ablehnen“ und „Alle akzeptieren“ nebeneinander und „Anpassen“ als Link. Auswahl, Kategorien und Speicherung der Einwilligung bleiben gleich, nur das Layout ändert sich. Kompakt belegt auf einem üblichen Smartphone etwa 20 % des Bildschirms, das Standard-Layout (wie auf dem Desktop) etwa 30 %.

Hat Ihre Website einen Chat-Button oder Ähnliches, der sonst über dem Banner liegt, laden Sie ihn erst nach der Entscheidung des Besuchers. Siehe Auf die Entscheidung des Besuchers warten.

Den Consentaur-Scanner durch den Bot-Schutz lassen

Consentaur scannt Ihre Website regelmäßig, damit Ihre Cookie-Liste und Ihr Banner aktuell bleiben. Ein Bot-Schutz wie Cloudflare, DataDome, HUMAN oder Imperva kann den Scanner für einen unerwünschten Bot halten und statt Ihrer Website eine Prüfung zeigen. Ihr Dashboard meldet dann, dass der Bot-Schutz den Scanner blockiert, und Ihre Cookie-Liste kann erst wieder geprüft werden, wenn der Scanner durchkommt.

Lassen Sie den Scanner mit einem geheimen Request-Header durch, den nur Sie und Consentaur kennen:

Öffnen Sie im Dashboard die Einstellungen Ihrer Website. Wählen Sie unter Erweitert im Abschnitt Scanner-Zugang durch den Bot-Schutz die Option Geheimnis erzeugen und kopieren Sie das Geheimnis.
Legen Sie in Ihrem Bot-Schutz eine Regel an, die Bot-Prüfungen für Anfragen mit dem Header X-Consentaur-Scan und genau diesem Geheimnis überspringt. Die Anleitungen für Cloudflare und andere Anbieter finden Sie unten.
Speichern Sie Header und Geheimnis im Dashboard und wählen Sie Jetzt scannen. Sobald der Scan durchkommt, verschwindet der Hinweis.

Cloudflare

Was möglich ist, hängt von Ihrem Cloudflare-Tarif ab:

Pro, Business und Enterprise verwenden Super Bot Fight Mode. Eine Custom Rule mit der Aktion Skip lässt Anfragen mit Ihrem Header daran vorbei.
Free verwendet Bot Fight Mode, den keine Regel überspringen kann. Schalten Sie ihn unter Security → Settings aus (nach Bot traffic filtern, dann Bot fight mode), oder wechseln Sie zu Pro, um Super Bot Fight Mode zu nutzen.

Legen Sie die Regel im Cloudflare-Dashboard Ihrer Domain an. Die Menünamen folgen dem englischsprachigen Dashboard:

Öffnen Sie Security → Security rules.
Wählen Sie Create rule → Custom rules und geben Sie der Regel einen Namen, zum Beispiel „Consentaur-Scanner“.
Wählen Sie unter When incoming requests match die Option Edit expression und fügen Sie den folgenden Ausdruck ein, mit Ihrem Geheimnis statt IHR-GEHEIMNIS.
Wählen Sie unter Then take action die Aktion Skip und bei den zu überspringenden Komponenten All Super Bot Fight Mode rules. Wenn auch Ihre eigenen Custom Rules oder Rate Limiting Rules Bots prüfen, wählen Sie zusätzlich All remaining custom rules und All rate limiting rules.
Wählen Sie unter Place at die Position First, damit die Regel vor Ihren anderen Custom Rules läuft, und klicken Sie auf Deploy.

any(http.request.headers["x-consentaur-scan"][*] eq "IHR-GEHEIMNIS")

Cloudflare schreibt Header-Namen in Ausdrücken klein, egal wie sie in der Anfrage geschrieben sind. Das Geheimnis wird exakt verglichen, auch Groß- und Kleinschreibung. Haben Sie einen anderen Header-Namen gewählt, verwenden Sie ihn in Kleinbuchstaben. Während Sie ein Geheimnis erzeugen, zeigt das Dashboard diesen Ausdruck mit Ihrem Geheimnis an.

Under Attack mode

Ist der I'm Under Attack mode aktiv, prüft Cloudflare jeden Besucher, und eine Custom Rule kann das für den Scanner nicht abschalten. Cloudflare empfiehlt dafür eine Configuration Rule: Wählen Sie unter Rules → Overview die Option Create rule → Configuration Rule, verwenden Sie denselben Ausdruck und fügen Sie unter Then the settings are die Einstellung I'm Under Attack hinzu, die Sie ausschalten. Das gilt dann nur für Anfragen mit Ihrem Geheimnis.

Mit Cloudflare Bot Management für Enterprise sind Ihre Regeln zum Bot Score selbst Custom Rules. Die Skip-Regel oben deckt sie ab, wenn sie an erster Stelle steht und All remaining custom rules ausgewählt ist.

Andere Anbieter

AWS WAF mit Bot Control: Ergänzen Sie die verwaltete Regelgruppe Bot Control um ein Scope-down Statement, das Anfragen ausnimmt, deren Header X-Consentaur-Scan genau Ihrem Geheimnis entspricht. AWS beschreibt diesen Weg für vertrauenswürdige Bots, die ein gemeinsames Geheimnis in einem Header senden. Ihre übrigen Regeln gelten weiter.
HUMAN (Bot Defender): Legen Sie eine Custom Policy Rule mit einer Header-Bedingung auf X-Consentaur-Scan und Ihr Geheimnis an, mit der Aktion Allow, und geben Sie ihr eine höhere Priorität als den Regeln, die blockieren oder prüfen.
DataDome: Custom Rules können den Wert eines Headers nicht vergleichen, und eine Regel, die nur den Header-Namen prüft, würde jeden durchlassen. Bitten Sie den DataDome-Support, Anfragen mit Ihrem geheimen Header zuzulassen.
Akamai Bot Manager: Legen Sie den Scanner als eigenen Bot in einer Kategorie an, die Sie zulassen. Kann Ihre Konfiguration auf einen Request-Header prüfen, verwenden Sie X-Consentaur-Scan mit Ihrem Geheimnis; andernfalls fragen Sie Ihr Akamai-Team.
Imperva: Die Ausnahmen für Bots prüfen keine Header. Bitten Sie den Imperva-Support, den Scanner als guten Bot aufzunehmen, der an Ihrem geheimen Header erkannt wird.
Sucuri und Wordfence: Deren Allowlists arbeiten mit IP-Adressen oder Adressen Ihrer Website, nicht mit Headern. Wenden Sie sich an deren Support oder an uns unter support@consentaur.com.

Sicherheit

Verwenden Sie ein langes, zufälliges Geheimnis. Geheimnis erzeugen im Dashboard erstellt eines aus 32 zufälligen Bytes.
Überspringen Sie nur die Bot-Prüfungen. Überspringen Sie keine Managed Rules und schalten Sie nicht die ganze Firewall für Anfragen mit dem Header ab: Alles andere soll sie weiterhin schützen.
Wechseln Sie das Geheimnis von Zeit zu Zeit und immer dann, wenn jemand ausscheidet, der es kannte. Aktualisieren Sie beide Stellen: Tragen Sie das neue Geheimnis in Ihre Regel ein, speichern Sie es im Dashboard und entfernen Sie dann das alte. Damit dazwischen kein Scan blockiert wird, kann die Regel beide Geheimnisse akzeptieren, bis Sie das neue gespeichert haben.
Consentaur speichert das Geheimnis verschlüsselt und zeigt nach dem Speichern nur seine letzten Zeichen. Der Scanner sendet den Header nur über HTTPS und nur an Ihre eigene Domain und deren Subdomains (und an die Domain, auf die Ihre Startseite weiterleitet, falls die Website umgezogen ist), nie an andere Websites wie Analyse- oder Werbedienste.
Der Header ist der Weg, den Scanner durchzulassen. Wir veröffentlichen keine IP-Adressen des Scanners, daher funktioniert eine Regel auf Basis von IP-Adressen nicht.

Seiten hinter einer Anmeldung prüfen

Der Scanner besucht Ihre Website wie ein anonymer Besucher. Er meldet sich nie an und sieht daher nie die Cookies und gespeicherten Einträge, die Ihre Website nur für angemeldete Nutzer setzt, etwa ein Sitzungscookie oder die Einstellungen eines Dashboards im lokalen Speicher. Mit einem Audit zeigt Ihr eigener Browser Consentaur, wie sie heißen.

Öffnen Sie im Dashboard die Seite Cookies Ihrer Website und gehen Sie zu Audit im angemeldeten Zustand. Wählen Sie bei Bedarf eine Startseite (zum Beispiel /login) und klicken Sie auf Audit starten.
Ihre Website öffnet sich in einem neuen Tab mit einer kleinen Leiste: Consentaur-Audit läuft. Melden Sie sich an und nutzen Sie die Seiten, die angemeldete Nutzer sehen.
Klicken Sie in der Leiste oder im Dashboard auf Beenden. Was das Audit gefunden hat, steht in Ihrer Cookie-Liste mit dem Hinweis In Ihrem Audit gesehen. Prüfen Sie Kategorien und Beschreibungen wie bei gescannten Cookies.

Was das Audit sendet

Nur die Namen der Cookies, der Einträge im lokalen Speicher und im Sitzungsspeicher und der IndexedDB-Datenbanken, die Ihre Seiten sehen können, zusammen mit der Adresse der Seite. Nie deren Inhalt. Der Link enthält nach dem #-Zeichen einen Einmalcode, den Ihr Webserver, seine Logs und Ihre Statistik nie erhalten. Das Banner entfernt ihn sofort aus der Adressleiste, und der Code gilt nur, bis Sie das Audit beenden, höchstens 30 Minuten.

Das Audit läuft nur in dem Browser, in dem Sie den Link öffnen. Ihre Besucher werden nie auditiert, und ihre Browser senden nie etwas.

Die meisten Anmelde-Cookies sind HttpOnly: Ihr Browser hält sie von den Skripten der Seite fern, auch vom Audit. Unter Hat Ihre Website eine Anmeldung? auf der Seite Cookies können Sie sie hinzufügen:

Anmelde-Bibliotheken: Auth.js, NextAuth.js, Supabase, Clerk, Firebase, Django, Laravel, ASP.NET Core Identity und WordPress. Consentaur ergänzt die Namen anhand dessen, was es auf Ihrer Website gefunden hat, und fügt die Cookies mit der Speicherdauer aus der Dokumentation der Bibliothek hinzu.
Eigenes Anmelde-Cookie: der Name Ihres eigenen Anmelde-Cookies, ob es nach dem Schließen des Browsers erhalten bleibt und wie lange. Sie finden ihn in den Entwicklertools Ihres Browsers (Application, Cookies), während Sie angemeldet sind.

Cookies, die nur nach der Anmeldung gesetzt werden, erscheinen in Ihrem Banner und Ihrer Cookie-Erklärung mit "Wird nur gesetzt, wenn Sie sich anmelden". Wenn Ihre Website eine Content Security Policy verwendet, braucht das Audit dieselben Adressen wie das Banner: Skripte von cdn.consentaur.com und Anfragen an api.consentaur.com.

Fehlerbehebung

Das Cookie-Banner erscheint nicht

Prüfen Sie, ob das Script-Tag korrekt im <head> steht
Öffnen Sie die Browser-Konsole (F12) und suchen Sie nach Fehlermeldungen von Consentaur
Haben Sie bereits eingewilligt, löschen Sie das Cookie consentaur_consent (und den gleichnamigen Eintrag im localStorage) und laden Sie die Seite neu

Cookies werden vor der Einwilligung gesetzt

Das Consentaur-Script muss das erste Script im <head> sein
Entfernen Sie async und defer vom Consentaur-Script, falls vorhanden
Prüfen Sie, ob ein Caching- oder Optimierungs-Plugin das Script verschiebt oder verzögert
Scannen Sie Ihre Website erneut, um die Liste der zu blockierenden Cookies zu aktualisieren

Content Security Policy (CSP)

Nutzt Ihre Website eine Content Security Policy, erlauben Sie Scripts von cdn.consentaur.com:

Content-Security-Policy: script-src 'self' https://cdn.consentaur.com;