Installer FlowConsent sur Astro

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 (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.
• 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 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

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.

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.

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 (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é).

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 et FlowConsent pour les agents IA.

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.