# Installer FlowConsent sur Astro

Installer FlowConsent sur Astro : coller l'extrait de code en haut du <head> du layout de base avec is:inline, puis activer le mode SPA avec ClientRouter.

> Canonical: https://www.flowconsent.com/fr/doc/install-astro
> Last updated: 2026-10-01
Sur Astro, l'extrait de code FlowConsent se colle tout en haut du `<head>` de votre **layout de base** (souvent `src/layouts/Layout.astro`), avec la directive `is:inline` sur chaque balise `<script>` pour qu'Astro ne les traite pas. L'installation tient en deux étapes, plus une troisième si votre site utilise les View Transitions (`<ClientRouter />`) : dans ce cas, la navigation se fait sans rechargement et il faut activer le **mode SPA**.

## 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.
- Accès au code source de votre projet Astro.

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

## Étape 2 : le coller dans le layout de base avec `is:inline`

Ouvrez le composant de layout qui contient le `<html>` et le `<head>` de toutes vos pages. Astro range habituellement les layouts dans `src/layouts/`, mais ce n'est pas obligatoire : cherchez le fichier partagé par vos pages. Collez l'extrait de code **juste après l'ouverture de `<head>`**, avant tout autre script, et ajoutez `is:inline` aux deux balises `<script>` :

```html title="src/layouts/Layout.astro"
<html lang="fr">
  <head>
    <script is:inline>
    // 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 is:inline src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"></script>

    <meta charset="utf-8" />
    <title>{title}</title>
    <!-- vos autres balises et scripts viennent après -->
  </head>
  <body>
    <slot />
  </body>
</html>
```

Pourquoi `is:inline` ? Par défaut, Astro traite les balises `<script>` : il les transforme, les regroupe et les déplace. Avec `is:inline`, le script est rendu dans le HTML **exactement tel qu'il est écrit**, à l'endroit où vous l'avez placé. C'est indispensable ici : le stub Consent Mode doit s'exécuter immédiatement, en haut de la page, avant le moindre tag de suivi.

Si vos pages n'utilisent pas toutes le même layout, répétez l'opération dans chaque layout racine. Reconstruisez puis redéployez le site.

## Étape 3 : activer le mode SPA si vous utilisez ClientRouter

> [!WARNING]
> Le composant `<ClientRouter />` d'Astro (importé depuis `astro:transitions`, appelé `<ViewTransitions />` dans les versions antérieures à Astro 5) remplace la navigation classique par un routeur côté client : les pages s'enchaînent **sans rechargement complet**, via `history.pushState`. La bannière ne se réexécute donc pas à chaque page. Activez le **mode SPA** dans l'onglet **Réglages** du Builder, puis redéployez la bannière : le consentement est alors revérifié à chaque navigation côté client.

Lors d'une navigation, Astro conserve les scripts du `<head>` qui existent aussi sur la nouvelle page : votre extrait de code, identique sur toutes les pages, reste en place sans être relancé. N'ajoutez pas `data-astro-rerun` à ses balises. Le fonctionnement du mode SPA est détaillé dans le [guide Next.js et SPA React](/fr/doc/nextjs-integration).

Sans `<ClientRouter />`, un site Astro est un site multipage classique : chaque clic recharge la page et le mode SPA n'est pas nécessaire.

## Les scripts de suivi : à déclarer dans Services

Ne collez pas Google Analytics, Meta Pixel ou d'autres traceurs directement dans le layout : ils partiraient avant le choix du visiteur. Déclarez-les dans **Builder → Services**, la bannière ne les charge qu'après consentement. Si vous utilisez Google Tag Manager, ne chargez pas FlowConsent depuis GTM (il arriverait trop tard) : placez l'extrait de code **au-dessus** du conteneur GTM, dans le même `<head>`. Détails dans le [guide Google Consent Mode](/fr/doc/google-consent-mode).

## 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** des outils de développement, aucune requête vers un service tiers ne part avant le clic sur **Accepter**.
3. Avec `<ClientRouter />`, naviguez entre plusieurs pages et vérifiez que rien ne part non plus.
4. Lancez l'[assistant d'installation](/fr/doc/setup-wizard) (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).
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. 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 layout : 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 Astro, dis-moi où le placer dans mon layout, puis 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

### Pourquoi la bannière ne s'affiche-t-elle pas après une navigation ?

Votre site utilise probablement `<ClientRouter />` : la page n'est pas rechargée. Activez le mode SPA dans **Builder → Réglages**, redéployez la bannière, puis testez de nouveau en navigation privée.

### Puis-je importer le script dans un `<script>` sans `is:inline` ?

Non. Sans `is:inline`, Astro traite le script et ne garantit plus son emplacement en haut du `<head>`, ni son exécution immédiate. Le blocage préalable exige que l'extrait de code s'exécute avant tout traceur.

### Faut-il un adaptateur ou une intégration Astro particulière ?

Non. L'extrait de code est du HTML standard : il fonctionne en mode statique comme en rendu serveur, quel que soit l'hébergeur (Vercel, Netlify, Cloudflare…).

### Mon site Astro utilise React ou Vue en îlots : cela change-t-il quelque chose ?

Non, tant que la navigation entre pages recharge la page. Seul `<ClientRouter />` impose le mode SPA. Les îlots interactifs n'ont pas besoin de charger FlowConsent eux-mêmes.
