Velo in
Next.js einbinden.

Drei Schritte · etwa fünf Minuten

1. 01

   Zeile kopieren

   Kopieren Sie das vollständige Installations-Snippet für diese Website aus Ihrem Velo-Dashboard. Das Beispiel unten zeigt das Format; ersetzen Sie your-site-id, bevor Sie es verwenden. Behalten Sie den API-Endpunkt bei, den Ihr Dashboard vorgibt.

   Beispiel kopieren<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

   In das Root-Layout einfügen

   Öffnen Sie beim App Router das Root-Layout, app/layout.tsx oder src/app/layout.tsx, ergänzen Sie oberhalb von <body> ein <head>-Element, falls keines vorhanden ist, und fügen Sie dort Ihr vollständiges Velo-Snippet ein, oberhalb aller Analyse- und Werbe-Tags. Fügen Sie es beim Pages Router in <Head> in pages/_document.tsx ein und legen Sie diese Datei an, falls das Projekt keine hat. Das Snippet ist in dieser Form gültiges JSX. Laden Sie es nicht in useEffect und nicht mit next/script in der Standardstrategie: Beides lädt es erst, wenn Ihre anderen Tags bereits auslösen können. Deployen Sie und testen Sie eine über einen Link erreichte Seite sowie ein vollständiges Neuladen.

   Next.js · Root-Layout

   // 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

   Veröffentlichen und die Live-Website prüfen

   Speichern und veröffentlichen Sie die Änderung mit den Schritten Ihrer Plattform oben und leeren Sie danach den Website- oder CDN-Cache. Öffnen Sie die veröffentlichte URL in einer neuen Browsersitzung. Prüfen Sie das Banner dort, wo Ihre Regionsregeln es verlangen, testen Sie Zustimmen und Ablehnen und kontrollieren Sie, dass die Consent-Standardwerte und -Updates greifen, bevor Ihre Mess-Tags laufen. Prüfen Sie zum Schluss, ob die Website in Ihrem Velo-Dashboard als installiert angezeigt wird.