Google Consent Mode v2

<ConsentMode /> reenvía la elección del visitante a las etiquetas de Google (GA4, Google Ads, Google Tag Manager) como señales de Consent Mode v2. Establece un valor predeterminado con todo en denied antes de que se ejecute cualquier etiqueta de Google y, después, envía un consent update cada vez que el visitante elige (y en cada carga de página posterior, una vez que ya ha elegido).

Cubre los cuatro tipos de consentimiento de v2: ad_storage, ad_user_data, ad_personalization y analytics_storage.

Disponible a partir de la versión 1.0.0.

Configuración

Renderiza <ConsentMode /> en el <head>, por encima de cualquier fragmento de Google. Consent Mode exige que el valor predeterminado se establezca antes de que cargue una etiqueta de Google; por eso es un componente aparte y no forma parte de <ConsentBanner /> (que se renderiza en el <body>):

src/layouts/Layout.astro

---
import ConsentBanner from 'astro-cookie-consent/ConsentBanner.astro';
import ConsentMode from 'astro-cookie-consent/ConsentMode.astro';
---

<html>
  <head>
    <ConsentMode
      mapping={{
        analytics: ['analytics_storage'],
        marketing: ['ad_storage', 'ad_user_data', 'ad_personalization'],
      }}
    />
    <!-- Google snippet goes after this -->
  </head>
  <body>
    <slot />
    <ConsentBanner
      privacyHref="/privacy"
      categories={[
        { id: 'analytics', label: 'Analytics' },
        { id: 'marketing', label: 'Marketing' },
      ]}
    />
  </body>
</html>

Asociar categorías a tipos de consentimiento

mapping conecta los identificadores de categoría de tu banner con los tipos de Consent Mode que conceden. Un tipo es granted si cualquier categoría aceptada está asociada a él; si no, es denied.

Con un banner de aceptar/rechazar simple (sin categories), omite mapping. El valor por defecto hace que esa única elección controle los cuatro tipos:

<ConsentMode />

Cargar la etiqueta de Google

Hay dos formas de cargar la etiqueta de Google junto con <ConsentMode />.

Modo básico (recomendado)

Carga la etiqueta de Google solo después del consentimiento, con gateScript(). Nada llega a Google antes de que el visitante acepte:

<script is:inline>
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>
<script>
  import { gateScript } from 'astro-cookie-consent';

  gateScript({
    src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX',
    category: 'analytics',
  });
</script>

<ConsentMode /> define window.gtag, así que las llamadas js y config en cola se procesan en cuanto carga gtag.js.

Modo avanzado

Carga el fragmento estándar de Google (o el de GTM) sin bloquearlo, después de <ConsentMode />. Mientras el consentimiento esté denegado, las etiquetas de Google envían pings sin cookies, lo que permite a Google modelar más datos.

Precaución

El modo avanzado envía solicitudes a Google antes de que el visitante haya dado su consentimiento. Comprueba que encaja con tu base jurídica antes de elegirlo; consulta Funciones relacionadas con el RGPD.

Google Tag Manager lee el mismo dataLayer, así que sus comprobaciones de consentimiento integradas funcionan en cualquiera de los dos modos.

Props

Prop	Valor por defecto	Descripción
mapping	{ all: [all 4 types] }	Id. de categoría → tipos de Consent Mode que concede.
expiryDays	365	Debe coincidir con <ConsentBanner expiryDays>.
waitForUpdate	500	Milisegundos que las etiquetas de Google esperan una actualización antes de activarse.
adsDataRedaction	false	Oculta los identificadores de clic de anuncios mientras ad_storage esté denegado.
urlPassthrough	false	Transmite la información de clic de anuncios por URL mientras las cookies estén denegadas.
region	(en todas partes)	Códigos ISO 3166-2 a los que se aplica el valor denegado, p. ej. solo países del EEE.

Consejo

Si cambias expiryDays en <ConsentBanner />, pasa el mismo valor a <ConsentMode />. Si no, ambos pueden discrepar sobre si una elección guardada sigue siendo válida.

Comprobar que funciona

Abre tu sitio con las herramientas para desarrolladores del navegador y escribe dataLayer en la consola. Antes de elegir, verás una entrada consent / default con todos los tipos asociados en denied. Después de aceptar o rechazar en el banner, le sigue una entrada consent / update con el nuevo estado. El Tag Assistant de Google muestra las mismas señales para cada etiqueta.