feat: Google Consent Mode v2 + Developer Portal cookie banner docs

Phase A: Google Consent Mode v2 in cookie-banner-embed.ts - gtag('consent', 'default', {...denied}) before banner loads - gtag('consent', 'update', {...}) after user decision - Automatic mapping: statistics→analytics_storage, marketing→ad_storage Phase B: 5 Developer Portal pages at /sdk/consent/cookie-banner/ - Overview page with 4 cards - Integration Guide: 3-step setup, script-tag, categories - Google Consent Mode: automatic integration, parameter mapping - Script Blocking: type=text/plain pattern, GA/FB/Hotjar examples - Compliance Checklist: 12 points, 9 automatic Sidebar navigation extended with Cookie-Banner section. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-02 17:13:34 +02:00
parent dccd9d09e5
commit cb2d503e84
7 changed files with 504 additions and 0 deletions
@@ -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: <FileCode className="w-6 h-6" />,
+    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: <Zap className="w-6 h-6" />,
+    desc: 'Pflicht seit Maerz 2024 fuer Google Services in EEA. Automatisch integriert.',
+  },
+  {
+    title: 'Script Blocking',
+    href: '/sdk/consent/cookie-banner/script-blocking',
+    icon: <Shield className="w-6 h-6" />,
+    desc: 'Tracking-Scripts erst nach Consent laden. Code-Beispiele fuer GA, FB, Hotjar.',
+  },
+  {
+    title: 'Compliance Checklist',
+    href: '/sdk/consent/cookie-banner/checklist',
+    icon: <CheckCircle className="w-6 h-6" />,
+    desc: '12 Punkte die Ihr Banner erfuellen muss. 9 davon automatisch.',
+  },
+]
+
+export default function CookieBannerOverviewPage() {
+  return (
+    <div className="flex min-h-screen bg-white">
+      <SDKDocsSidebar />
+      <main className="flex-1 ml-64 p-8 max-w-4xl">
+        <h1 className="text-3xl font-bold text-gray-900">Cookie-Banner</h1>
+        <p className="text-lg text-gray-600 mt-2 mb-8">
+          Rechtlich korrekter Cookie-Banner fuer Ihre Website — DSGVO-konform,
+          mit Script-Blocking, Google Consent Mode v2 und automatischer Compliance-Pruefung.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {PAGES.map(page => (
+            <Link key={page.href} href={page.href}
+              className="block p-6 rounded-xl border border-gray-200 hover:border-violet-300 hover:shadow-md transition-all group">
+              <div className="flex items-start gap-4">
+                <div className="p-2 rounded-lg bg-violet-50 text-violet-600 group-hover:bg-violet-100">
+                  {page.icon}
+                </div>
+                <div>
+                  <h3 className="font-semibold text-gray-900 group-hover:text-violet-700">{page.title}</h3>
+                  <p className="text-sm text-gray-500 mt-1">{page.desc}</p>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </main>
+    </div>
+  )
+}