Der Agent prueft mit einem echten Browser (Playwright/Chromium)
+
Sie erhalten einen detaillierten Report mit allen 8 Checks
+
+
+
+
+ )
+}
diff --git a/developer-portal/app/sdk/consent/cookie-banner/google-consent-mode/page.tsx b/developer-portal/app/sdk/consent/cookie-banner/google-consent-mode/page.tsx
new file mode 100644
index 0000000..a63c626
--- /dev/null
+++ b/developer-portal/app/sdk/consent/cookie-banner/google-consent-mode/page.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import React from 'react'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+
+export default function GoogleConsentModePage() {
+ return (
+
+
+
+
+
Google Consent Mode v2
+
+ Seit Maerz 2024 ist Google Consent Mode v2 Pflicht fuer alle Websites
+ die Google Analytics oder Google Ads im EWR nutzen.
+
+
+
+
Pflicht seit Maerz 2024
+
+ Ohne Google Consent Mode v2 verlieren Sie Messdaten von EWR-Besuchern.
+ Google Tags funktionieren moeglicherweise nicht mehr korrekt.
+
+
+
+
Was ist Google Consent Mode?
+
+ Google Consent Mode passt das Verhalten von Google Tags (Analytics, Ads)
+ automatisch an die Consent-Entscheidung des Nutzers an. Statt Tags komplett
+ zu blockieren, sendet Consent Mode anonymisierte Pings die Google fuer
+ Modellierung und Conversion-Tracking nutzen kann.
+
+
+
Automatische Integration
+
+ Der BreakPilot Cookie-Banner integriert Google Consent Mode v2 automatisch.
+ Sie muessen nichts zusaetzlich konfigurieren.
+
+{`// Automatisch nach Klick auf "Akzeptieren" oder "Auswahl speichern"
+gtag('consent', 'update', {
+ analytics_storage: 'granted', // Wenn "Statistik" akzeptiert
+ ad_storage: 'granted', // Wenn "Marketing" akzeptiert
+ ad_user_data: 'granted',
+ ad_personalization: 'granted',
+});`}
+
+
+
Consent-Parameter Mapping
+
+
+
+
Google Parameter
+
Banner-Kategorie
+
Beschreibung
+
+
+
+
analytics_storage
Statistik
Google Analytics Cookies
+
ad_storage
Marketing
Werbe-Cookies (Google Ads)
+
ad_user_data
Marketing
Nutzerdaten fuer Werbung
+
ad_personalization
Marketing
Personalisierte Werbung
+
functionality_storage
Notwendig
Immer granted
+
security_storage
Notwendig
Immer granted
+
+
+
+
Vorteile
+
+
Kein Datenverlust — Google modelliert fehlende Daten
+
DSGVO-konform — Tags feuern nur nach Consent
+
Automatisch — keine manuelle gtag()-Konfiguration noetig
+
EWR-konform — erfuellt Google-Anforderungen seit Maerz 2024
+
+
+
+
+ )
+}
diff --git a/developer-portal/app/sdk/consent/cookie-banner/integration/page.tsx b/developer-portal/app/sdk/consent/cookie-banner/integration/page.tsx
new file mode 100644
index 0000000..8df5ffd
--- /dev/null
+++ b/developer-portal/app/sdk/consent/cookie-banner/integration/page.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import React from 'react'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+
+export default function IntegrationGuidePage() {
+ return (
+
+
+
+
+
Cookie-Banner Integration Guide
+
+ Integrieren Sie den BreakPilot Cookie-Banner in 3 Schritten auf Ihrer Website.
+ DSGVO-konform, mit Script-Blocking und Google Consent Mode v2.
+
+
+
+
Unser Banner ist rechtlich geprueft
+
+ Der Banner erfuellt automatisch alle 8 Compliance-Checks die unser Agent prueft:
+ Impressum-Link, DSE-Link, gleichwertige Buttons, keine vorausgewaehlten Checkboxen,
+ Settings-Reopen, kein Dark Pattern, Google Consent Mode v2.
+
+
+
+
Schritt 1: Script-Tag einbinden
+
Fuegen Sie eine einzige Zeile in den <head> Ihrer Website ein:
+
+{`
+`}
+
+
+
Schritt 2: Tracking-Scripts blockieren
+
+ Aendern Sie den type Ihrer Tracking-Scripts von
+ text/javascript zu text/plain und fuegen Sie
+ das data-cookie-category Attribut hinzu:
+
+
+{`
+
+
+
+`}
+
+
+
Schritt 3: Kategorien zuordnen
+
+
+
+
Kategorie
+
data-cookie-category
+
Beispiele
+
+
+
+
Notwendig
necessary
Session-Cookies, CSRF-Token
+
Statistik
statistics
Google Analytics, Matomo, Hotjar
+
Marketing
marketing
Facebook Pixel, Google Ads, LinkedIn
+
Funktional
functional
Chat-Widget, Spracheinstellung
+
+
+
+
Schritt 4: Fertig — automatische Features
+
+
Google Consent Mode v2 — automatisch integriert, keine zusaetzliche Konfiguration
+ )
+}
diff --git a/developer-portal/app/sdk/consent/cookie-banner/page.tsx b/developer-portal/app/sdk/consent/cookie-banner/page.tsx
new file mode 100644
index 0000000..03f485c
--- /dev/null
+++ b/developer-portal/app/sdk/consent/cookie-banner/page.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+import { FileCode, Shield, Zap, CheckCircle } from 'lucide-react'
+
+const PAGES = [
+ {
+ title: 'Integration Guide',
+ href: '/sdk/consent/cookie-banner/integration',
+ icon: ,
+ desc: 'Banner in 3 Schritten auf Ihrer Website einbinden. Script-Tag, Script-Blocking, fertig.',
+ },
+ {
+ title: 'Google Consent Mode v2',
+ href: '/sdk/consent/cookie-banner/google-consent-mode',
+ icon: ,
+ desc: 'Pflicht seit Maerz 2024 fuer Google Services in EEA. Automatisch integriert.',
+ },
+ {
+ title: 'Script Blocking',
+ href: '/sdk/consent/cookie-banner/script-blocking',
+ icon: ,
+ desc: 'Tracking-Scripts erst nach Consent laden. Code-Beispiele fuer GA, FB, Hotjar.',
+ },
+ {
+ title: 'Compliance Checklist',
+ href: '/sdk/consent/cookie-banner/checklist',
+ icon: ,
+ desc: '12 Punkte die Ihr Banner erfuellen muss. 9 davon automatisch.',
+ },
+]
+
+export default function CookieBannerOverviewPage() {
+ return (
+
+
+
+
Cookie-Banner
+
+ Rechtlich korrekter Cookie-Banner fuer Ihre Website — DSGVO-konform,
+ mit Script-Blocking, Google Consent Mode v2 und automatischer Compliance-Pruefung.
+
+
+
+ {PAGES.map(page => (
+
+
+
+ {page.icon}
+
+
+
{page.title}
+
{page.desc}
+
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/developer-portal/app/sdk/consent/cookie-banner/script-blocking/page.tsx b/developer-portal/app/sdk/consent/cookie-banner/script-blocking/page.tsx
new file mode 100644
index 0000000..0e4d539
--- /dev/null
+++ b/developer-portal/app/sdk/consent/cookie-banner/script-blocking/page.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import React from 'react'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+
+export default function ScriptBlockingPage() {
+ return (
+
+
+
+
+
Script Blocking
+
+ Tracking-Scripts duerfen erst nach Einwilligung des Nutzers laden (§25 TDDDG).
+ So blockieren Sie Scripts korrekt mit dem BreakPilot Cookie-Banner.
+
+
+
Das Problem
+
+ Wird ein Tracking-Script normal eingebunden, laedt es sofort —
+ bevor der Nutzer ueberhaupt den Cookie-Banner sieht. Das ist ein Verstoss
+ gegen §25 TDDDG und wird von unserem Compliance Agent als HIGH
+ Finding gemeldet.
+
+
+
Die Loesung: type="text/plain"
+
+ Aendern Sie den type von text/javascript zu
+ text/plain. Der Browser ignoriert das Script bis unser Banner
+ es nach Consent aktiviert.
+
+
+
Google Analytics
+
+{`
+
+`}
+
+
+
Facebook / Meta Pixel
+
+{`
+`}
+
+
+
Hotjar
+
+{`
+`}
+
+
+
Google Maps / YouTube Embeds
+
+{`
+
+
+
+
+
+
`}
+
+
+
Kategorie-Referenz
+
+
+
+
data-cookie-category
+
Dienste
+
Consent erforderlich
+
+
+
+
necessary
Session, CSRF, CMP
Nein (immer aktiv)
+
statistics
GA, Matomo, Hotjar, Clarity
Ja
+
marketing
FB Pixel, Google Ads, LinkedIn, TikTok
Ja
+
functional
Chat, Maps, Spracheinstellungen
Ja
+
+
+
+
Programmatische Abfrage
+
+{`// Pruefen ob Kategorie akzeptiert wurde
+if (window.CookieConsent.hasConsent('statistics')) {
+ // Analytics initialisieren
+}
+
+// Auf Consent-Aenderung reagieren
+window.addEventListener('cookieConsentUpdated', (e) => {
+ const consent = e.detail;
+ if (consent.marketing) {
+ // Marketing-Scripts aktivieren
+ }
+});`}
+