Installer FlowConsent sur Netlify

Sur Netlify, l'extrait de code FlowConsent se place de préférence tout en haut du <head>, dans le code de votre site, puis vous redéployez. Netlify propose aussi la Snippet injection (Project configuration → Developer settings → Post processing), sans toucher au code et sans redéploiement. Son piège : elle insère l'extrait juste avant </head>, donc après les scripts déjà présents dans le <head>, et elle ne s'applique pas aux pages rendues côté serveur.

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.
• L'accès au code du site, ou au tableau de bord Netlify du projet.

Étape 1 : copier l'extrait de code

Ouvrez Builder → Déploiement → Intégration et copiez l'extrait de code (onglet HTML / No-code, ou Next.js pour une application Next.js). Il comporte deux parties, dans cet ordre :

<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>

Étape 2 (recommandée) : le coller dans le code du site

Collez l'extrait de code juste après l'ouverture de <head>, avant tout autre script, dans le fichier qui produit le <head> de toutes vos pages :

• Site HTML statique : chaque page HTML, ou le gabarit commun de votre générateur (Hugo, Eleventy, Jekyll…).
• Next.js : app/layout.tsx ou pages/_document.tsx, voir le guide Next.js et SPA React.
• Astro : le layout de base, avec is:inline, voir Installer sur Astro.
• React (Vite, Create React App) : index.html, voir Installer sur React.

Poussez ensuite la modification : Netlify reconstruit et publie le site. C'est la seule méthode qui garantit la position en tête du <head>, et elle fonctionne aussi sur les pages rendues côté serveur.

Variante sans code : Snippet injection

Si vous n'avez pas accès au code, Netlify peut injecter l'extrait dans toutes les pages servies :

1. Dans l'interface Netlify, ouvrez Project configuration → Developer settings → Post processing.
2. Dans la section Snippet Injection, cliquez sur Add Snippet.
3. Choisissez l'injection avant la balise de fermeture </head>, donnez un nom (par exemple FlowConsent) et collez l'extrait de code complet, balises <script> comprises.
4. Cliquez sur Save.

D'après la documentation de Netlify, l'extrait est injecté immédiatement, sans redéploiement.

Autres limites documentées par Netlify : l'injection a lieu au moment où les pages sont servies, et elle ne fonctionne pas sur les routes en proxy ni sur les routes gérées par des fonctions. Les pages rendues côté serveur (SSR), qui passent par Netlify Functions, ne reçoivent donc pas l'extrait. Pour un site Next.js, Astro ou autre en SSR, passez par le code.

Scripts de suivi et applications monopages

Ne laissez aucun traceur en dur dans le <head> : déclarez Google Analytics, Meta Pixel et les autres services dans Builder → Services, la bannière ne les charge qu'après consentement. Avec Google Tag Manager, l'extrait de code se place au-dessus du conteneur GTM, jamais dans GTM (guide Google Consent Mode).

Si votre site navigue sans recharger la page (React, Next.js, Vue, Astro avec <ClientRouter />), activez le mode SPA dans l'onglet Réglages du Builder et redéployez la bannière.

Vérifier l'installation

1. Ouvrez le site publié en navigation privée : la bannière s'affiche.
2. Affichez le code source de la page : l'extrait de code apparaît avant tout autre script du <head>.
3. Dans l'onglet Réseau, aucune requête tierce ne part avant Accepter.
4. Lancez l'assistant d'installation (Builder → Intégration) : chargeur présent avec le bon code de licence, stub Consent Mode présent et placé avant chaque tag Google.
5. 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, avec une connexion OAuth 2.0 à votre compte FlowConsent (pas de clé d'API). L'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). Il ne configure pas Netlify à votre place.

Donne-moi l'extrait de code de ma bannière pour mon site hébergé sur Netlify et 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

Snippet injection ou code du site : que choisir ?

Le code du site, dès que c'est possible : l'extrait y est en tête du <head> et fonctionne sur toutes les pages, SSR compris. La Snippet injection convient à un site statique dont le <head> ne contient aucun script de suivi.

La bannière n'apparaît pas sur certaines pages. Pourquoi ?

Ces pages sont probablement rendues par une fonction (SSR) ou servies en proxy : la Snippet injection ne s'y applique pas. Placez l'extrait de code dans le layout du framework.

L'extrait s'affiche-t-il aussi sur les Deploy Previews ?

Oui, une Snippet injection s'applique aux pages servies par Netlify, y compris les prévisualisations. Réservez toutefois l'assistant d'installation et le scan de refus à votre domaine de production.

Faut-il redéployer après une Snippet injection ?

Non, Netlify l'applique immédiatement. En revanche, une modification dans le code exige un nouveau déploiement.