Añade Velo
a Astro.
Instala el banner de cookies de Velo y Google Consent Mode v2 en Astro con una línea en tu layout compartido. La mayoría de las instalaciones llevan unos minutos si ya tienes acceso al código de la web. Si usas Google Tag Manager, esa vía también está en esta página.
Instrucciones y fuentes de las imágenes revisadas el 7 de noviembre de 2026.
Pega una línea
en tu layout.
Añade el fragmento de tu web al head de todas las páginas, publica y comprueba el resultado. Si tus etiquetas de medición ya van por Google Tag Manager, usa la vía de abajo.
¿Ya usas Google Tag Manager? Olvídate del código y hazlo allí ↓
Tres pasos · unos cinco minutos
-
01
Copia la línea
Copia desde tu panel de Velo el fragmento de instalación completo de esta web. El ejemplo de abajo solo muestra el formato: sustituye your-site-id antes de usarlo. Deja el endpoint de la API tal como te lo da el panel.
<script src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script> -
02
Pégala en tu layout compartido
En el layout que comparten todas las páginas, normalmente src/layouts/Layout.astro, pega tu fragmento completo de Velo dentro de <head>, encima de cualquier etiqueta de analítica o publicidad, y añade is:inline a la etiqueta script para que Astro la deje tal cual. Si el layout usa <ClientRouter />, Astro sustituye el body en cada navegación y eso elimina el banner: en el mismo head, añade un script is:inline que guarde #velo-banner-host y #velo-reopener-host en astro:before-swap y los añada a document.body en astro:after-swap. Compila y despliega.
Astro · layout compartido
<!-- src/layouts/Layout.astro: the layout every page shares --> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Paste the complete Velo snippet from your dashboard here, then add is:inline. --> <script is:inline src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script> <!-- Only if this layout uses <ClientRouter />: keeps the banner across page swaps. --> <script is:inline> document.addEventListener('astro:before-swap', () => { window.veloHosts = [...document.querySelectorAll('#velo-banner-host, #velo-reopener-host')]; }); document.addEventListener('astro:after-swap', () => { document.body.append(...window.veloHosts); }); </script> </head> <body> <slot /> </body> </html>Referencia de configuración verificada · 7 de noviembre de 2026 Referencia de configuración cotejada con la documentación de la plataforma. No es una captura del panel de administración.
Documentación de la plataforma ↗ -
03
Publica y compruébalo en producción
Guarda y publica el cambio siguiendo los pasos de tu plataforma que tienes arriba, y vacía la caché de la web o del CDN. Abre la URL publicada en una sesión nueva del navegador. Comprueba que el banner aparece donde lo exigen tus reglas por región, prueba a aceptar y a rechazar, y verifica que los valores por defecto y las actualizaciones del consentimiento se aplican antes de que se ejecuten tus etiquetas de medición. Confirma que tu web aparece como instalada en el panel de Velo.
Captura de la interfaz real · 23 de septiembre de 2026 El banner real de veloconsent.com, capturado el 23 de septiembre de 2026. Los textos, el diseño y los ajustes por región de tu banner pueden ser distintos.
La web de Velo ↗Ver a tamaño completo ↗
¿Usas ClientRouter? Astro sustituye todo el body de la página en cada navegación, y eso elimina el banner y el botón que lo vuelve a abrir. Añade el segundo script corto del paso 2 y los dos se quedan. Sin ClientRouter cada enlace es una carga completa de página y el script no hace falta.
¿Sigues comparando opciones? Consulta todas las plataformas compatibles.
¿Usas Tag Manager?
Olvídate del código.
Si ya tienes Google Tag Manager en tu web, esta es la forma más fácil de añadir Velo. No tienes que tocar código, son cuatro pasos cortos y todas tus etiquetas quedan en un solo sitio.
- 01
Añade Velo a Tag Manager
Abre la plantilla de Velo, pulsa Add to workspace y elige tu contenedor.
Abrir la plantilla de Velo ↗ - 02
Pega el ID de tu web
En Tag Manager, abre Tags y pulsa New. Pulsa Tag Configuration, elige Velo CMP y pega el ID de tu web. Lo encontrarás en tu panel de Velo. Deja todo lo demás como está.
- 03
Haz que cargue primero
Pulsa Triggering, elige Consent Initialization – All Pages y pulsa Save. Así Velo arranca antes que tus otras etiquetas.
- 04
Publica y compruébalo
Pulsa Submit y luego Publish. Preview no basta para poner Velo en marcha. Después abre tu web en una ventana privada, prueba el banner y comprueba que tu web aparece como instalada en tu panel de Velo.
¿Usas ClientRouter? Sigues necesitando el script corto de los pasos de Astro de arriba; si no, el banner desaparece cuando los visitantes cambian de página.
Dudas sobre Astro,
resueltas.
Lo primero que preguntan los equipos al instalar Velo en Astro.
¿Para qué webs de Astro sirve?
Cualquier proyecto de Astro con un layout compartido, estático o renderizado en servidor, porque la etiqueta va en el HTML que genera el layout. Hemos probado los pasos en Astro 7 con salida estática.
¿Tengo que añadir is:inline?
Es la opción segura. Astro deja tal cual cualquier script con atributos distintos de src, así que el fragmento ya queda intacto, e is:inline lo dice de forma explícita. Deja los atributos data exactamente como aparecen en tu panel.
El banner desaparece cuando hago clic en un enlace.
Es ClientRouter, que sustituye el body de la página al navegar. Añade el segundo script del paso 2 al mismo head, y el banner y el botón que lo vuelve a abrir pasan a cada página nueva. transition:persist de Astro no sirve aquí, porque Velo añade esos elementos cuando la página ya ha cargado.
Mi web tiene más de un layout.
Pon el fragmento en el layout base que envuelven los demás. Si tus layouts no comparten ninguno, añádelo a cada uno. Velo ignora una segunda copia en la misma página, pero comprueba que todas las secciones de la web muestran el banner.
¿Ralentizará mi web?
El fragmento del panel carga de forma asíncrona. Como con cualquier script, mide cómo afecta a tu web y revisa el orden de las etiquetas: la carga asíncrona, por sí sola, no garantiza que los valores de consentimiento por defecto se apliquen antes que el resto de etiquetas.
¿Puede hacerlo por mí un asistente de IA?
Sí. Copia el prompt de Instalar con agentes, justo debajo, y pégalo en Claude, ChatGPT, Cursor o el asistente que ya uses. Incluye los pasos de esta página, el orden en que tienen que cargar las etiquetas y las comprobaciones que el agente tiene que hacer antes de darte el trabajo por terminado.
O deja que
lo haga un agente.
Copia el prompt y pégalo en Claude, ChatGPT, Cursor o el asistente que ya uses. Lleva todo lo que hay en esta página: las dos vías, el orden en que tienen que cargar las etiquetas y las comprobaciones que demuestran que funciona.
Pega este prompt en tu asistente y pásale el ID de tu web y, desde tu panel de Velo, el fragmento de instalación completo o los ajustes de GTM.
¿Usas un agente que lee páginas web? Pásale veloconsent.com/llms.txt y /install.md y tendrá el mismo contexto en texto plano.
Del blog.
© 2026
