Intégration Webflow : installer FlowConsent correctement

Installer FlowConsent sur Webflow tient en deux étapes : coller votre extrait de code dans Site settings → Custom code → Head code et publier, puis retirer tout Measurement ID Google Analytics de Site settings → Apps & Integrations. Cette seconde étape n'est pas optionnelle : Webflow injecte son intégration GA native au-dessus de votre code personnalisé, là où aucun outil de consentement ne peut la bloquer.

Étape 1 : coller l'extrait de code dans Head code

Copiez votre extrait de code depuis Builder → Déploiement → Intégration : un onglet Webflow le génère pour vous. Il 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 est le stub Consent Mode : il enregistre des valeurs par défaut denied pour les quatre signaux de consentement Google dès la lecture du HTML. Le second charge la bannière elle-même. Le stub vient en premier parce que le script de la bannière se charge de façon asynchrone : le stub, écrit directement dans la page, gagne toujours la course contre tout tag Google chargé ensuite.

Dans Webflow : Site settings → Custom code → Head code, collez l'extrait de code tout en haut, enregistrez, puis publiez le site. Le code personnalisé n'est mis en ligne qu'à la publication : l'aperçu du Designer ne l'exécute pas.

Étape 2 : retirer le Measurement ID GA d'Apps & Integrations

Ce n'est pas théorique : les défauts Consent Mode ne s'appliquent qu'aux tags entrés dans le dataLayer après eux. Un gtag('config', 'G-XXXX') mis en file plus tôt est traité comme si le refus n'avait jamais existé.

Comment FlowConsent détecte la course perdue

Vous n'avez pas à le découvrir en auditant les cookies à la main. Au démarrage, la bannière inspecte le dataLayer : si une entrée gtag('config') précède les défauts de consentement, elle affiche une erreur explicite dans la console du navigateur et remonte un événement ConsentDefaultRaceLost à la télémétrie FlowConsent, en nommant les identifiants de tags concernés. Si vous voyez cette erreur, un tag est injecté au-dessus de l'extrait de code : sur Webflow, c'est presque toujours le panneau Apps & Integrations.

Vérifier l'installation

L'assistant d'installation (Builder → Intégration) contrôle la page en ligne pour vous, dans l'ordre où les choses cassent en vrai :

1. le chargeur FlowConsent est présent, avec votre code de licence ;
2. le stub Consent Mode est présent ;
3. le stub précède chaque tag Google, et il signale spécifiquement un tag injecté par les réglages du site Webflow.

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 récupère l'extrait et les instructions de placement (outils get_banner_snippet et get_setup_instructions), vérifie l'installation par un vrai scan (verify_consent_compliance) et peut poser une surveillance récurrente (monitor_compliance). Il ne modifie pas votre site Webflow à votre place : le collage reste de votre côté.

Exemple de demande : « Donne-moi l'extrait de code de ma bannière pour mon site Webflow et vérifie qu'il est bien installé sur https://monsite.fr ».

Voir le guide du serveur MCP et la page FlowConsent MCP.