see comments

This commit is contained in:
Rajpreet0 2026-09-25 19:35:58 +02:00
parent 02af696d4f
commit 33dab93c8e
2 changed files with 24 additions and 16 deletions

View file

@ -376,9 +376,7 @@ const Datenschutz = () => {
<h3>Vercel Analytics</h3> <h3>Vercel Analytics</h3>
<p> <p>
Wir nutzen auf unserer Website die Analysedienste Vercel Analytics der Vercel Inc. (440 Barranca Ave #4133, Covina, CA 91723, USA). Wir nutzen auf unserer Website die Analysedienste Vercel Analytics der Vercel Inc. (440 Barranca Ave #4133, Covina, CA 91723, USA).
Diese Dienste dienen der Messung der Performance unserer Website (z. B. Ladezeiten) sowie der statistischen Auswertung Dabei werden technische Informationen (z. B. aufgerufene Seite, Browsertyp, Ladezeiten) an Server von Vercel übermittelt.
der Nutzung unseres Online-Angebots. Dabei werden technische Informationen (z. B. aufgerufene Seite, Browsertyp, Ladezeiten)
an Server von Vercel übermittelt.
</p> </p>
<p> <p>
Die Einbindung und Verarbeitung erfolgt ausschließlich auf Grundlage Ihrer ausdrücklichen Einwilligung gemäß Die Einbindung und Verarbeitung erfolgt ausschließlich auf Grundlage Ihrer ausdrücklichen Einwilligung gemäß

View file

@ -1,13 +1,20 @@
"use client"; "use client";
import { Analytics } from "@vercel/analytics/next"; import { Analytics } from "@vercel/analytics/next";
import type { BeforeSendEvent } from "@vercel/analytics";
import * as CookieConsent from 'vanilla-cookieconsent'; import * as CookieConsent from 'vanilla-cookieconsent';
import 'vanilla-cookieconsent/dist/cookieconsent.css'; import 'vanilla-cookieconsent/dist/cookieconsent.css';
import { useEffect, useState } from "react"; import { useEffect } from "react";
// Re-checked on every single event, so it stays correct for the rest of the
// session regardless of the <Analytics> component's own mount state.
// Module-level (not created inside the component) so its reference is
// stable across renders and Analytics doesn't re-register it needlessly.
function gateByConsent(event: BeforeSendEvent) {
return CookieConsent.acceptedCategory('analytics') ? event : null;
}
export default function CookieBanner() { export default function CookieBanner() {
const [analyticsAccepted, setAnalyticsAccepted] = useState(false);
useEffect(() => { useEffect(() => {
document.documentElement.classList.add('cc--elegant-black'); document.documentElement.classList.add('cc--elegant-black');
@ -28,11 +35,13 @@ export default function CookieBanner() {
description: description:
'Diese Webseite nutzt optionale Cookies für Statistik und Marketing. Mehr dazu in unserer <a href="/datenschutz" target="_blank" rel="noopener">Datenschutzerklärung</a>.', 'Diese Webseite nutzt optionale Cookies für Statistik und Marketing. Mehr dazu in unserer <a href="/datenschutz" target="_blank" rel="noopener">Datenschutzerklärung</a>.',
acceptAllBtn: 'Alle akzeptieren', acceptAllBtn: 'Alle akzeptieren',
acceptNecessaryBtn: 'Nur notwendige',
showPreferencesBtn: 'Einstellungen verwalten', showPreferencesBtn: 'Einstellungen verwalten',
}, },
preferencesModal: { preferencesModal: {
title: 'Cookie-Einstellungen', title: 'Cookie-Einstellungen',
acceptAllBtn: 'Alle akzeptieren', acceptAllBtn: 'Alle akzeptieren',
acceptNecessaryBtn: 'Nur notwendige',
savePreferencesBtn: 'Auswahl speichern', savePreferencesBtn: 'Auswahl speichern',
sections: [ sections: [
{ title: "Statistik", linkedCategory: 'analytics' } { title: "Statistik", linkedCategory: 'analytics' }
@ -41,20 +50,21 @@ export default function CookieBanner() {
}, },
}, },
}, },
onConsent: ({ cookie }) => {
setAnalyticsAccepted(cookie.categories.includes('analytics'));
},
onChange: ({ cookie }) => {
setAnalyticsAccepted(cookie.categories.includes('analytics'))
}
}) })
}, []); }, []);
if (!analyticsAccepted) return null;
return ( return (
<> <>
<Analytics/> {/*
* Always mounted, regardless of consent: @vercel/analytics injects
* its script into <head> on mount and never removes it on unmount
* (v2.0.1 has no cleanup), so a script that already loaded would
* keep tracking after consent is withdrawn if we unmounted this.
* Gating happens per-event in beforeSend instead, which is
* re-checked live on every event and therefore stays effective
* for the rest of the session, including after withdrawal.
*/}
<Analytics beforeSend={gateByConsent} />
</> </>
) )
} }