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>
<script src="https://cdn.consentaur.com/v1/IHRE_SITE_ID.js"></script><!-- MUSS an erster Stelle stehen -->
<!-- Ihre anderen Scripts darunter -->
<script src="https://www.googletagmanager.com/gtag/js?id=..."></script>
...
</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. Dienste wie Google Analytics und das Meta Pixel setzen ihre Cookies auf Ihrer eigenen Domain und werden deshalb nicht automatisch erkannt. Kennzeichnen Sie diese und andere Scripts mit dem Attribut data-cookiebar-category, damit sie erst nach der Einwilligung laufen:

<!-- Wird blockiert, bis der Besucher in Marketing einwilligt -->
<script
  src="https://example.com/tracking.js"
  data-cookiebar-category="marketing"
></script>

<!-- Wird blockiert, bis der Besucher in Statistik einwilligt -->
<script data-cookiebar-category="analytics">
  // Inline-Code für die Statistik
</script>

Gültige Kategorien:

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

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.

Cookie-Erklärung für Ihre Cookie-Richtlinie

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-cookiebar-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.cookieBar 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.cookieBar.showSettings()
  })

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

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

Aktuelle Einwilligung abfragen

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

const consent = window.cookieBar.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.cookieBar.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('cookiebar:consent', (event) => {
  const { action, categories } = event.detail
})

// Hat der Besucher schon entschieden?
window.cookieBar.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-cookiebar-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.

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 cookiebar_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;