En Fimo (fimo.ai) no hay un campo de «código personalizado» que rellenar: su sitio es código real, en un repositorio que usted controla. El fragmento de FlowConsent va por tanto al principio del <head> del layout raíz, ya sea pidiéndoselo al chat de Fimo Studio o con su agente de código, y después hay que publicar. La trampa principal: los sitios Fimo usan frameworks que cambian de página sin recarga completa, así que hay que activar el Modo SPA del banner.
Antes de empezar
- Una cuenta en app.flowconsent.com (plan Free gratuito, sin tarjeta, 25 000 sesiones al mes) y un banner creado y desplegado. En el plan Free, el despliegue pasa por su propia cuenta de Cloudflare (guía); en Pro y Enterprise se hace con un clic.
- Un proyecto de Fimo que pueda editar y publicar. Fimo crea sitios con Next.js (opción por defecto), React Router, Vite + React, Astro o SvelteKit, y puede alojar otras aplicaciones.
Paso 1: Copie el fragmento de código
En FlowConsent, abra Builder → Despliegue → Integración, pestaña HTML / No-code (o Next.js si su sitio Fimo usa Next.js). El fragmento tiene dos partes, y su orden importa:
<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>El primer bloque fija los valores por defecto de Consent Mode v2 (todo denied), el segundo carga el banner. Ambos deben ir antes de cualquier script de seguimiento.
Paso 2: Añádalo al layout raíz
La documentación de Fimo no describe un menú de código personalizado en Studio: el <head> forma parte del código de su sitio. Hay dos maneras de hacerlo.
Con el chat de Fimo Studio (lo más sencillo). Abra el chat de su proyecto, describa el resultado que quiere y pegue el fragmento:
Añada este fragmento al principio del
<head>del layout raíz, antes de cualquier otro script, en todas las páginas, sin modificar el código: [fragmento de FlowConsent]
El chat prepara el cambio y lo deja para revisión: use View changes para comprobar que el fragmento es el primer elemento del <head>, y Open preview para verlo en una vista previa.
Con su agente de código o a mano. El archivo depende del framework:
| Framework | Dónde colocar el fragmento |
|---|---|
| Next.js | El layout raíz (app/layout.tsx), consulte la guía de Next.js |
| Astro | El layout que genera el <head> (src/layouts/Base.astro en los proyectos nuevos de Fimo), con is:inline en las dos etiquetas <script> para que Astro no las agrupe |
| SvelteKit | src/app.html, al principio del <head>, antes de %sveltekit.head% |
| Vite + React | index.html en la raíz del proyecto |
| React Router | El componente que genera el <head> en app/root.tsx |
Después, fimo deploy actualiza la vista previa de la rama actual, sin publicar nada.
Paso 3: Publique
Un cambio guardado no modifica el sitio público. Cuando el cambio esté fusionado en la rama de producción (main por defecto), seleccione Publish arriba a la derecha de la cabecera del proyecto y luego Publish en el panel. Desde el terminal: fimo checkout main y después fimo deploy --publish.
Trampas propias de Fimo
- Vista previa y producción son distintas. La vista previa sirve para la revisión entre miembros del proyecto, no es su sitio público. Haga las comprobaciones finales en la dirección publicada.
- Los demás rastreadores van después. Si el código carga Google Analytics, el Meta Pixel o Google Tag Manager, deben ir después del fragmento. Lo más seguro: retírelos del código y declárelos en Builder → Servicios, para que el banner solo los cargue tras el consentimiento.
- Cabeceras de seguridad. Fimo permite definir cabeceras HTTP en
.fimo/config.json. Si añade ahí una Content Security Policy, autorice el dominio de su banner de FlowConsent o el navegador lo bloqueará.
Verificar la instalación
- Abra su sitio publicado en una ventana privada: el banner debe aparecer.
- En la pestaña Red de las herramientas de desarrollo, ninguna petición a terceros debe salir antes de hacer clic en «Aceptar».
- Ejecute el asistente de instalación (Builder → Integración): comprueba la página publicada (loader presente con su código de licencia, stub de Consent Mode presente, stub colocado ANTES de cada etiqueta de Google). Consulte el asistente de instalación.
- Termine con un escaneo de rechazo desde la pestaña Conformidad: un navegador real rechaza el consentimiento y confirma que nada se dispara. Consulte la verificación de conformidad.
Hacerlo desde su agente de IA (MCP)
FlowConsent tiene un servidor MCP oficial, https://mcp.flowconsent.com, que funciona desde Claude, ChatGPT o cualquier cliente MCP. La conexión se hace por OAuth 2.0 con su cuenta de FlowConsent, sin clave de API. Su agente puede obtener el fragmento de código y las instrucciones de colocación (herramientas get_banner_snippet y get_setup_instructions), verificar la instalación con un escaneo real (verify_consent_compliance) y programar una vigilancia recurrente (monitor_compliance).
Ejemplo de petición:
Deme el fragmento de código de mi banner para mi sitio Fimo y compruebe que está bien instalado en https://misitio.es
El servidor MCP de FlowConsent no modifica su sitio: le da el fragmento, las instrucciones y la verificación. Es usted, su agente de código o el chat de Fimo quien añade el fragmento al layout. Consulte el servidor MCP y la página MCP.
Preguntas frecuentes
¿Tiene Fimo un campo para pegar código en el <head>?
La documentación de Fimo no describe ninguno: los ajustes de Studio cubren, por ejemplo, el SEO y los dominios, mientras que el <head> forma parte del código de su sitio. El fragmento se añade al layout raíz, mediante el chat de Studio o su agente de código.
¿Debo cargar FlowConsent con Google Tag Manager?
No. FlowConsent no se carga a través de GTM, porque un banner cargado desde GTM llega demasiado tarde para el bloqueo previo. El fragmento va al principio del <head>, por encima del contenedor de GTM. Consulte Google Consent Mode.
¿Puede un agente de Fimo retirar el fragmento por error?
Los agentes de Fimo trabajan en ramas y presentan sus cambios para revisión antes de fusionarlos. Revise los diffs que tocan el layout raíz y deje que la vigilancia de FlowConsent (monitor_compliance) señale cualquier regresión.