Installer FlowConsent sur un site sur mesure (HTML)

Sur un site développé sur mesure, l'extrait de code FlowConsent se colle une seule fois, tout en haut du <head> du gabarit partagé par toutes vos pages (layout, en-tête inclus, template de base), avant tout autre script. L'installation tient en deux étapes : copier l'extrait de code, puis le placer dans ce gabarit commun. Les deux pièges habituels : une Content-Security-Policy qui bloque la bannière, et une navigation côté client qui demande le mode SPA.

Avant de commencer

• Un compte sur app.flowconsent.com (offre Free gratuite, sans carte bancaire, jusqu'à 25 000 sessions par mois).
• Une bannière créée puis déployée. Sur l'offre Free, le déploiement passe par votre compte Cloudflare (guide Cloudflare) ; sur Pro et Enterprise, il se fait en un clic.
• Un accès au code source de votre site et à son processus de mise en ligne.

Étape 1 : copier l'extrait de code

Ouvrez Builder → Déploiement → Intégration et copiez l'extrait de code de l'onglet HTML / No-code. Il comporte deux parties, dans cet ordre : le stub Google Consent Mode v2 (valeurs denied par défaut), puis le chargeur de la bannière.

<head>
  <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>
 
  <meta charset="utf-8">
  <!-- vos autres balises et scripts viennent après -->
</head>

Tout script placé au-dessus de cet extrait de code échappe au blocage préalable : il doit donc précéder Google Analytics, Meta Pixel, Google Tag Manager et tout autre traceur.

Étape 2 : le coller une fois dans le gabarit commun

Cherchez le fichier qui produit le <head> de toutes vos pages. Selon votre technologie :

• Site HTML statique : sans gabarit, chaque fichier .html a son propre <head>. Collez l'extrait de code dans chacun (une recherche et remplacement sur <head> suffit), ou passez par une inclusion côté serveur si votre hébergeur le permet.
• PHP : l'en-tête commun, souvent header.php, inclus dans chaque page par include ou require.
• Laravel : le layout Blade, par exemple resources/views/layouts/app.blade.php.
• Django : le gabarit de base (souvent templates/base.html) que vos pages étendent avec {% extends "base.html" %}.
• Ruby on Rails : app/views/layouts/application.html.erb.
• Hugo : le gabarit de base layouts/baseof.html (layouts/_default/baseof.html dans les versions antérieures à Hugo 0.146), ou le partial head.html qu'il appelle. Avec un thème, copiez ce fichier dans le dossier layouts/ de votre projet plutôt que de modifier le thème.
• Jekyll : le layout _layouts/default.html, ou _includes/head.html avec un thème comme Minima. Pour surcharger un fichier du thème, copiez-le au même chemin dans votre site.
• Eleventy : le layout de base rangé dans _includes/ (par exemple _includes/base.njk), appelé par la clé layout du front matter.

L'extrait de code est du HTML standard : aucun moteur de gabarit ne demande d'échappement. Si votre site a plusieurs layouts racines, répétez l'opération dans chacun. Reconstruisez ou redéployez ensuite le site.

Ne collez pas vos traceurs (Google Analytics, Meta Pixel…) en dur dans le gabarit : déclarez-les dans Builder → Services, la bannière ne les charge qu'après consentement. Pour Google Tag Manager, voir le guide dédié.

Content-Security-Policy et navigation côté client

Content-Security-Policy: script-src 'self' 'nonce-RANDOM' https://*.consent.flowconsent.com; connect-src 'self' https://*.consent.flowconsent.com

Ajoutez alors nonce="RANDOM" aux deux balises <script> de l'extrait de code, avec une valeur générée à chaque réponse. Les services que la bannière charge après consentement doivent eux aussi être autorisés, comme sans FlowConsent. En cas de blocage, la console du navigateur indique la directive et le domaine refusés.

Vérifier l'installation

1. Ouvrez le site en ligne en navigation privée : la bannière s'affiche.
2. Dans l'onglet Réseau, aucune requête vers un service tiers ne part avant le clic sur Accepter. La Console ne signale aucune violation CSP.
3. Lancez l'assistant d'installation (Builder → Intégration) : il contrôle la page en ligne (chargeur présent avec le bon code de licence, stub Consent Mode présent et placé avant chaque tag Google).
4. Terminez par un scan de refus depuis l'onglet Conformité (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 récupère l'extrait de code et les consignes de placement (get_banner_snippet, get_setup_instructions), vérifie l'installation par un vrai scan (verify_consent_compliance) et peut poser une surveillance récurrente (monitor_compliance). C'est vous, ou votre agent de code, qui modifiez le gabarit : le serveur MCP fournit l'extrait, les instructions et la vérification.

Exemple de demande :

Donne-moi l'extrait de code de ma bannière pour mon site HTML sur mesure, dis-moi où le placer dans mon gabarit, puis vérifie qu'il est bien installé sur https://monsite.fr

En savoir plus : serveur MCP et FlowConsent pour les agents IA.

Questions fréquentes

Faut-il coller l'extrait de code sur chaque page ?

Il doit être présent sur chaque page, mais vous ne le collez qu'une fois si vos pages partagent un gabarit. Seul un site en HTML pur sans gabarit demande de l'ajouter fichier par fichier.

Puis-je le placer en bas de <body> ?

Non. Le stub Consent Mode doit s'exécuter avant tout traceur : en bas de page, les scripts situés plus haut seraient déjà partis. Placez-le tout en haut du <head>.

La bannière ne s'affiche pas : par où commencer ?

Ouvrez la console du navigateur. Une erreur CSP indique un domaine à autoriser. Sinon, vérifiez que l'extrait de code figure bien dans le HTML servi (code source de la page), avec votre code de licence.

Mon site est généré statiquement : la bannière fonctionne-t-elle sans serveur ?

Oui. L'extrait de code s'exécute dans le navigateur : il fonctionne sur n'importe quel hébergement de fichiers statiques.