Consentl für jede Website

Ein Script-Tag als erstes im <head> Ihrer Website. Banner, Texte, Regionen, Consent Mode und Blockierungsregeln konfigurieren Sie im Consentl-Dashboard.

Loader als erstes im <head>

Ja

Consentl funktioniert auf jeder Website, auf der Sie ein <script> in den <head> einfügen können. Auf Ihrem Server muss nichts installiert werden: Alles wird im Consentl-Dashboard (externe Website) konfiguriert und vom Loader-Skript ausgeliefert.

Was jeder Tarif leistet

Im Tarif Free laufen Google-Tags, Meta Pixel und alle anderen Tags, sobald die Seite geladen wird, sofern Sie sie nicht manuell markieren.

1. Website hinzufügen und Schlüssel kopieren

1. Melden Sie sich im Dashboard an (oder erstellen Sie ein kostenloses Konto) und fügen Sie Ihre Website hinzu.
2. Tragen Sie im Feld Domains der Website jeden Hostnamen ein, unter dem sie läuft. www. und die Domain ohne www zählen als dieselbe Website; fügen Sie Staging-Domains separat hinzu.
3. Öffnen Sie die Seite Einrichtung der Website und kopieren Sie das Installations-Snippet. Der darin enthaltene Website-Schlüssel beginnt mit sk_ und ist öffentlich: Er identifiziert Ihre Website und ist kein Passwort.

2. Loader installieren

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG"></script>

• SITE_KEY: Ihr Website-Schlüssel (sk_ + 24 Zeichen).
• LANG: die Sprache der Seite, derselbe Wert wie <html lang>: en, de, fr, pt-PT, pt-BR, fr-CA, … Regionale Varianten fallen automatisch zurück (de-AT → de). Lassen Sie &l= weg, um die Standardsprache der Website aus dem Dashboard zu verwenden.

Wo: als erstes Element im <head>, direkt nach <meta charset>. Er muss vor Google Tag Manager, gtag.js, Meta Pixel, Statistik-Tools, Chat-Widgets und A/B-Test-Tools stehen.

Wie: synchron – kein async, kein defer, kein type="module". Das Skript ist klein und wird zwischengespeichert.

Warum als erstes und synchron:

1. Die Standardwerte von Google Consent Mode v2 (ab Tarif Pro) müssen gesetzt sein, bevor ein Google-Tag sie liest.
2. Die Blockierung verhindert, dass Tags laufen, bis der Besucher zustimmt. Skripte oberhalb des Loaders sind bereits gelaufen.
3. Die Auswahl eines wiederkehrenden Besuchers wird sofort angewendet: kein kurzes Aufblitzen des Banners und keine Tags, die ausgelöst werden, bevor die Auswahl bekannt ist.

Wenn Ihre Plattform das Skript nicht an erster Stelle einfügen kann, erklärt ihre Anleitung genau, was das bedeutet.

Was die Blockierung verhindern kann und was nicht

• Per Code geladene Tags (Google Tag Manager, der JavaScript-Loader eines Pixels, Skripte, die Ihre App hinzufügt) werden zurückgehalten, bevor sie angefordert werden, wenn sie einem bekannten Tracker (Business) oder einer Ihrer Blockierungsregeln entsprechen.
• Im HTML der Seite stehende Tags (<script src>, <img>-Pixel, <iframe>) werden vom Browser angefordert, bevor ein Skript sie aufhalten kann: Während der Loader herunterlädt, ruft der Browser bereits ab, was er weiter unten auf der Seite findet. Consentl verhindert zwar weiterhin, dass ein erkanntes Skript ausgeführt wird, aber die Anfrage – mit der IP-Adresse des Besuchers, der Adresse der Seite und etwaigen Drittanbieter-Cookies – ist bereits hinausgegangen; bei einem Tracking-Pixel ist die Anfrage das Tracking. Markieren Sie jedes im HTML stehende Tag manuell (Abschnitt 6) und löschen Sie <noscript>-Tracking-Pixel.
• Serverseitig gerenderte Websites können den Loader auch inline einbinden, wodurch die Wartezeit für den Download entfällt. Im HTML stehende Tags müssen trotzdem markiert werden.

3. Prüfen, ob es funktioniert

1. Öffnen Sie die Website in einem privaten Fenster. Das Banner erscheint.
2. In den Entwicklertools des Browsers → Console:
   • Consentl.get() gibt die aktuelle Auswahl zurück;
   • Consentl.region() gibt das auf den Besucher angewendete rechtliche Modell zurück, etwa { mode: "opt_in", law: "gdpr", gpc: false, known: true }.
3. Unter Network, bevor Sie akzeptieren:
   • keine Anfragen von per Code geladenen Tags an Tracking-Hosts, wenn die automatische Blockierung aktiv ist (Business); mit Consent Mode nur die cookielosen Pings von Google;
   • im HTML stehende Tags, die Sie nicht markiert haben, werden angefordert. Markieren Sie sie und prüfen Sie erneut.
4. Solange sich die Website im Testmodus befindet, hängen Sie ?consentl=preview an eine Adresse an, um das Banner zu sehen, ohne eine Auswahl zu speichern oder zu protokollieren. Dabei wird keine Region gewählt: Die Vorschau im Dashboard zeigt das Banner für jede Region.

Regionen: Bei jedem Seitenaufruf fragt das Banner Consentl nach dem Land des Besuchers, das sich aus seiner IP-Adresse ergibt. Die Abfrage erfolgt im Arbeitsspeicher und speichert nichts, und der Loader ist für jeden Besucher gleich. Es gilt Ihre Regel für dieses Land:

• US-Bundesstaaten werden nicht unterschieden: Ein Besucher aus den USA erhält Ihre Regel für die gesamten USA oder, ohne eine solche, Ihre erste Regel für einen US-Bundesstaat (zum Beispiel Kalifornien).
• Wenn das Land unbekannt ist, gilt Ihre Regel für unbekannte Regionen (standardmäßig Opt-in).
• Der Code steht im dataLayer-Feld consentl.region (zum Beispiel DE oder US). Um das Banner einer anderen Region zu sehen, verwenden Sie die Vorschau im Dashboard oder ein VPN.

4. Link „Cookie-Einstellungen“ hinzufügen

Der Widerruf der Einwilligung muss so einfach sein wie ihre Erteilung. Verwenden Sie eine dieser Varianten:

<a href="#consentl">Cookie settings</a>
<button type="button" data-consentl-open>Cookie settings</button>

window.Consentl.open("prefs");

Links, deren Adresse auf #consentl oder #consentl-preferences endet, und jedes Element mit data-consentl-open öffnen die Einstellungen, statt zu navigieren, auch bei später hinzugefügten Elementen. Andere Anker, die nur gleich beginnen (etwa #consentl-api), bleiben unberührt. Das Dashboard kann auch ein schwebendes Einstellungssymbol anzeigen.

5. Cookie-Erklärung, Datenschutzanfragen und EU-Widerrufsformular

<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-request      data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-withdrawal   data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>

Binden Sie blocks.js einmal pro Seite nach den <div>s ein. Die Erklärung listet die Cookies von der Seite Cookies des Dashboards auf: Der Scanner fügt hinzu, was er findet, wenn die Website angelegt wird, wenn Sie auf Jetzt scannen klicken und, ab dem Tarif Business, jeden Monat; Sie können Einträge auch selbst hinzufügen oder bearbeiten (Details werden aus der Open Cookie Database ergänzt). Datenschutzanfragen werden per E-Mail bestätigt und erscheinen mit ihrer Frist im Dashboard. Das EU-Widerrufsformular erfordert den Tarif Pro oder höher und muss im Dashboard aktiviert werden; andernfalls bleibt sein <div> leer.

6. Alles zurückhalten, was nicht automatisch erkannt wird

<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<script type="text/plain" data-consentl="analytics">/* inline code */</script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">

• Kategorien: preferences, analytics, marketing.
• Nichts wird angefordert, bis die Kategorie erlaubt ist. Nur so lässt sich ein im HTML stehendes Tag zurückhalten.
• Fügen Sie einem markierten Skript, das als Modul laufen muss, data-consentl-type="module" hinzu.
• Die manuelle Blockierung funktioniert in jedem Tarif. Der Tarif Business ergänzt die automatische Blockierung bekannter Tracker und Blockierungsregeln („URL enthält“), die Sie im Dashboard hinzufügen, ohne die Website anzufassen. Regeln greifen bei der Adresse von Skripten, iframes und Bildern sowie bei Inline-Skripten, die etwas laden. Seitendaten von Frameworks wie Next.js, Nuxt, Remix oder SvelteKit werden nie zurückgehalten.
• Ein zurückgehaltenes Tag läuft nach der Einwilligung einmal, auch wenn Ihr Framework beim Start der Seite eine zweite Kopie davon hinzufügt (wie Nuxt).

Single-Page-Apps

• Bei Routenwechseln ist nichts aufzurufen: Die Laufzeit wird einmal pro Dokument geladen, die Auswahl ist im First-Party-Cookie consentl gespeichert, und zurückgehaltene Tags werden ohne Neuladen freigegeben.
• Bei Routern, die den Seiteninhalt austauschen (Astro <ClientRouter />, Turbo, Swup, htmx hx-boost), funktionieren das Banner, das schwebende Symbol und Links „Cookie-Einstellungen“ weiter.
• Halten Sie die Loader-Adresse auf jeder Seite gleich und laden Sie ihn bei der Navigation nicht erneut. Wenn Ihr Baukasten „auf jeder Seite laden“ anbietet, wählen Sie „einmal laden“.
• Tags, die Ihre App später einfügt, werden ebenfalls zurückgehalten, wenn sie einem bekannten Tracker (Business) oder einer Blockierungsregel entsprechen. Prüfen Sie in Ihrem eigenen Code die Einwilligung. consentl:change wird bei jedem Seitenaufruf mit der aktuellen Auswahl und erneut bei jeder Änderung ausgelöst, starten Sie also alles nur einmal:

let started = false;
const maybeStart = (c) => {
  if (c.analytics && !started) {
    started = true;
    startAnalytics();
  }
};
document.addEventListener("consentl:change", (e) => maybeStart(e.detail));
if (window.Consentl) maybeStart(window.Consentl.get());

• Nach einem Sprachwechsel ohne vollständiges Neuladen behält das Banner seine Sprache bis zum nächsten Laden der Seite.

Mit Google Tag Manager

Die Consentl-Vorlage für GTM kann Google Consent Mode übernehmen. Wenn Sie sie und das Snippet verwenden, hängen Sie &gcm=ext an die Loader-Adresse an, damit nur die Vorlage Consent-Mode-Befehle sendet:

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG&gcm=ext"></script>

Inline-Bootstrap (serverseitig)

Wenn Ihre Seiten auf einem Server gerendert werden, den Sie kontrollieren, können Sie den Loader inline ausgeben, statt ihn zu verlinken, wie es die Consentl-Plugins für WordPress, Shopware, PrestaShop und Magento tun:

1. Rufen Sie auf dem Server https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG ab.
2. Speichern Sie die Antwort pro Website-Schlüssel und Sprache 5 Minuten zwischen (ihr Cache-Control); wenn ein späterer Abruf fehlschlägt, liefern Sie weiter die letzte gültige Kopie aus.
3. Geben Sie <script> + die Antwort + </script> als erstes Element im <head> aus. Mit einer Content Security Policy fügen Sie Ihre Nonce hinzu (der Inhalt ändert sich mit Ihren Einstellungen, daher funktioniert ein Hash nicht).
4. Gibt es überhaupt keine zwischengespeicherte Kopie, geben Sie das normale Tag <script src="…"> aus.

// Node, simplified
const cache = new Map(); // url -> { body, until }
async function consentlHead(key, lang) {
  const url = `https://api.consentl.com/v1/loader.js?k=${encodeURIComponent(key)}&l=${encodeURIComponent(lang)}`;
  const hit = cache.get(url);
  if (!hit || hit.until < Date.now()) {
    try {
      const r = await fetch(url);
      if (r.ok) cache.set(url, { body: await r.text(), until: Date.now() + 300_000 });
    } catch {
      /* keep the stale copy */
    }
  }
  const body = cache.get(url)?.body;
  return body ? `<script>${body}</script>` : `<script src="${url}"></script>`;
}

Verändern Sie die Antwort nicht: Sie wird von Consentl für Ihre Website erzeugt. Geben Sie sie im HTML-Template aus, das Ihr Server schreibt, außerhalb jedes clientseitigen Frameworks. Nicht für den App Router von Next.js: React würde den Loader dort auf jeder Seite zweimal senden; verwenden Sie das einfache Tag wie unter Next.js gezeigt.

JavaScript-API

Events auf document (die Auswahl steht in event.detail):

• consentl:change: bei jedem Seitenaufruf, sobald die Regionsregel angewendet ist, und bei jeder Änderung;
• consentl:ready: einmal pro Seitenaufruf, nach dem ersten consentl:change;
• consentl:ui-error: Das Banner konnte nicht geladen werden (auch nach einem erneuten Versuch). Links auf #consentl verhalten sich dann wie normale Links, sodass Sie eine eigene Ausweichlösung anzeigen können.

Der dataLayer erhält consentl_consent (bei jedem Seitenaufruf und jeder Änderung) und consentl_update (nur bei Änderungen), jeweils mit consentl.preferences, analytics, marketing, sale, stored und region. Markierte Elemente: data-consentl="<category>", type="text/plain", data-src, data-consentl-srcset (Bilder mit srcset), data-consentl-type. Fügen Sie auf Seiten, die einen eigenen Button „Cookie-Einstellungen“ haben, einem Element data-consentl-noicon hinzu, um dort das schwebende Symbol auszublenden.

Content Security Policy

Wenn Ihre Website einen Content-Security-Policy-Header sendet, erlauben Sie die Consentl-API:

script-src  'self' https://api.consentl.com;
connect-src 'self' https://api.consentl.com;
img-src     'self' https://api.consentl.com data:;
style-src   'self' 'unsafe-inline';

• style-src 'unsafe-inline' ist nötig, weil das Banner seine Styles zur Laufzeit hinzufügt. Wenden Sie sich an den Support, wenn Ihre Policy Inline-Styles verbietet.
• Skripte, die Consentl nach der Einwilligung freigibt, benötigen weiterhin ihre eigenen Hosts in script-src.
• Bei einer strikten Nonce-Policy geben Sie dem Loader-Tag Ihre Nonce und verwenden 'strict-dynamic', damit die Skripte, die er lädt und freigibt, als vertrauenswürdig gelten. Ohne 'strict-dynamic' geben Sie auch markierten Inline-Skripten Ihre Nonce.
• Subresource Integrity (SRI) kann beim Loader nicht verwendet werden, weil sich sein Inhalt ändert, wenn Sie Einstellungen im Dashboard ändern.

Serverseitige Prüfungen (optional)

Die Auswahl wird im First-Party-Cookie consentl gespeichert: 1.<id>.<timestamp>.<revision>.<flags>.<action>. flags hat vier Ziffern für preferences, analytics, marketing und sale (1 = erteilt). Kein Cookie bedeutet: noch keine Entscheidung – behandeln Sie das als „nicht erteilt“. Ein Cookie mit einer älteren Revision (nach „Alle Einwilligungen zurücksetzen“) zählt nicht mehr. Seiten, die von diesem Cookie abhängen, dürfen nicht in einem gemeinsamen Cache gespeichert werden. Bevorzugen Sie nach Möglichkeit die clientseitige Steuerung (Abschnitt 6).

Einschränkungen

• Das Banner kann keine Skripte steuern, die vor dem Loader laufen: Skripte oberhalb davon im <head> und Skripte, die eine Hosting-Plattform außerhalb Ihrer Kontrolle einfügt.
• Im HTML der Seite stehende Tags werden vor der Einwilligung angefordert, sofern Sie sie nicht markieren.
• Eingebettete iframes von Drittanbietern (Videos, Karten) werden bis zur Einwilligung als Ganzes zurückgehalten. Consentl kann nicht sehen, was in ihnen geschieht.
• Consentl implementiert das IAB Transparency & Consent Framework (TCF) nicht.

Verwandte Anleitungen

• Google Tag Manager
• Next.js
• React, Vue, Angular (SPA)
• Webflow

Kommen Sie nicht weiter? Schreiben Sie an support@consentl.com – wir antworten an Werktagen auf Englisch.