Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Google Analytics 4, con interruptor y respetando el consentimiento

Browse Source 
Se añade GA4 (gtag.js) con el componente oficial `@next/third-parties`, que es lo
que recomienda el doc de Next 16 y carga el mismo gtag pero tras la hidratación.

DOS interruptores:
1. `NEXT_PUBLIC_GA_ID` en el .env (no versionado). Vacío o sin poner = no se carga
   nada. Documentada en el README.
2. El consentimiento del visitante. El sitio YA tenía un banner con la categoría
   «Analíticas» que se puede rechazar: soltar gtag en el <head> lo habría
   convertido en mentira, y con visitantes en la UE, en un problema legal.

Para lo segundo se expone `useConsent(categoría)` desde CookieConsent, que además
reacciona en caliente: `writeConsent`/`revokeConsent` ya disparaban el evento
`ns:consentchange`, así que la analítica entra en cuanto se acepta y desaparece
si se revoca, sin recargar. Arranca en `false` a propósito: hasta confirmar el
consentimiento no se carga nada.

Verificado en el build: sin consentimiento no hay ni rastro de googletagmanager
en el HTML, y la condición compilada es `id && consent ? <GoogleAnalytics/> : null`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Inna Hoover Brown
2026-07-15 19:49:00 +00:00
parent fbc17f2cf8
commit 94f9731b2c
6 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/components/CookieConsent.tsx
+21
View File
@@ -90,6 +90,27 @@ function revokeConsent() {
showBanner()
}
/**
* ¿Ha aceptado el usuario esta categoría de cookies? Reacciona en caliente al
* banner (`writeConsent`/`revokeConsent` disparan `ns:consentchange`), así que
* quien la use se entera de aceptar o revocar sin recargar.
*
* Arranca en `false` a propósito: en el servidor no hay cookie que leer, y hasta
* que no se confirme el consentimiento NO debe cargarse nada de la categoría.
*/
export function useConsent(category: string): boolean {
const [granted, setGranted] = useState(false)
useEffect(() => {
const sync = () => setGranted(!!readConsent()?.[category])
sync()
window.addEventListener(CONSENT_EVENT, sync)
return () => window.removeEventListener(CONSENT_EVENT, sync)
}, [category])
return granted
}
// ---------------------------------------------------------------------------
// Banner de consentimiento (fijo abajo, en todo el sitio).
// ---------------------------------------------------------------------------