Dokumentation

Einbindung in 5 Minuten

1. Snippet

Das Snippet bekommst du nach dem Anlegen einer Property unter Property → Einbindung. Es sieht so aus:

<script src="https://consented.eu/sdk/dist/stub.js"
        data-block="googletagmanager.com/gtag|connect.facebook.net"></script>
<script async src="https://consented.eu/p/DEINE-PROPERTY-ID/cmp.js"></script>

Die erste Zeile ist der Loader: synchron, rund 2 KB über die Leitung, und er muss vor jedem anderen Skript stehen — auch vor dem Google Tag Manager. Er blockiert die in data-block genannten Muster sofort und setzt die Consent-Mode-Standardwerte. Beides liest er von seinem eigenen Script-Tag, weil er läuft, bevor die Konfiguration der Property existiert. Änderst du deine Dienste oder den Consent-Mode-Schalter, füge das Snippet erneut ein.

Sprache des Banners: zuerst die Sprache der Seite aus <html lang>, dann ein data-lang-Attribut am Script-Tag (<script async src="…/cmp.js" data-lang="de">) oder an <html>, zuletzt die Browsersprache. Gewinnen können nur Sprachen, die in der Property aktiviert sind. Die Reihenfolge und ein Sprachmenü für Besucher stellst du unter Property → Einstellungen ein.

2. Skripte blockieren

Deklarativ — für Skripte, die du selbst einbindest:

<script type="text/plain" data-consented="google-analytics-4">
  gtag('config', 'G-XXXXXXX');
</script>

Musterbasiert — für Skripte, die andere einbinden:

Trage bei jedem Dienst URL-Fragmente ein (z. B. googletagmanager.com/gtag). Ein MutationObserver entfernt das src-Attribut, sobald das Element im Dokument auftaucht — auch tief in einem nachträglich eingefügten Block —, und setzt es nach der Einwilligung wieder.

Die zwei Wege sind nicht gleichwertig. Bei Markup, das der Browser beim Laden der Seite verarbeitet, kommt der Loader vor dem Abruf dazwischen. Fügt eine Seite ein Skript später selbst per appendChild ein, ist das ein Wettrennen mit dem Ladevorgang, das der Observer nicht garantiert gewinnt. Für Skripte, die du selbst in der Hand hast, ist der deklarative Weg der verlässliche; die Musterblockade ist das Auffangnetz für alles andere.
2b. Embeds blockieren

Embeds — für eingebettete Inhalte mit sichtbarer Fläche, etwa ein Video oder eine Karte:

<iframe data-consented="youtube-embed"
        data-consented-src="https://www.youtube-nocookie.com/embed/XXXX"
        width="560" height="315"
        title="Videotitel"></iframe>

Kein src-Attribut, bis die Einwilligung vorliegt — data-consented benennt den Dienst direkt, data-consented-src trägt die eigentliche Adresse. Weil der Browser nie ein src sieht, gibt es hier kein Wettrennen: anders als bei der Musterblockade oben ist dieser Weg für Embeds durchgehend zuverlässig, nicht nur ein Auffangnetz.

3. JavaScript-API
// Warten, bis der Zustand bekannt ist
Consented.ready(function (state) {
  if (state && state.services['google-analytics-4']) { startTracking(); }
});

// Auf Änderungen reagieren
Consented.on('change', function (state) { console.log(state); });

// Detailansicht öffnen — oder einfach data-consented-open ans Element
Consented.openSettings();

// Nachweisführung
Consented.getConsentId();
4. dataLayer-Ereignisse
EreignisWann
consented_readyRuntime geladen, Zustand bekannt
consented_updateNach jeder Entscheidung des Besuchers
5. Cookie-Erklärung

Eine fertige Übersicht aller Dienste und Cookies deiner Property — für die Stelle in deiner Datenschutzerklärung, an der du nach Art. 13 DSGVO informieren musst. Zwei Zeilen, und sie hält sich selbst aktuell:

<div id="consented-cookie-declaration"></div>
<script src="https://consented.eu/p/DEINE-PROPERTY-ID/cookies.js?lang=de"></script>

Das div ist optional: fehlt es, setzt sich die Erklärung genau dorthin, wo das script steht. Sie bringt sparsame eigene Formatierung mit, alles unter der Klasse consented-cd — dein CSS überschreibt sie. Mit ?lang= wählst du die Sprache; ohne Angabe gilt die Standardsprache der Property.

Dieselbe Erklärung gibt es als eigenständige Seite zum Verlinken und Drucken:

https://consented.eu/p/DEINE-PROPERTY-ID/cookies?lang=de

Beide entstehen aus dem veröffentlichten Stand deiner Property, nicht aus dem Arbeitsstand. Was du gerade bearbeitest, erscheint erst nach dem Veröffentlichen — so steht in deiner Datenschutzerklärung nie ein Dienst, den die Seite noch nicht lädt.

Betroffenenrechte

Jede Einwilligung bekommt eine ID, die dem Besucher in der Detailansicht angezeigt wird. Damit kann er ohne Konto Auskunft verlangen oder löschen lassen:

GET    /api/v1/consent/{consentId}
DELETE /api/v1/consent/{consentId}

Oder komfortabel über die öffentliche Abfrageseite.