Integraciones

Consentimiento de cookies para Astro

El banner va en el layout que comparten todas las páginas, como script inline para que Astro no lo empaquete ni lo retrase. Retiene tus rastreadores hasta que el visitante elige, envía las señales de Google Consent Mode v2 y se mantiene entre las view transitions de <ClientRouter />.

Configúralo con tu agente de IA

Conecta el servidor MCP de Croombit a tu editor o agente de código y pega esto. Crea el sitio, las categorías de cookies y el banner, y edita tu código.

Con Croombit: crea un sitio para este proyecto y mantén las categorías de cookies que trae. Escribe el texto del banner y publícalo. Crea una clave publicable de TEST para localhost:3000. Es un sitio Astro: añade cmp.js con is:inline al principio del <head> del layout compartido, leyendo la clave de PUBLIC_CROOMBIT_KEY, cambia nuestras etiquetas <script> de analítica a type="text/plain" con data-tc-consent y añade un enlace "Configurar cookies" al pie.

El agente trabaja en TEST. Pasar a LIVE son dos pasos en la consola: verificar tu dominio y cambiar a una clave LIVE; consulta pasar a LIVE.

O a mano

1. Añade la etiqueta a tu layout

Pon la clave en .env como PUBLIC_CROOMBIT_KEY (pk_test_… en desarrollo, pk_live_… en producción). is:inline la deja exactamente donde la pones.

---
// src/layouts/Layout.astro — the layout every page uses
const key = import.meta.env.PUBLIC_CROOMBIT_KEY;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- is:inline: Astro must not bundle or defer it -->
    <script is:inline src="https://croombit.com/cmp.js" data-tc-api-key={key}></script>
    <!-- …everything else after it -->
  </head>
  <body>
    <slot />
  </body>
</html>

2. Retén los rastreadores

Cambia su type a text/plain y añade data-tc-consent. Astro no toca un script con atributos, así que queda inerte hasta que el visitante acepta esa categoría.

<script type="text/plain" data-tc-consent="analytics" async
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<script type="text/plain" data-tc-consent="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXX');
</script>

3. Lista de cookies y enlace de ajustes

La lista en tu página de política de cookies y el enlace en el componente del pie:

<div data-tc-cookie-declaration></div>
<a href="#" data-tc-open-preferences>Configurar cookies</a>

Preguntas

¿Funciona con view transitions (<ClientRouter />)?

Sí. El banner y el botón flotante se mantienen en cada navegación, y los scripts etiquetados de la página siguiente se ejecutan en cuanto se acepta su categoría.

¿Funciona con un build estático?

Sí. La etiqueta es HTML normal en cada página generada; no hace falta servidor.