Benjamin Admin
cb2d503e84
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>
66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
'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>
|
|
)
|
|
}
|