Banner de cookies para Astro
Cumple el RGPD y Google Consent Mode v2 en tu web de Astro con un banner que bloquea de verdad los scripts antes del consentimiento y no ralentiza tu sitio.
Astro renderiza HTML estático con islas interactivas, pero eso mismo hace fácil un error de orden de carga: si el snippet del CMP no lleva is:inline, Astro lo trata como módulo y lo aplaza. El resultado es que gtag.js o GTM pueden ejecutarse antes de que Consent Mode v2 esté en «denied» por defecto.
Lo que casi nadie te cuenta: El fallo más común en Astro: sin is:inline, Astro pasa el script por su pipeline de Vite y lo difiere, así que el banner puede cargar después de que Analytics ya haya puesto cookies.
Cómo instalarlo en Astro
- 1. Crea tu cuenta gratis (plan Free, 1 sitio) en el registro — sin tarjeta. Empezar gratis →
- 2. Entra al panel, crea tu web y copia el snippet con tu siteKey.
- 3. Pega el snippet con el atributo is:inline dentro de <head> en src/layouts/Layout.astro, como el primer script — antes de GA4, GTM o cualquier píxel.
- 4. Abre la web en incógnito, rechaza cookies y comprueba en DevTools que no hay _ga / pixels antes de aceptar.
- 5. ¡Listo! El banner aparece y Consent Mode v2 queda activo automáticamente. ¿Más sitios o logs? Pasa a Pro (9 €/mes).
¿Usas Google Tag Manager?
Importa nuestra plantilla oficial y dispárala con el trigger «Consent Initialization».
⬇ Descargar plantilla GTMErrores comunes al poner cookies en Astro
- ⚠️ Olvidar is:inline en el script del CMP: Astro lo difiere y pierde la prioridad de carga.
- ⚠️ Colocar el snippet en un componente de isla en vez del layout base (no se ejecuta en todas las páginas).
- ⚠️ Cargar GTM en el <head> sin haber inicializado antes los valores por defecto de Consent Mode.
Por qué Consentio y no un plugin gratis
- ✅ Bloqueo real de scripts (la mayoría de plugins no lo hacen).
- ✅ Google Consent Mode v2 completo, con las 4 señales.
- ✅ Menos de 9 KB: no daña tu velocidad ni tu posicionamiento.
- ✅ 6 idiomas y detección automática del país del visitante, incluido en todos los planes.
- ✅ Escáner de cookies y declaración automática lista para tu política.
- ✅ Auto-bloqueo de trackers conocidos y registro de consentimientos como prueba ante inspecciones.
Guías para otras plataformas
- Banner de cookies para Svelte / SvelteKit
- Banner de cookies para Laravel
- Banner de cookies para Elementor
- Banner de cookies para Google Sites
- Banner de cookies para Nuxt
- Banner de cookies para Hostinger