Vercel es un alojamiento: el fragmento de código de FlowConsent no se pega en el panel de Vercel, sino en el <head> del framework desplegado (Next.js, Astro, React, sitio estático), y después se vuelve a desplegar. La instalación sigue, por tanto, la guía del framework, en dos pasos. Los dos puntos propios de Vercel son sus herramientas de medición (Vercel Web Analytics y Speed Insights) y los dominios de previsualización, que no son el lugar adecuado para verificar la instalación.
Antes de empezar
- Una cuenta en app.flowconsent.com (plan Free gratuito, sin tarjeta de crédito, hasta 25 000 sesiones al mes).
- Un banner creado y desplegado. En el plan Free, el despliegue se hace con la propia cuenta de Cloudflare (guía de Cloudflare); en Pro y Enterprise, con un clic.
- El repositorio Git del proyecto conectado a Vercel, o la CLI de Vercel.
Paso 1: pegar el fragmento de código en el framework
Copiar el fragmento de código desde Builder → Despliegue → Integración (pestañas HTML / No-code, Webflow, Next.js) y seguir la guía del framework correspondiente:
| Framework desplegado | Dónde va el fragmento de código | Guía |
|---|---|---|
| Next.js | app/layout.tsx o pages/_document.tsx, más el modo SPA | Next.js y SPA con React |
| Astro | <head> del layout base, con is:inline | Instalar en Astro |
| React (Vite, CRA, React Router) | index.html, al principio del <head>, más el modo SPA | Instalar en React |
| Sitio estático (HTML) | Al principio del <head> de cada página | Más abajo |
En un sitio HTML estático, el fragmento de código va justo después de la apertura de <head>, antes de cualquier otro script:
<head>
<script>
// FlowConsent Loader - COLOCAR ANTES de cualquier otro script en el <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
'ad_storage':'denied',
'analytics_storage':'denied',
'ad_user_data':'denied',
'ad_personalization':'denied',
'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://SU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=SU_CODIGO_LICENCIA"></script>
<!-- las demás etiquetas van después -->
</head>Paso 2: volver a desplegar
Subir el cambio a la rama de producción (o ejecutar vercel --prod). Vercel reconstruye el sitio y el fragmento de código queda publicado en el dominio de producción. Si la aplicación usa navegación del lado del cliente (Next.js, React, Astro con <ClientRouter />), comprobar que el modo SPA está activado en la pestaña Ajustes del Builder.
Vercel Web Analytics y Speed Insights
Ambos productos de Vercel se activan en el panel del proyecto y se integran en el código con los paquetes @vercel/analytics (componente <Analytics />) y @vercel/speed-insights. Según la documentación oficial de Vercel:
- Web Analytics registra, por cada página vista, la URL, el referente, parámetros de consulta filtrados, la geolocalización (país, región, ciudad), el sistema operativo, el navegador y el tipo de dispositivo. Vercel indica que no usa cookies de terceros: el visitante se identifica mediante un hash calculado a partir de la petición, y la sesión se descarta a las 24 horas. Las páginas vistas también se registran en las navegaciones del lado del cliente.
- Speed Insights recoge las Core Web Vitals de cada carga de página, con la ruta, el tipo de red, el navegador, el dispositivo y el país. Vercel describe estos datos como anónimos y sin permitir reconstruir una navegación ni identificar a un usuario.
Los rastreadores de terceros (Google Analytics, Meta Pixel…) se declaran en Builder → Servicios, nunca escritos directamente en el layout. Con Google Tag Manager, el fragmento de código va por encima del contenedor de GTM (guía de Google Consent Mode).
Dominios de previsualización
Cada rama y cada pull request reciben un despliegue de previsualización en una URL generada *.vercel.app. Dos particularidades documentadas por Vercel distorsionan las pruebas:
- Deployment Protection: cuando está activada en modo Standard Protection, todos los despliegues salvo los dominios de producción exigen autenticación. Un escaneo externo, como el escaneo de rechazo de FlowConsent, no puede acceder.
- Vercel Toolbar: está activada por defecto en todos los despliegues de previsualización, y no en producción. Lo que se ve en una previsualización no es exactamente lo que ven los visitantes.
Verificar la instalación
- Abrir el dominio de producción en una ventana privada: el banner aparece.
- En la pestaña Red, ninguna petición de terceros sale antes de Aceptar.
- Lanzar el asistente de instalación (Builder → Integración): cargador presente con el código de licencia correcto, stub de Consent Mode presente y colocado antes de cada etiqueta de Google.
- Terminar con un escaneo de rechazo desde la pestaña Conformidad (verificación de conformidad).
Hacerlo desde un agente de IA (MCP)
FlowConsent dispone de un servidor MCP oficial, https://mcp.flowconsent.com, utilizable desde Claude, ChatGPT o cualquier cliente MCP, con conexión OAuth 2.0 a la cuenta de FlowConsent (sin clave de API). El agente obtiene el fragmento de código y las instrucciones de colocación adaptadas al framework (get_banner_snippet, get_setup_instructions), verifica la instalación con un escaneo real (verify_consent_compliance) y puede programar una vigilancia periódica (monitor_compliance). No modifica el proyecto de Vercel por su cuenta.
Necesito el fragmento de código de mi banner para mi sitio Next.js alojado en Vercel y comprobar que está bien instalado en https://misitio.es
Más información: servidor MCP y FlowConsent para agentes de IA.
Preguntas frecuentes
¿Se puede añadir el fragmento de código desde el panel de Vercel?
No. Vercel despliega el código del repositorio: el fragmento de código va en los archivos del framework y un nuevo despliegue lo publica.
El banner no aparece en la URL de previsualización. ¿Es grave?
Primero hay que comprobar que el despliegue incluye el cambio. Después, probar en el dominio de producción, que es el que ven los visitantes y el que comprueba el asistente de instalación.
¿Vercel Web Analytics está exento de consentimiento?
Vercel no lo afirma. Su documentación describe una medición anonimizada y sin cookies de terceros, pero la decisión corresponde al responsable del sitio: en caso de duda, cargarlo solo tras el consentimiento.
¿Hace falta el modo SPA en Vercel?
Depende del framework, no de Vercel: sí para Next.js, React y Astro con <ClientRouter />, no para un sitio estático multipágina.