Google Analytics 4, con interruptor y respetando el consentimiento

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>
2026-07-15 19:49:00 +00:00
parent fbc17f2cf8
commit 94f9731b2c
6 changed files with 71 additions and 0 deletions
@@ -9,6 +9,7 @@ import { Video } from '@/components/Video'
 import { Social } from '@/components/Social'
 import { Footer } from '@/components/Footer'
 import { CookieBanner } from '@/components/CookieConsent'
+import { Analytics } from '@/components/Analytics'
 import '../globals.css'

 export function generateStaticParams() {
@@ -92,6 +93,9 @@ export default async function LocaleLayout({
          <Footer />
          <CookieBanner />
        </NextIntlClientProvider>
+        {/* Analítica: solo si hay NEXT_PUBLIC_GA_ID y el visitante ha aceptado
+            la categoría «Analíticas» del banner. Ver components/Analytics.tsx. */}
+        <Analytics />
        {/* Tooltips de wowhead (WotLK) en todos los enlaces .../wowhead.com/... y
            elementos con data-wowhead. Funciona con contenido añadido por React
            (carrito, búsquedas) porque delega el hover en el documento. */}