feat: IAB TCF 2.2 — TC String encoder + purpose mapping + UI
- TCFEncoderService: generates base64url-encoded TC Strings per IAB spec with 12 purposes, vendor consent bitfield, CMP metadata - Category-to-purpose mapping (necessary→none, statistics→1,7,8,9,10, marketing→1,2,3,4,5,6,7,12, functional→1,11) - tcf_routes: 5 endpoints (purposes, features, mapping, encode, encode-categories) - banner_consent_service: auto-generates TC String when tcf_enabled=true - TCFSettings.tsx: enable/disable toggle, purpose grid with category mapping, TC String test generator, CMP registration info - New "TCF/IAB" tab in cookie-banner page (7 tabs total) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -0,0 +1,161 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
interface IABPurpose {
|
||||
id: number
|
||||
name: string
|
||||
name_de: string
|
||||
}
|
||||
|
||||
const API = '/api/sdk/v1/compliance/tcf'
|
||||
|
||||
export function TCFSettings({ siteId, tcfEnabled, onToggle }: {
|
||||
siteId?: string
|
||||
tcfEnabled: boolean
|
||||
onToggle: (enabled: boolean) => void
|
||||
}) {
|
||||
const [purposes, setPurposes] = useState<IABPurpose[]>([])
|
||||
const [categoryMap, setCategoryMap] = useState<Record<string, number[]>>({})
|
||||
const [testResult, setTestResult] = useState<string | null>(null)
|
||||
const [testing, setTesting] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetch(`${API}/purposes`).then(r => r.ok ? r.json() : []),
|
||||
fetch(`${API}/category-mapping`).then(r => r.ok ? r.json() : {}),
|
||||
]).then(([p, m]) => {
|
||||
setPurposes(p)
|
||||
setCategoryMap(m)
|
||||
}).catch(() => {})
|
||||
}, [])
|
||||
|
||||
const handleTestEncode = async () => {
|
||||
setTesting(true)
|
||||
setTestResult(null)
|
||||
try {
|
||||
const res = await fetch(`${API}/encode-categories`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ categories: ['necessary', 'statistics', 'marketing'] }),
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setTestResult(`TC String: ${data.tc_string}\nPurposes: ${data.purposes_consented.join(', ')}`)
|
||||
}
|
||||
} catch { setTestResult('Fehler beim Generieren') }
|
||||
setTesting(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Enable/Disable */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">IAB TCF 2.2</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Transparency & Consent Framework — Standardisierte Einwilligungssignale fuer programmatische Werbung
|
||||
</p>
|
||||
</div>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" checked={tcfEnabled} onChange={e => onToggle(e.target.checked)}
|
||||
className="w-5 h-5 text-purple-600 rounded" />
|
||||
<span className="text-sm font-medium">{tcfEnabled ? 'Aktiv' : 'Inaktiv'}</span>
|
||||
</label>
|
||||
</div>
|
||||
{!tcfEnabled && (
|
||||
<p className="mt-3 text-xs text-amber-600 bg-amber-50 p-3 rounded-lg">
|
||||
TCF ist nur erforderlich wenn Sie programmatische Werbung (AdTech) einsetzen.
|
||||
Fuer die meisten Websites reicht das Standard-Cookie-Banner.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{tcfEnabled && (
|
||||
<>
|
||||
{/* IAB Purposes */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">12 IAB-Zwecke (Purposes)</h4>
|
||||
<p className="text-xs text-gray-500 mb-4">
|
||||
Diese Zwecke werden automatisch aus Ihren Cookie-Kategorien abgeleitet.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{purposes.map(p => {
|
||||
const activeCats = Object.entries(categoryMap)
|
||||
.filter(([, pids]) => pids.includes(p.id))
|
||||
.map(([cat]) => cat)
|
||||
return (
|
||||
<div key={p.id} className={`flex items-start gap-2 p-2 rounded-lg text-xs ${activeCats.length > 0 ? 'bg-green-50' : 'bg-gray-50'}`}>
|
||||
<span className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0 ${activeCats.length > 0 ? 'bg-green-500 text-white' : 'bg-gray-300 text-white'}`}>
|
||||
{p.id}
|
||||
</span>
|
||||
<div>
|
||||
<div className="font-medium text-gray-700">{p.name_de}</div>
|
||||
{activeCats.length > 0 && (
|
||||
<div className="text-gray-400 mt-0.5">via: {activeCats.join(', ')}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Mapping */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">Kategorie → Purpose Zuordnung</h4>
|
||||
<div className="space-y-2">
|
||||
{Object.entries(categoryMap).map(([cat, pids]) => (
|
||||
<div key={cat} className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-gray-700 w-24 capitalize">{cat}</span>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{pids.length === 0 ? (
|
||||
<span className="text-xs text-gray-400">Keine Einwilligung noetig</span>
|
||||
) : (
|
||||
pids.map(pid => (
|
||||
<span key={pid} className="px-2 py-0.5 text-[10px] bg-purple-100 text-purple-700 rounded-full">
|
||||
Purpose {pid}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TC String Test */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">TC String testen</h4>
|
||||
<button onClick={handleTestEncode} disabled={testing}
|
||||
className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
|
||||
{testing ? 'Generiere...' : 'Test TC String generieren'}
|
||||
</button>
|
||||
{testResult && (
|
||||
<pre className="mt-3 p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap">
|
||||
{testResult}
|
||||
</pre>
|
||||
)}
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
Simuliert: necessary + statistics + marketing → generiert base64url-codierten TC String
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CMP Registration Info */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
||||
<h4 className="font-semibold text-blue-800 text-sm">CMP-Registrierung</h4>
|
||||
<p className="text-xs text-blue-700 mt-1">
|
||||
Fuer den produktiven Einsatz muss Ihr CMP bei der IAB Europe registriert werden.
|
||||
Sie erhalten eine eindeutige CMP-ID die im TC String codiert wird.
|
||||
</p>
|
||||
<p className="text-xs text-blue-600 mt-2">
|
||||
Registrierung: <a href="https://iabeurope.eu/tcf-for-cmps/" target="_blank" rel="noopener"
|
||||
className="underline">iabeurope.eu/tcf-for-cmps</a>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -11,8 +11,9 @@ import { EmbeddableVendorHTML } from './_components/EmbeddableVendorHTML'
|
||||
import { SiteSelector } from './_components/SiteSelector'
|
||||
import { AnalyticsDashboard } from './_components/AnalyticsDashboard'
|
||||
import { ABTestPanel } from './_components/ABTestPanel'
|
||||
import { TCFSettings } from './_components/TCFSettings'
|
||||
|
||||
type BannerTab = 'config' | 'vendors' | 'embed' | 'analytics' | 'abtest'
|
||||
type BannerTab = 'config' | 'vendors' | 'embed' | 'analytics' | 'abtest' | 'tcf'
|
||||
|
||||
export default function CookieBannerPage() {
|
||||
const { state } = useSDK()
|
||||
@@ -79,6 +80,7 @@ export default function CookieBannerPage() {
|
||||
{ id: 'embed' as const, label: 'Einbettung' },
|
||||
{ id: 'analytics' as const, label: 'Analytik' },
|
||||
{ id: 'abtest' as const, label: 'A/B-Test' },
|
||||
{ id: 'tcf' as const, label: 'TCF/IAB' },
|
||||
]).map(tab => (
|
||||
<button key={tab.id} onClick={() => setActiveTab(tab.id)}
|
||||
className={`px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors ${
|
||||
@@ -101,6 +103,20 @@ export default function CookieBannerPage() {
|
||||
{/* Tab: A/B-Test */}
|
||||
{activeTab === 'abtest' && <ABTestPanel siteConfigId={activeSiteId || undefined} />}
|
||||
|
||||
{/* Tab: TCF/IAB */}
|
||||
{activeTab === 'tcf' && (
|
||||
<TCFSettings siteId={activeSiteId || undefined} tcfEnabled={false}
|
||||
onToggle={(enabled) => {
|
||||
if (activeSiteId) {
|
||||
fetch(`/api/sdk/v1/banner/admin/sites/${activeSiteId}`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tcf_enabled: enabled }),
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Tab: Konfiguration */}
|
||||
{activeTab !== 'config' ? null : (<>
|
||||
{/* Stats */}
|
||||
|
||||
Reference in New Issue
Block a user