Häufig gestellte Fragen
Wie blockiert man Google Analytics vor der Einwilligung in Next.js?
Verwenden Sie in Next.js die Script-Komponente mit strategy="afterInteractive" für GA4 und knüpfen Sie deren Rendering an den Consent-Status. Mit FlowConsent fügen Sie Ihrem GA4-Skript das Attribut data-category="analytics" hinzu — die CMP fängt das Laden automatisch ab, bis der Nutzer zustimmt. Alternativ nutzen Sie einen React-State, der nach dem fc:consent-update-Event aktualisiert wird, und rendern die GoogleAnalytics-Komponente aus @next/third-parties bedingt.
Welche Next.js Script-Strategie sollte für eine CMP wie FlowConsent verwendet werden?
Verwenden Sie strategy="beforeInteractive" für das FlowConsent-Skript selbst — dies stellt sicher, dass die CMP zuerst geladen wird, bevor der Browser andere Skripte ausführt. Für von der CMP blockierte Drittanbieter-Skripte (Analytics, Werbung) verwenden Sie strategy="afterInteractive" oder "lazyOnload". Setzen Sie die CMP nie auf "afterInteractive", da dies ein Zeitfenster schaffen würde, in dem Drittanbieter-Skripte ohne Einwilligung ausgeführt werden könnten.
Funktioniert Google Consent Mode v2 mit Next.js Server Components?
Consent Mode v2 ist eine clientseitige Technologie (er sendet Signale über gtag im Browser) und gilt nicht direkt für Server Components. Für serverseitige Verarbeitungen (API Routes, Server Actions) können Sie jedoch den Consent-Status aus dem von FlowConsent gesetzten HTTP-Cookie (fc_consent) über die cookies()-Funktion von next/headers lesen. Dies ermöglicht es, serverseitige Datenverarbeitungen an die Nutzereinwilligung zu knüpfen.
Wie testet man die DSGVO-Konformität einer Next.js-Anwendung?
So testen Sie Ihre DSGVO-Konformität in Next.js: 1) Öffnen Sie Ihre Website im privaten Browser und prüfen Sie, dass vor der Einwilligung keine nicht-wesentlichen Cookies gesetzt werden (DevTools-Tab Anwendung). 2) Verwenden Sie den Google Tag Assistant, um Consent-Mode-v2-Signale zu überprüfen. 3) Testen Sie mit dem CNIL-Cookie-Checker. 4) Prüfen Sie, ob das Banner auf Mobil und Desktop korrekt angezeigt wird. 5) Testen Sie die vollständige Ablehnung und prüfen Sie, dass keine Analytics-Skripte geladen werden. 6) Verwenden Sie Lighthouse für Core-Web-Vitals-Auswirkungen.
Funktioniert FlowConsent mit dem Next.js App Router?
Ja. FlowConsent ist mit dem Next.js App Router (Next.js 13+) kompatibel. Integrieren Sie es in Ihrer app/layout.tsx über die <Script>-Komponente von next/script mit strategy="beforeInteractive". FlowConsent funktioniert als natives Client Component: Es interagiert mit dem Browser-DOM und erfordert keine spezifische serverseitige Logik. Das fc:consent-update-Event kann in Ihren Client Components abgehört werden, um in Echtzeit auf Nutzerentscheidungen zu reagieren.