# Installer FlowConsent sur Netlify

Installer FlowConsent sur Netlify : coller l'extrait de code en haut du <head> dans le code du site, ou via Snippet injection si aucun script ne le précède.

> Canonical: https://www.flowconsent.com/fr/doc/install-netlify
> Last updated: 2026-10-01
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](https://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](/fr/doc/cloudflare-deployment)) ; 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 :

```html title="Extrait de code FlowConsent"
<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](/fr/doc/nextjs-integration).
- **Astro** : le layout de base, avec `is:inline`, voir [Installer sur Astro](/fr/doc/install-astro).
- **React (Vite, Create React App)** : `index.html`, voir [Installer sur React](/fr/doc/install-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.

> [!WARNING]
> La Snippet injection place l'extrait **à la fin du `<head>`**, pas au début. Tout script de suivi déjà présent dans le `<head>` de vos pages (Google Analytics, Meta Pixel, conteneur Google Tag Manager…) se retrouve donc **au-dessus** de FlowConsent et part avant le choix du visiteur. Utilisez cette méthode uniquement si le `<head>` de votre site ne contient aucun script de suivi ; sinon, collez l'extrait dans le code (étape 2).

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](/fr/doc/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](/fr/doc/setup-wizard) (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é](/fr/doc/compliance-verification)).

## 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](/fr/doc/mcp-server) et [FlowConsent pour les agents IA](/fr/mcp).

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