Sur Fimo (fimo.ai), il n'y a pas de champ « code personnalisé » à remplir : votre site est du vrai code, dans un dépôt que vous contrôlez. L'extrait FlowConsent se place donc tout en haut du <head> du layout racine du site, soit en le demandant au chat de Fimo Studio, soit avec votre agent de code, puis on publie. Le piège principal : les sites Fimo reposent sur des frameworks qui changent de page sans rechargement, il faut donc activer le mode SPA de la bannière.
Avant de commencer
- Un compte sur app.flowconsent.com (offre Free gratuite, sans carte bancaire, 25 000 sessions par mois) et une bannière créée puis déployée. Sur l'offre Free, le déploiement passe par votre compte Cloudflare (guide) ; sur Pro et Enterprise, il se fait en un clic.
- Un projet Fimo que vous pouvez modifier et publier. Fimo crée des sites en Next.js (choix par défaut), React Router, Vite + React, Astro ou SvelteKit, et peut héberger d'autres applications.
Étape 1 : copier l'extrait de code
Dans FlowConsent, ouvrez Builder → Déploiement → Intégration, onglet HTML / No-code (ou Next.js si votre site Fimo est en Next.js). L'extrait comporte deux parties, et leur ordre compte :
<script>
// FlowConsent Loader - PLACER AVANT tout autre script dans le <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://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"></script>Le premier bloc pose les valeurs par défaut Consent Mode v2 (tout denied), le second charge la bannière. Ils doivent arriver avant tout script de suivi.
Étape 2 : l'ajouter au layout racine
La documentation de Fimo ne décrit pas de menu dédié au code personnalisé dans Studio : le <head> vit dans le code de votre site. Deux façons de faire.
Avec le chat de Fimo Studio (le plus simple). Ouvrez le chat de votre projet et décrivez le résultat attendu, en collant l'extrait :
Ajoute cet extrait tout en haut du
<head>du layout racine, avant tout autre script, sur toutes les pages, sans modifier le code : [extrait FlowConsent]
Le chat prépare la modification et la laisse en revue : utilisez View changes pour vérifier que l'extrait est bien le premier élément du <head>, et Open preview pour le voir dans un aperçu.
Avec votre agent de code ou à la main. Le fichier dépend du framework :
| Framework | Où placer l'extrait |
|---|---|
| Next.js | Le layout racine (app/layout.tsx), voir le guide Next.js |
| Astro | Le layout qui rend le <head> (src/layouts/Base.astro sur les nouveaux projets Fimo), avec is:inline sur les deux balises <script> pour qu'Astro ne les regroupe pas |
| SvelteKit | src/app.html, en tête du <head>, avant %sveltekit.head% |
| Vite + React | index.html à la racine du projet |
| React Router | Le composant qui rend le <head> dans app/root.tsx |
Ensuite, fimo deploy met à jour l'aperçu de la branche en cours, sans rien publier.
Étape 3 : publier
Une modification enregistrée ne change pas le site public. Une fois la modification fusionnée dans la branche de production (main par défaut), cliquez sur Publish en haut à droite de l'en-tête du projet, puis sur Publish dans le panneau. Depuis le terminal : fimo checkout main puis fimo deploy --publish.
Les pièges propres à Fimo
- Aperçu et production sont distincts. L'aperçu sert à la revue entre membres du projet, ce n'est pas votre site public. Faites les vérifications finales sur l'adresse publiée.
- Les autres traceurs passent après. Si le code charge Google Analytics, le Meta Pixel ou Google Tag Manager, ils doivent venir après l'extrait. Le plus sûr : retirez-les du code et déclarez-les dans Builder → Services, pour que la bannière ne les charge qu'après consentement.
- En-têtes de sécurité. Fimo permet de définir des en-têtes HTTP dans
.fimo/config.json. Si vous y ajoutez une Content Security Policy, autorisez le domaine de votre bannière FlowConsent, sinon le navigateur la bloquera.
Vérifier l'installation
- Ouvrez votre site publié en navigation privée : la bannière doit s'afficher.
- Dans l'onglet Réseau des outils de développement, aucune requête tierce ne doit partir avant le clic sur « Accepter ».
- Lancez l'assistant d'installation (Builder → Intégration) : il contrôle la page en ligne (loader présent avec votre code de licence, stub Consent Mode présent, stub placé AVANT chaque tag Google). Voir l'assistant d'installation.
- Terminez par un scan de refus depuis l'onglet Conformité : un vrai navigateur refuse le consentement et confirme que rien ne se déclenche. Voir la vérification de conformité.
Le faire depuis votre agent IA (MCP)
FlowConsent dispose d'un serveur MCP officiel, https://mcp.flowconsent.com, utilisable depuis Claude, ChatGPT ou tout client MCP. La connexion se fait en OAuth 2.0 avec votre compte FlowConsent, sans clé d'API. Votre agent peut récupérer l'extrait de code et les consignes de placement (outils get_banner_snippet et get_setup_instructions), vérifier l'installation avec un vrai scan (verify_consent_compliance) et poser une surveillance récurrente (monitor_compliance).
Exemple de demande :
Donne-moi l'extrait de code de ma bannière pour mon site Fimo et vérifie qu'il est bien installé sur https://monsite.fr
Le serveur MCP de FlowConsent ne modifie pas votre site : il fournit l'extrait, les instructions et la vérification. C'est vous, votre agent de code ou le chat de Fimo qui ajoutez l'extrait au layout. Voir le serveur MCP et la page MCP.
Questions fréquentes
Fimo a-t-il un champ pour coller du code dans le <head> ?
La documentation de Fimo n'en décrit pas : les réglages de Studio couvrent par exemple le SEO et les domaines, tandis que le <head> fait partie du code de votre site. On ajoute donc l'extrait au layout racine, via le chat de Studio ou votre agent de code.
Faut-il passer par Google Tag Manager ?
Non. FlowConsent ne se charge pas via GTM, car une bannière chargée depuis GTM arrive trop tard pour le blocage préalable. L'extrait se place en tête du <head>, au-dessus du conteneur GTM. Voir Google Consent Mode.
Un agent Fimo peut-il retirer l'extrait par erreur ?
Les agents Fimo travaillent dans des branches et présentent leurs modifications en revue avant fusion. Relisez les diffs qui touchent au layout racine, et laissez la surveillance FlowConsent (monitor_compliance) signaler toute régression.