Cookies conformes en Astro con Consent Mode v2

Banner de consentimiento de cookies sobre una web
Banner de consentimiento de cookies sobre una web

Cargar Google Analytics en el <head> sin más incumple el RGPD: las cookies no esenciales necesitan consentimiento previo. Pero bloquear GA hasta el “Aceptar” te deja sin ningún dato de quien no acepta. La solución oficial de Google resuelve las dos cosas: Consent Mode v2. Un matiz importante primero: esto no va de ocultar el banner —el banner se ve siempre al cargar—, va del estado del tracking.

GA arranca denegado

Antes de cargar gtag.js, le digo a Google que el consentimiento por defecto es denegado. GA se carga, pero sin escribir cookies: solo manda pings anónimos, que sí son legales sin consentimiento.

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('consent', 'default', {
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500,
  });
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<script>gtag('js', new Date()); gtag('config', 'G-XXXX');</script>

El banner lo pinta vanilla-cookieconsent (v3, gratis, sin servicio externo). Cuando el usuario decide, reflejo su elección en gtag: si acepta la categoría analítica, paso analytics_storage a granted.

import * as CookieConsent from 'vanilla-cookieconsent';

function updateConsent() {
  const analytics = CookieConsent.acceptedCategory('analytics');
  gtag('consent', 'update', {
    analytics_storage: analytics ? 'granted' : 'denied',
  });
}

CookieConsent.run({
  categories: { necessary: { readOnly: true }, analytics: {} },
  onFirstConsent: updateConsent,
  onConsent: updateConsent,
  onChange: updateConsent,
  // ...traducciones
});

Conclusión

Con Consent Mode v2, GA carga en denied (sin cookies) y solo pasa a granted cuando el usuario acepta. Cumples el RGPD, no te pierdes los datos agregados anónimos, y usas el patrón que Google exige desde 2024 en la UE. En Astro son dos piezas: el default antes de gtag.js y el update desde el banner.

← Volver al blog