Lo que Lovable entrega, y lo que no
Un proyecto de Lovable es una app estándar de Vite y React: un index.html en la raíz, una carpeta src/ que el agente reescribe con cada prompt y, si lo activaste, un backend de Supabase para autenticación y datos. Al publicar, la app va a your-project.lovable.app, o a tu propio dominio una vez que conectes uno.
Con esa app llegan tres cosas con consecuencias para el consentimiento. Primero, la analítica de visitantes propia de Lovable. La documentación dice que está activada por defecto, que registra visitantes, páginas vistas, tasa de rebote, duración de la visita, fuentes de tráfico y dispositivos, y que «mide el tráfico global, no a personas individuales». No dice qué guarda, si es que guarda algo, en el navegador del visitante. Segundo, lo que hayas pedido: «Add Google Analytics» pone el snippet de GA4 en el head, «Add the Meta pixel» hace lo mismo para Facebook. Tercero, los embeds: un vídeo de YouTube o un Google Map dentro de un componente pone cookies en cuanto carga el iframe.
Lo que no llega es nada que retenga esos scripts hasta que un visitante decida. Y si haces el prompt «add a GDPR cookie banner», Lovable hace lo que cualquier agente de programación: escribe un bonito componente de React con un botón Aceptar que guarda un flag en localStorage y no bloquea nada. Ese es el banner por el que la CNIL multó a SHEIN con 150 millones de euros en septiembre de 2025, con una fuente más bonita. Este artículo es la alternativa, y lleva unos diez minutos.
Dónde va la etiqueta
El runtime de consentimiento es una sola etiqueta script, y tiene que ser el primer elemento dentro de <head> en index.html. No en App.tsx, no en un useEffect, no en un componente de layout. Dos razones. El runtime instala su interceptor de forma síncrona, así que cualquier cosa que se ejecute antes puede poner una cookie que el runtime no puede deshacer. Y index.html es el único archivo que un prompt de Lovable casi nunca reescribe, así que la etiqueta sobrevive a las siguientes cincuenta iteraciones de tu landing page.
Paso 1: consigue una clave
Crea una cuenta gratuita, añade un sitio e introduce el dominio en el que está publicada tu app. Si aún no has conectado un dominio propio, es la dirección lovable.app; puedes cambiarla después sin tocar la etiqueta. Abre Instalar y copia la clave de producción. Cada sitio tiene también una clave de preview, que sirve lo que publicaste en vista previa y es la que debes usar en la URL de vista previa de Lovable mientras pruebas.
Paso 2: el prompt
En el plan gratuito, la pestaña Code de Lovable es de solo lectura, así que el agente hace la edición. En un plan de pago puedes abrir index.html en la pestaña Code y pegar la etiqueta tú mismo, y con la sincronización con GitHub activada puedes hacerlo en tu propio editor y hacer push. Sea cual sea la ruta, la instrucción es la misma, y lo importante es lo que prohíbe.
Add this script tag as the very first element inside <head> of index.html, unchanged:
<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
data-cc-site="pk_live_…"
data-cc-env="production"></script>
Then, for every analytics, advertising or social script already in index.html (Google Analytics, gtag, Meta Pixel, TikTok, Hotjar, Clarity), change type to "text/plain" and add data-cc-category="analytics" or data-cc-category="marketing". Do not build a cookie banner component. Do not change anything else.
Lee el diff antes de aceptarlo. Debería añadir cuatro líneas al principio de index.html y cambiar el atributo type de tus scripts de seguimiento. Si el agente crea además un CookieBanner.tsx, rechaza el cambio y repite la última frase del prompt. Luego publica.
Paso 3: clasifica lo que carga la app
En el panel, ejecuta el primer escaneo. Abre tu app publicada tres veces en un navegador real, con el consentimiento denegado, concedido por categoría y concedido para todo, y lista cada petición y cookie que apareció antes de una decisión. Esa lista es la verdad sobre tu app, diga lo que diga el historial de prompts.
La mayor parte de lo que encuentra se clasifica sola: GA4, Hotjar y Clarity son analítica; el píxel de Meta, las etiquetas de TikTok y LinkedIn son marketing; la sesión de Supabase vive en localStorage, es estrictamente necesaria para una app con inicio de sesión y no necesita consentimiento. Los iframes incrustados de YouTube y Maps son marketing, y el runtime los sustituye por un marcador y un botón «Configuración de cookies» hasta que se concede la categoría.
La única fila que no puedes bloquear con una etiqueta es la analítica de visitantes propia de Lovable, porque el hosting de Lovable la añade fuera de tu código. Si el escaneo muestra que guarda un identificador en el navegador o llama a un tercero, tienes dos opciones honestas: desactivarla en Project settings, General, Publishing, o listarla en tu declaración de cookies y tratarla como analítica que carga antes del consentimiento, lo que en la UE es un problema. Recomendamos el interruptor. Los recuentos del lado del servidor de tu host o tu propia analítica detrás del consentimiento te dan las mismas cifras sin la duda.
Paso 4: publica, escanea, demuéstralo
Clasifica cada hallazgo en su categoría, configura los enlaces a tu política de privacidad y, si estás en Alemania, a tu aviso legal, y publica el banner. Luego ejecuta la comprobación de instalación. Carga tu URL publicada como un visitante y confirma que el runtime se ejecutó primero y que nada no esencial se disparó antes de una decisión. Esa marca, con su marca de tiempo, es el artefacto que conservas. Haz también una captura del clic en Rechazar en una ventana privada; el panel de almacenamiento del navegador no debería mostrar después cookies de analítica ni de marketing.
Cuando conectes un dominio propio más adelante, actualiza el dominio en la configuración del sitio para que el escáner lo siga. La clave no cambia, así que la etiqueta en index.html se queda como está.
Consent Mode v2 en una single-page app
Si usas Google Analytics o Google Ads con visitantes del EEE, el Reino Unido o Suiza, Google exige señales de Consent Mode v2. El runtime envía los valores por defecto «denied» antes de que cualquier etiqueta de Google pueda ejecutarse, y los actualiza cuando el visitante decide, así que no hay nada que programar. Dos detalles importan específicamente en una app de Lovable. GA4 necesita una página vista en cada cambio de ruta del lado del cliente, que se encarga el habitual useEffect sobre la ubicación del router; como el propio script gtag se retiene hasta que se concede analítica, esas llamadas se encolan sin daño hasta entonces. Y deja el snippet de GA4 en index.html, no en un componente, para que la barrera text/plain se le aplique. La lista completa de señales y el cambio de junio de 2026 están en el artículo sobre Consent Mode.
Qué pasa cuando vuelves a hacer un prompt
Los prompts reescriben src/. Rara vez tocan index.html, pero «rebuild the landing page from scratch» o «add the TikTok pixel» pueden hacerlo, y un agente que añade una etiqueta la añade en vivo, sin bloquear. Dos redes de seguridad lo cubren. El reescaneo programado vuelve a cargar la app publicada con el consentimiento denegado y lanza una alerta por cualquier novedad antes del consentimiento, con la fecha en que apareció. Y si la sincronización con GitHub está activada, el diff de cada prompt llega a tu repositorio, donde la comprobación de la CLI puede bloquear un despliegue que introduzca un rastreador sin clasificar. Trata la alerta como un test que falla: clasifica el nuevo proveedor, publica, listo.
Lista de comprobación
- La etiqueta de consentimiento es el primer elemento dentro del head en
index.html, con la clave de producción. - Cada script de analítica y marketing en
index.htmltienetype="text/plain"y una categoría. - La analítica de visitantes de Lovable está desactivada o explicada en la declaración, después de que un escaneo te dijera qué hace.
- El primer escaneo se ejecutó contra la URL publicada, cada hallazgo tiene una categoría y el banner está publicado.
- La comprobación de instalación se ha superado, y Rechazar en una ventana privada no deja cookies de analítica ni de marketing.
- Los reescaneos programados están activados, así que el siguiente prompt no puede añadir un píxel a escondidas.
Si quieres la versión corta con los detalles del plan gratuito, la guía de integración de Lovable la tiene, y el escaneo gratuito te dice sin cuenta qué carga tu app hoy.
Fuentes
- Documentación de Lovable, «Project analytics», consultada el 5 de septiembre de 2026
- FAQ de Lovable, «Can I see analytics for my published projects?», consultada el 5 de septiembre de 2026
- Documentación de Lovable, «View and edit your project’s code», consultada el 5 de septiembre de 2026
- Documentación de Lovable, integración con GitHub y resumen de Git sync
- Google, «Consent mode on websites and mobile apps», documentación de Tag Platform
- CNIL, «Cookies placed without consent: SHEIN fined 150 million euros», 3 de septiembre de 2025
- EDPB, Directrices 03/2022 sobre patrones de diseño engañosos, adoptadas el 14 de marzo de 2022