Ajoutez Velo
à Astro.
Installez la bannière de cookies Velo et Google Consent Mode v2 sur Astro avec une seule ligne dans votre layout partagé. La plupart des installations prennent quelques minutes si vous avez déjà accès au code du site. Si vous utilisez Google Tag Manager, cette méthode figure aussi sur cette page.
Instructions et sources des images revues le 7 novembre 2026.
Collez une ligne
dans votre layout.
Ajoutez l'extrait de votre site dans le head commun à tout le site, puis publiez et testez le résultat. Si vos balises de mesure passent déjà par Google Tag Manager, utilisez la méthode ci-dessous.
Vous utilisez déjà Google Tag Manager ? Oubliez le code et passez par là ↓
Trois étapes · environ cinq minutes
-
01
Copier la ligne
Copiez l'extrait d'installation complet de ce site depuis votre tableau de bord Velo. L'exemple ci-dessous montre le format ; remplacez your-site-id avant de l'utiliser. Conservez l'endpoint d'API fourni par votre tableau de bord.
<script src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script> -
02
Collez-la dans votre layout partagé
Dans le layout partagé par toutes les pages, en général src/layouts/Layout.astro, collez votre extrait Velo complet dans <head>, au-dessus de toute balise d'analyse ou de publicité, et ajoutez is:inline à la balise script pour qu'Astro la laisse telle quelle. Si le layout utilise <ClientRouter />, Astro remplace le body à chaque navigation, ce qui supprime la bannière : dans le même head, ajoutez un script is:inline qui stocke #velo-banner-host et #velo-reopener-host sur astro:before-swap et les ajoute à document.body sur astro:after-swap. Compilez et déployez.
Astro · layout partagé
<!-- src/layouts/Layout.astro: the layout every page shares --> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Paste the complete Velo snippet from your dashboard here, then add is:inline. --> <script is:inline src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script> <!-- Only if this layout uses <ClientRouter />: keeps the banner across page swaps. --> <script is:inline> document.addEventListener('astro:before-swap', () => { window.veloHosts = [...document.querySelectorAll('#velo-banner-host, #velo-reopener-host')]; }); document.addEventListener('astro:after-swap', () => { document.body.append(...window.veloHosts); }); </script> </head> <body> <slot /> </body> </html>Référence de configuration vérifiée · 7 novembre 2026 Référence de configuration vérifiée d'après la documentation de la plateforme. Ce n'est pas une capture d'écran de l'administration.
Documentation de la plateforme ↗ -
03
Publier et vérifier le site en ligne
Enregistrez et publiez la modification en suivant les étapes de la plateforme ci-dessus, puis videz le cache du site ou du CDN. Ouvrez l'URL publiée dans une nouvelle session de navigateur. Vérifiez la bannière là où vos règles régionales l'exigent, testez l'acceptation et le refus, et vérifiez les valeurs de consentement par défaut et leurs mises à jour avant que vos balises de mesure ne se déclenchent. Confirmez que le site apparaît comme installé dans votre tableau de bord Velo.
Capture de l'interface réelle · 23 septembre 2026 La vraie bannière de veloconsent.com, capturée le 23 septembre 2026. Le texte, la mise en page et les réglages régionaux de votre bannière peuvent différer.
Site Velo en production ↗Voir en taille réelle ↗
Vous utilisez ClientRouter ? Astro remplace tout le body de la page à chaque navigation, ce qui supprime la bannière et le bouton qui la rouvre. Ajoutez le court second script de l'étape 2 et les deux restent. Sans ClientRouter, chaque lien recharge entièrement la page et ce script est inutile.
Vous comparez encore les options ? Consultez toutes les plateformes prises en charge.
Vous utilisez Tag Manager ?
Oubliez le code.
Si Google Tag Manager est déjà installé sur votre site, c'est le moyen le plus simple d'ajouter Velo. Aucun code à toucher, quatre étapes courtes, et toutes vos balises restent au même endroit.
- 01
Ajoutez Velo à Tag Manager
Ouvrez le modèle Velo, cliquez sur Add to workspace, puis choisissez votre conteneur.
Ouvrir le modèle Velo ↗ - 02
Collez l'identifiant de votre site
Dans Tag Manager, ouvrez Tags et cliquez sur New. Cliquez sur Tag Configuration, choisissez Velo CMP et collez l'identifiant de votre site. Vous le trouverez dans votre tableau de bord Velo. Laissez tout le reste tel quel.
- 03
Faites-le charger en premier
Cliquez sur Triggering, choisissez Consent Initialization – All Pages, puis cliquez sur Save. Ainsi, Velo démarre avant vos autres balises.
- 04
Publiez et vérifiez
Cliquez sur Submit, puis sur Publish. Preview seul ne met pas Velo en ligne. Ouvrez ensuite votre site dans une fenêtre privée, testez le bandeau et vérifiez que le site apparaît comme installé dans votre tableau de bord Velo.
Vous utilisez ClientRouter ? Il vous faut quand même le court script des étapes Astro ci-dessus, sinon le bandeau disparaît quand les visiteurs changent de page.
Vos questions Astro,
nos réponses.
Ce que demandent d'abord les équipes qui installent sur Astro.
Quels sites Astro sont concernés ?
Tout projet Astro doté d'un layout partagé, statique ou rendu côté serveur, car la balise se trouve dans le HTML produit par le layout. Nous avons testé ces étapes sur Astro 7 en sortie statique.
Dois-je ajouter is:inline ?
C'est le choix prudent. Astro laisse tel quel tout script qui a d'autres attributs que src, donc l'extrait reste déjà intact, et is:inline le dit explicitement. Gardez les attributs data exactement comme votre tableau de bord les affiche.
La bannière disparaît quand je clique sur un lien.
C'est ClientRouter qui remplace le body de la page à la navigation. Ajoutez le second script de l'étape 2 dans le même head, et la bannière et le bouton qui la rouvre passent à chaque nouvelle page. transition:persist d'Astro n'aide pas ici, car Velo ajoute ces éléments une fois la page chargée.
Mon site a plusieurs layouts.
Placez l'extrait dans le layout de base que les autres englobent. Si vos layouts n'en partagent aucun, ajoutez-le à chacun. Velo ignore une seconde copie sur la même page, mais vérifiez que chaque section du site affiche la bannière.
Est-ce que ça va ralentir le site ?
L'extrait du tableau de bord se charge de manière asynchrone. Comme pour tout script, mesurez son effet sur votre site et vérifiez l'ordre de vos balises : le chargement asynchrone ne garantit pas à lui seul que les valeurs de consentement par défaut s'appliquent avant les autres balises.
Un assistant IA peut-il le faire à ma place ?
Oui. Copiez le prompt de la section Installer avec un agent, juste en dessous, dans Claude, ChatGPT, Cursor ou l'assistant que vous utilisez déjà. Il contient les étapes de cette page, l'ordre dans lequel les balises doivent se charger et les vérifications que l'agent doit faire avant de vous annoncer que c'est terminé.
Ou confiez-le
à un agent.
Copiez le prompt dans Claude, ChatGPT, Cursor ou l'assistant que vous utilisez déjà. Il contient tout ce qui est sur cette page : les deux méthodes, l'ordre dans lequel les balises doivent se charger et les vérifications qui prouvent que ça a marché.
Collez ce prompt dans votre assistant, puis fournissez l'identifiant de votre site et l'extrait de code d'installation complet, ou les réglages GTM, de votre tableau de bord Velo.
Vous travaillez avec un agent qui lit le web ? Envoyez-le sur veloconsent.com/llms.txt et /install.md pour le même contexte en texte brut.
Du journal.
© 2026 par
