Ajoutez Velo
à Next.js.

Trois étapes · environ cinq minutes

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

   Copier l'exemple<script src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script>
2. 02

   Collez-la dans votre layout racine

   Avec l'App Router, ouvrez le layout racine, app/layout.tsx ou src/app/layout.tsx, ajoutez un élément <head> au-dessus de <body> s'il n'y en a pas et collez-y votre extrait Velo complet, au-dessus de toute balise d'analyse ou de publicité. Avec le Pages Router, collez-le dans <Head> dans pages/_document.tsx, en créant ce fichier si le projet n'en a pas. L'extrait est du JSX valide tel quel. Ne le chargez ni depuis useEffect ni avec next/script et sa stratégie par défaut : les deux le chargent alors que vos autres balises peuvent déjà se déclencher. Déployez, puis testez une page atteinte par un Link ainsi qu'un rechargement complet.

   Next.js · layout racine

   // app/layout.tsx on the App Router. On the Pages Router, the same
   // line goes inside <Head> in pages/_document.tsx.
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <head>
           {/* Paste the complete Velo snippet from your dashboard here. */}
           <script src="https://cdn.veloconsent.com/v1/velo.js"
                   data-api="https://app.veloconsent.com"
                   data-velo-site="your-site-id" async></script>
         </head>
         <body>{children}</body>
       </html>
     );
   }

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