JavaScript API & Events

Vollständige Referenz der öffentlichen API, Konfigurationsoptionen und Events von Barefoot CMP.

Globales Objekt

Nach dem Laden des Barefoot CMP Scripts steht das globale Objekt window.ConsentManager zur Verfügung. Über dieses Objekt können Sie das Consent-Banner programmatisch steuern, den aktuellen Consent-Status abfragen und auf Änderungen reagieren.

Zusätzlich ist das Objekt unter dem Alias window.BarefootCMP erreichbar. Beide Referenzen zeigen auf dasselbe Objekt und sind austauschbar verwendbar.

Hinweis: Die API ist erst verfügbar, nachdem das Script vollständig geladen wurde. Prüfen Sie die Verfügbarkeit, bevor Sie auf Methoden zugreifen.

Beispiel zur Prüfung der Verfügbarkeit:

JavaScript if (window.ConsentManager) { console.log('Barefoot CMP geladen'); console.log(window.ConsentManager.getConsent()); }

Beide Zugriffswege sind identisch:

JavaScript // Beide Varianten sind äquivalent: window.ConsentManager.show(); window.BarefootCMP.show(); // Alias-Prüfung console.log(window.ConsentManager === window.BarefootCMP); // true

Öffentliche API-Methoden

Alle verfügbaren Methoden des ConsentManager-Objekts mit Signaturen, Parametern und Beispielen.

ConsentManager.show()

ConsentManager.show() : void
Parameter: keine Rückgabe: void

Zeigt das Consent-Banner erneut an, unabhängig davon, ob der Nutzer bereits eine Entscheidung getroffen hat. Diese Methode wird typischerweise verwendet, um einen „Cookie-Einstellungen"-Link im Footer oder in der Datenschutzerklärung anzubieten, über den Nutzer ihre Einstellungen jederzeit ändern können.

JavaScript // Banner per Footer-Link erneut öffnen document.getElementById('cookie-settings').addEventListener('click', () => { ConsentManager.show(); });

ConsentManager.hide()

ConsentManager.hide() : void
Parameter: keine Rückgabe: void

Versteckt das Consent-Banner programmatisch. Das Banner wird aus der Ansicht entfernt, ohne dass eine Consent-Entscheidung gespeichert wird. Nützlich in Kombination mit eigener UI-Logik oder bei speziellen Navigationsszenarien.

JavaScript // Banner nach 30 Sekunden automatisch ausblenden setTimeout(() => { if (window.ConsentManager) { ConsentManager.hide(); } }, 30000);

ConsentManager.getConsent()

ConsentManager.getConsent() : Object | null
Parameter: keine Rückgabe: Object | null

Gibt das aktuelle Consent-Objekt zurück. Enthält alle Kategorien und Metadaten der letzten Consent-Entscheidung. Gibt null zurück, wenn noch kein Consent erteilt wurde.

Rückgabe-Objekt Struktur:

JavaScript const consent = ConsentManager.getConsent(); console.log(consent); // Rückgabe-Objekt: { version: '1.0', categories: { necessary: true, // immer true analytics: true, // vom Nutzer gewählt marketing: false, // vom Nutzer gewählt functional: true // vom Nutzer gewählt }, timestamp: '2025-01-15T10:30:00.000Z', anonymousId: 'a1b2c3d4e5f6', url: 'https://www.beispiel.de/seite' }

Hinweis: Die Kategorie necessary ist immer true und kann vom Nutzer nicht deaktiviert werden. Dies entspricht den DSGVO-Anforderungen.

ConsentManager.hasConsent(category)

ConsentManager.hasConsent(category: string) : boolean
Parameter: category string Rückgabe: boolean

Prüft, ob der Nutzer für eine bestimmte Kategorie Consent erteilt hat. Akzeptiert die Werte 'necessary', 'analytics', 'marketing' oder 'functional'. Gibt false zurück, wenn noch kein Consent vorliegt oder die Kategorie abgelehnt wurde.

JavaScript // Prüfen, ob Analytics erlaubt sind if (ConsentManager.hasConsent('analytics')) { // Google Analytics laden gtag('config', 'G-XXXXXXXXXX'); } // Prüfen, ob Marketing-Cookies erlaubt sind if (ConsentManager.hasConsent('marketing')) { // Facebook Pixel aktivieren fbq('init', 'PIXEL_ID'); fbq('track', 'PageView'); } // Notwendig ist immer true console.log(ConsentManager.hasConsent('necessary')); // true

ConsentManager.reset()

ConsentManager.reset() : void
Parameter: keine Rückgabe: void

Löscht den Consent-Cookie und setzt den gesamten Consent-Status zurück. Nach dem Aufruf wird das Banner erneut angezeigt, damit der Nutzer eine neue Entscheidung treffen kann. Alle zuvor erteilten Berechtigungen werden widerrufen.

JavaScript // Consent zurücksetzen (z.B. auf Nutzeranfrage) ConsentManager.reset(); // Nach dem Reset: console.log(ConsentManager.getConsent()); // null // Banner wird automatisch erneut angezeigt

ConsentManager.exportConsent()

ConsentManager.exportConsent() : Object
Parameter: keine Rückgabe: Object

Gibt einen vollständigen Consent-Datensatz zurück, der alle relevanten Informationen für Compliance- und Audit-Zwecke enthält. Dieser Export kann gespeichert werden, um die Einwilligung nachweisen zu können.

JavaScript const record = ConsentManager.exportConsent(); console.log(record); // Rückgabe-Objekt: { consent: { version: '1.0', categories: { necessary: true, analytics: true, marketing: false, functional: true }, timestamp: '2025-01-15T10:30:00.000Z', anonymousId: 'a1b2c3d4e5f6', url: 'https://www.beispiel.de/seite' }, exportDate: '2025-01-15T12:00:00.000Z', configVersion: '2.1.0', userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)...', url: 'https://www.beispiel.de/seite' }

Tipp: Verwenden Sie exportConsent() in Kombination mit Ihrem eigenen Backend, um Consent-Nachweise DSGVO-konform zu archivieren.

ConsentManager.setConsent(category, granted)

ConsentManager.setConsent(category: string, granted: boolean) : void
Parameter: category string, granted boolean Rückgabe: void

Setzt den Consent-Status einer bestimmten Kategorie programmatisch. Akzeptiert den Kategorienamen ('analytics', 'marketing', 'functional') und einen Boolean-Wert, der angibt, ob die Kategorie genehmigt (true) oder abgelehnt (false) wird.

Achtung: Diese Methode ändert den Consent ohne Nutzerinteraktion. Setzen Sie sie nur ein, wenn ein legitimer Grund besteht (z.B. bei Migrationen von einem anderen CMP-System). Die DSGVO erfordert eine aktive, informierte Einwilligung des Nutzers.

JavaScript // Analytics-Consent programmatisch erteilen ConsentManager.setConsent('analytics', true); // Marketing-Consent widerrufen ConsentManager.setConsent('marketing', false); // Hinweis: 'necessary' kann nicht auf false gesetzt werden ConsentManager.setConsent('necessary', false); // wird ignoriert

ConsentManager.destroy()

ConsentManager.destroy() : void
Parameter: keine Rückgabe: void

Entfernt das Banner vollständig aus dem DOM, trennt den MutationObserver und bereinigt alle Event-Listener und internen Referenzen. Diese Methode ist besonders relevant für Single Page Applications (SPA), bei denen das Banner beim Navigieren zu bestimmten Seiten entfernt werden soll.

JavaScript // In einer SPA: CMP aufräumen beim Navigieren function navigateAway() { if (window.ConsentManager) { ConsentManager.destroy(); } // Zur nächsten Seite navigieren... } // React useEffect Cleanup-Beispiel useEffect(() => { return () => { if (window.ConsentManager) { ConsentManager.destroy(); } }; }, []);

Hinweis: Nach destroy() sind alle API-Methoden nicht mehr verfügbar. Um das CMP erneut zu verwenden, muss das Script neu geladen werden.

Methoden-Übersicht

Methode Parameter Rückgabe Beschreibung
show() keine void Zeigt das Consent-Banner an
hide() keine void Versteckt das Banner
getConsent() keine Object|null Gibt aktuellen Consent zurück
hasConsent(cat) string boolean Prüft Consent für Kategorie
reset() keine void Setzt Consent zurück, zeigt Banner
exportConsent() keine Object Export für Compliance/Audit
setConsent(cat, val) string, boolean void Setzt Consent programmatisch
destroy() keine void Entfernt Banner und bereinigt

Konfigurationsobjekt

Barefoot CMP kann über ein globales Konfigurationsobjekt angepasst werden, das VOR dem Laden des Scripts gesetzt werden muss.

Grundlegende Konfiguration

Das Konfigurationsobjekt wird über window.ConsentManagerConfig gesetzt. Es muss im HTML vor dem Laden des Barefoot CMP Scripts definiert werden:

HTML <script> window.ConsentManagerConfig = { language: 'de', primaryColor: '#2563eb', theme: 'light', position: 'bottom', showFloatingButton: true, blockingMode: true }; </script> <!-- Barefoot CMP NACH der Konfiguration laden --> <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID"></script>

Wichtig: Das ConsentManagerConfig-Objekt muss vor dem Script-Tag definiert werden, da die Konfiguration beim Laden ausgelesen wird.

Alle Konfigurationsoptionen

Option Typ Standard Beschreibung
language string 'de' Sprache (de, en, fr, es, it, nl, pl, pt, sv, da, fi, cs)
primaryColor string '#2563eb' Primärfarbe für Buttons und Akzente
theme string 'light' 'light', 'dark' oder 'auto'
position string 'bottom' 'bottom', 'top' oder 'center'
borderRadius number 12 Border-Radius in Pixeln
cookieName string 'bf_consent' Name des Consent-Cookies
cookieDomain string '' Cookie-Domain (leer = aktuelle Domain)
cookiePath string '/' Cookie-Pfad
cookieExpiry number 365 Cookie-Lebensdauer in Tagen
cookieSameSite string 'Lax' SameSite-Attribut
cookieSecure boolean true Secure-Flag für den Cookie
showFloatingButton boolean true Floating Cookie-Button anzeigen
blockingMode boolean true Scripts blockieren bis Consent
autoBlocking boolean true Automatisches Script-Blocking
respectDoNotTrack boolean false DNT-Header des Browsers beachten
autoShow boolean true Banner automatisch beim Laden anzeigen

Geo-Targeting Konfiguration

Barefoot CMP unterstützt Geo-Targeting, um das Banner nur in bestimmten Regionen anzuzeigen. Die EU-Erkennung geschieht automatisch über den Geo-API-Endpunkt.

JavaScript window.ConsentManagerConfig = { geoTargeting: { enabled: true, apiUrl: '/v1/geo', mode: 'eu-only', // 'eu-only' | 'worldwide' nonEuBehavior: 'none', // 'none' | 'notice' | 'full' fallback: 'strict' // 'strict' | 'relaxed' } };
Option Beschreibung
mode: 'eu-only' Banner nur für Besucher aus EU-/EWR-Ländern anzeigen
mode: 'worldwide' Banner für alle Besucher weltweit anzeigen
nonEuBehavior: 'none' Kein Banner für Non-EU-Besucher, alle Cookies aktiv
nonEuBehavior: 'notice' Einfacher Hinweis ohne Opt-in für Non-EU-Besucher
nonEuBehavior: 'full' Volles Opt-in-Banner auch für Non-EU-Besucher
fallback: 'strict' Bei Geo-API-Fehler: Banner anzeigen (sicher)
fallback: 'relaxed' Bei Geo-API-Fehler: Kein Banner (riskant)

Google Consent Mode v2

Barefoot CMP unterstützt Google Consent Mode v2 mit allen 7 Signalen. Die Konfiguration ermöglicht die Anpassung der Default-Zustände und des Timing-Verhaltens.

JavaScript window.ConsentManagerConfig = { googleConsentMode: { enabled: true, waitForUpdate: 500, // ms warten auf Consent-Update defaultState: { ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', analytics_storage: 'denied', functionality_storage: 'denied', personalization_storage: 'denied', security_storage: 'granted' } } };

Hinweis: security_storage ist standardmäßig 'granted', da es für sicherheitsrelevante Funktionen wie Betrugsschutz benötigt wird und keine Einwilligung erfordert.

Die 7 Consent Mode Signale und ihre Zuordnung zu den Cookie-Kategorien:

Signal Kategorie Beschreibung
ad_storage Marketing Speicherung für Werbezwecke (Cookies, IDs)
ad_user_data Marketing Übertragung von Nutzerdaten an Google-Werbedienste
ad_personalization Marketing Personalisierte Werbung und Remarketing
analytics_storage Analytics Speicherung für Analysezwecke (GA4 etc.)
functionality_storage Functional Speicherung für Website-Funktionalität
personalization_storage Functional Speicherung für Personalisierung
security_storage Necessary Sicherheitsrelevante Speicherung (immer granted)

Eigene Texte (Custom Translations)

Sie können die Banner-Texte individuell anpassen, indem Sie eigene Übersetzungen über das customTranslations-Objekt definieren. Diese überschreiben die Standard-Texte für die gewählte Sprache.

JavaScript window.ConsentManagerConfig = { language: 'de', customTranslations: { bannerTitle: 'Cookie-Hinweis', bannerText: 'Wir verwenden Cookies, um Ihnen die bestmögliche Erfahrung auf unserer Website zu bieten.', acceptAll: 'OK', rejectAll: 'Nein danke' } };

Sie können auch nur einzelne Texte überschreiben. Nicht definierte Texte verwenden die Standard-Übersetzung der gewählten Sprache.

Vollständiges Konfigurationsbeispiel

JavaScript window.ConsentManagerConfig = { // Grundeinstellungen language: 'de', primaryColor: '#1a56db', theme: 'light', position: 'bottom', borderRadius: 12, // Cookie-Einstellungen cookieName: 'bf_consent', cookieExpiry: 365, cookieSecure: true, cookieSameSite: 'Lax', // Verhalten showFloatingButton: true, blockingMode: true, autoBlocking: true, autoShow: true, respectDoNotTrack: false, // Geo-Targeting geoTargeting: { enabled: true, mode: 'eu-only', nonEuBehavior: 'none', fallback: 'strict' }, // Google Consent Mode v2 googleConsentMode: { enabled: true, waitForUpdate: 500 }, // Eigene Texte customTranslations: { bannerTitle: 'Datenschutz-Einstellungen', acceptAll: 'Alle akzeptieren', rejectAll: 'Nur notwendige' }, // Callbacks (siehe nächster Abschnitt) onReady: function() { console.log('CMP bereit'); } };

Callbacks & Events

Reagieren Sie auf Consent-Änderungen mit Callback-Funktionen und DOM-Events.

Callback-Funktionen

Callbacks werden im Konfigurationsobjekt ConsentManagerConfig definiert und bei bestimmten Aktionen ausgelöst. So können Sie eigene Logik ausführen, wenn der Nutzer seine Consent-Entscheidung trifft.

onConsentChange(record)

Wird bei jeder Consent-Änderung ausgelöst, unabhängig davon, ob der Nutzer „Alle akzeptieren", „Alle ablehnen" oder einzelne Kategorien anpasst. Erhält das vollständige Consent-Record als Parameter.

onConsentAccepted()

Wird ausgelöst, wenn der Nutzer auf „Alle akzeptieren" klickt. Enthält keine Parameter.

onConsentRejected()

Wird ausgelöst, wenn der Nutzer auf „Alle ablehnen" klickt. Enthält keine Parameter.

onReady()

Wird ausgelöst, sobald der ConsentManager vollständig initialisiert ist und die API zur Verfügung steht.

JavaScript window.ConsentManagerConfig = { onConsentChange: function(record) { console.log('Consent geändert:', record); if (record.categories.analytics) { // Analytics aktivieren gtag('config', 'G-XXXXXXXXXX'); } if (record.categories.marketing) { // Marketing-Pixel laden fbq('init', 'PIXEL_ID'); } }, onConsentAccepted: function() { console.log('Nutzer hat alle Cookies akzeptiert'); }, onConsentRejected: function() { console.log('Nutzer hat alle optionalen Cookies abgelehnt'); }, onReady: function() { console.log('CMP bereit'); } };

DOM-Events

Neben den Callback-Funktionen feuert Barefoot CMP auch Standard-DOM-Events auf dem window-Objekt. Dies ermöglicht die Integration mit Code, der keinen Zugriff auf das Konfigurationsobjekt hat.

barefoot-consent-changed

Wird bei jeder Consent-Änderung auf window gefeuert. Das Consent-Record ist über e.detail verfügbar.

JavaScript // Event-Listener für Consent-Änderungen window.addEventListener('barefoot-consent-changed', function(e) { console.log('Consent aktualisiert:', e.detail); // Beispiel: Consent-Daten an eigenes Backend senden fetch('/api/consent-log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(e.detail) }); });

Tipp: DOM-Events eignen sich besonders gut für die Integration in bestehenden Code oder Drittanbieter-Systeme, die keine Kontrolle über das Konfigurationsobjekt haben.

Reihenfolge der Auslösung

Wenn ein Nutzer z.B. „Alle akzeptieren" klickt, werden die Events in folgender Reihenfolge ausgelöst:

  1. onConsentAccepted() Callback
  2. onConsentChange(record) Callback
  3. barefoot-consent-changed DOM-Event

Script-Blocking

Automatisches und manuelles Blockieren von Tracking-Scripts bis zur Einwilligung des Nutzers.

Automatisches Blocking (Auto-Blocking)

Barefoot CMP verwendet einen MutationObserver, der den DOM kontinuierlich überwacht und nachgeladene Scripts erkennt. Über 30 bekannte Tracker-Patterns werden automatisch blockiert, bevor sie ausgeführt werden.

Folgende Dienste werden automatisch erkannt und blockiert:

  • Google: Google Analytics, Google Ads, Google Tag Manager, DoubleClick
  • Meta: Facebook Pixel, Facebook SDK, Instagram
  • Social: TikTok Pixel, LinkedIn Insight Tag, Twitter/X Pixel, Pinterest
  • Analytics: Hotjar, Mixpanel, Amplitude, Segment, Heap
  • Marketing: HubSpot, Salesforce, Marketo, Intercom, Drift
  • Sonstige: Criteo, Taboola, Outbrain, und viele weitere

Hinweis: Auto-Blocking ist standardmäßig aktiviert (autoBlocking: true). Sie können es über die Konfiguration deaktivieren, wenn Sie das Blocking manuell steuern möchten.

Manuelles Blocking mit Data-Attributen

Für Scripts, die nicht automatisch erkannt werden, oder wenn Sie explizit steuern möchten, welche Kategorie ein Script benötigt, verwenden Sie Data-Attribute:

Attribut Beschreibung
data-consent-category Kategorie: analytics, marketing oder functional
data-original-src Die originale Script-URL (wird nach Consent in src geschrieben)
data-original-type Der originale Type-Wert (wird nach Consent wiederhergestellt)
data-consent-loaded Wird auf "true" gesetzt, sobald das Script nach Consent geladen wurde

Script blockieren bis Analytics-Consent

HTML <!-- Script wird erst nach Analytics-Consent geladen --> <script data-consent-category="analytics" data-original-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" type="text/plain"></script>

Iframe blockieren bis Functional-Consent

HTML <!-- Iframe wird erst nach Functional-Consent geladen --> <iframe data-consent-category="functional" data-original-src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>

Inline-Script blockieren

HTML <!-- Inline-Script wird erst nach Marketing-Consent ausgeführt --> <script data-consent-category="marketing" type="text/plain"> // Dieser Code wird erst nach Marketing-Consent ausgeführt fbq('init', 'PIXEL_ID'); fbq('track', 'PageView'); </script>

Wichtig: Setzen Sie bei manuell geblockten Scripts immer type="text/plain", damit der Browser das Script nicht sofort ausführt. Barefoot CMP ändert den Type zurück auf text/javascript, sobald der Consent vorliegt.

Funktionsweise des MutationObservers

Der MutationObserver arbeitet wie folgt:

  1. Beim Laden von Barefoot CMP wird ein MutationObserver auf document.documentElement gestartet
  2. Jeder neue DOM-Knoten (Script, Iframe) wird gegen die bekannten Tracker-Patterns geprüft
  3. Erkannte Tracker-Scripts werden sofort blockiert: src wird entfernt und in data-original-src gespeichert
  4. Wenn der Nutzer Consent für die entsprechende Kategorie erteilt, wird src wiederhergestellt
  5. Das Attribut data-consent-loaded="true" wird gesetzt

DataLayer-Integration

Barefoot CMP integriert sich nahtlos mit dem Google Tag Manager DataLayer.

Automatische DataLayer-Events

Barefoot CMP pusht automatisch Events in window.dataLayer, damit der Google Tag Manager (GTM) auf Consent-Änderungen reagieren kann. Es werden keine zusätzlichen Einstellungen benötigt.

barefoot_consent_init

Wird beim Initialisieren des CMP gepusht und enthält die Default-Denied-Zustände aller Consent Mode Signale. GTM erhält damit sofort die Information, dass noch kein Consent vorliegt.

JavaScript // Wird automatisch beim Laden gepusht: window.dataLayer.push({ event: 'barefoot_consent_init', analytics_storage: 'denied', ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', functionality_storage: 'denied', personalization_storage: 'denied', security_storage: 'granted' });

barefoot_consent_update

Wird gepusht, wenn der Nutzer eine Consent-Entscheidung trifft. Enthält die aktualisierten Consent Mode Signale basierend auf den gewählten Kategorien.

JavaScript // Wird nach Nutzerentscheidung gepusht: window.dataLayer.push({ event: 'barefoot_consent_update', analytics_storage: 'granted', ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', functionality_storage: 'granted', personalization_storage: 'granted', security_storage: 'granted' });

GTM-Trigger einrichten

Im Google Tag Manager können Sie auf Basis dieser Events Trigger erstellen, um Tags erst nach Consent zu feuern:

  1. Neuen Trigger erstellen: Trigger-Typ: Benutzerdefiniertes Ereignis
  2. Ereignisname: barefoot_consent_update
  3. Optional: Bedingung hinzufügen, z.B. analytics_storage equals granted
  4. Diesen Trigger dem gewünschten Tag zuweisen (z.B. GA4-Tag)

Best Practice: Verwenden Sie das barefoot_consent_update-Event als Trigger für alle Tags, die einen Consent erfordern. So werden Tags automatisch gefeuert, sobald der Nutzer zustimmt.

Praxisbeispiele

Konkrete Code-Beispiele für die häufigsten Integrations-Szenarien.

1. Banner per Footer-Link erneut öffnen

Die DSGVO erfordert, dass Nutzer ihre Cookie-Einstellungen jederzeit ändern können. Platzieren Sie einen Link im Footer Ihrer Website:

HTML <!-- Im Footer Ihrer Website --> <a href="#" onclick="ConsentManager.show(); return false;">Cookie-Einstellungen</a>

2. Script nach Consent dynamisch laden

Laden Sie ein Marketing-Script erst, nachdem der Nutzer die entsprechende Kategorie genehmigt hat:

JavaScript window.ConsentManagerConfig = { onConsentChange: function(record) { // Facebook Pixel laden, wenn Marketing genehmigt if (record.categories.marketing && !document.getElementById('fb-pixel')) { var script = document.createElement('script'); script.id = 'fb-pixel'; script.src = 'https://connect.facebook.net/en_US/fbevents.js'; document.head.appendChild(script); } } };

3. Consent prüfen vor Pixel-Aufruf

Prüfen Sie den Consent-Status, bevor Sie Tracking-Events auslösen. Besonders wichtig bei Conversion-Tracking:

JavaScript function sendConversion() { if (window.ConsentManager && ConsentManager.hasConsent('marketing')) { fbq('track', 'Purchase', { value: 25.00, currency: 'EUR' }); } }

4. Bedingter Inhalt (YouTube erst nach Consent)

Zeigen Sie eingebettete Inhalte wie YouTube-Videos erst an, wenn der Nutzer funktionale Cookies akzeptiert hat. Ansonsten wird ein Platzhalter mit einem Link zu den Cookie-Einstellungen angezeigt:

JavaScript function loadVideo() { var container = document.getElementById('video-container'); if (ConsentManager.hasConsent('functional')) { container.innerHTML = '<iframe src="https://www.youtube.com/embed/VIDEO_ID" ' + 'width="560" height="315" frameborder="0" ' + 'allowfullscreen></iframe>'; } else { container.innerHTML = '<p>Bitte akzeptieren Sie funktionale Cookies, ' + 'um dieses Video anzusehen. ' + '<a href="#" onclick="ConsentManager.show()">' + 'Cookie-Einstellungen öffnen</a></p>'; } } // Beim Laden und bei Consent-Änderungen prüfen loadVideo(); window.addEventListener('barefoot-consent-changed', loadVideo);

5. Consent-Status an eigenes Backend senden

Senden Sie den Consent-Status an Ihr eigenes Backend zur Dokumentation und Compliance:

JavaScript window.ConsentManagerConfig = { onConsentChange: function(record) { fetch('/api/consent-log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ consent: record, page: window.location.href, timestamp: new Date().toISOString() }) }); } };

6. Google Analytics 4 mit Consent Mode

Vollständiges Beispiel für die Integration von GA4 mit Barefoot CMP und Google Consent Mode v2:

HTML <script> // 1. CMP Konfiguration window.ConsentManagerConfig = { googleConsentMode: { enabled: true }, onConsentChange: function(record) { if (record.categories.analytics) { gtag('config', 'G-XXXXXXXXXX'); } } }; </script> <!-- 2. Barefoot CMP laden --> <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID"></script> <!-- 3. Google Analytics (wird durch Consent Mode gesteuert) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); </script>

Ergebnis: GA4 respektiert automatisch den Consent-Status über Google Consent Mode v2. Ohne Analytics-Consent werden keine Nutzerdaten erfasst, aber anonymisierte Pings ermöglichen dennoch grundlegende Statistiken (Consent Mode Modeling).