Velo in
Astro einbinden.
Installieren Sie das Velo-Cookie-Banner und Google Consent Mode v2 auf Astro mit einer Zeile im gemeinsamen Layout. Die meisten Installationen dauern ein paar Minuten, wenn Sie bereits Zugriff auf den Code der Website haben. Wenn Sie Google Tag Manager nutzen, finden Sie diesen Weg ebenfalls auf dieser Seite.
Anleitung und Bildquellen geprüft am 7. November 2026.
Eine Zeile
ins Layout einfügen.
Fügen Sie das Snippet Ihrer Website in den websiteweiten head-Bereich ein, veröffentlichen Sie und testen Sie das Ergebnis. Wenn Ihre Mess-Tags bereits über Google Tag Manager laufen, nehmen Sie den Weg unten.
Sie nutzen bereits Google Tag Manager? Ohne Code direkt dort einrichten ↓
Drei Schritte · etwa fünf Minuten
-
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.
<script src="https://cdn.veloconsent.com/v1/velo.js" data-api="https://app.veloconsent.com" data-velo-site="your-site-id" async></script> -
02
In das gemeinsame Layout einfügen
Fügen Sie im Layout, das alle Seiten teilen, meist src/layouts/Layout.astro, Ihr vollständiges Velo-Snippet in <head> ein, oberhalb aller Analyse- und Werbe-Tags, und ergänzen Sie is:inline am Script-Tag, damit Astro es unverändert lässt. Wenn das Layout <ClientRouter /> nutzt, ersetzt Astro bei jeder Navigation den Body, wodurch das Banner verschwindet: Ergänzen Sie im selben Head ein is:inline-Script, das #velo-banner-host und #velo-reopener-host bei astro:before-swap speichert und bei astro:after-swap an document.body anhängt. Bauen und deployen Sie anschließend.
Astro · gemeinsames Layout
<!-- 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>Geprüfte Konfigurationsreferenz · 7. November 2026 Konfigurationsreferenz, abgeglichen mit der Dokumentation der Plattform. Kein Screenshot aus dem Admin-Bereich.
Dokumentation der Plattform ↗ -
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.
Live-Aufnahme der Oberfläche · 23. September 2026 Das echte Banner auf veloconsent.com, aufgenommen am 23. September 2026. Texte, Layout und Regionseinstellungen Ihres Banners können abweichen.
Velo-Live-Website ↗In voller Größe ansehen ↗
Nutzen Sie ClientRouter? Astro ersetzt bei jeder Navigation den gesamten Body der Seite, wodurch das Banner und die Schaltfläche zum erneuten Öffnen verschwinden. Ergänzen Sie das kurze zweite Script aus Schritt 2, dann bleiben beide. Ohne ClientRouter lädt jeder Link die Seite vollständig neu, und das Script ist nicht nötig.
Sie vergleichen noch? Sehen Sie alle unterstützten Plattformen.
Sie nutzen Tag Manager?
Dann ohne Code.
Wenn Google Tag Manager bereits auf Ihrer Website läuft, ist das der einfachste Weg, Velo einzubinden. Sie müssen keinen Code anfassen, es sind vier kurze Schritte, und alle Ihre Tags bleiben an einem Ort.
- 01
Velo zu Tag Manager hinzufügen
Öffnen Sie die Velo-Vorlage, klicken Sie auf Add to workspace und wählen Sie Ihren Container.
Velo-Vorlage öffnen ↗ - 02
Site-ID einfügen
Öffnen Sie in Tag Manager Tags und klicken Sie auf New. Klicken Sie auf Tag Configuration, wählen Sie Velo CMP und fügen Sie Ihre Site-ID ein. Sie finden sie in Ihrem Velo-Dashboard. Alles andere lassen Sie unverändert.
- 03
Als Erstes laden
Klicken Sie auf Triggering, wählen Sie Consent Initialization – All Pages und klicken Sie auf Save. So startet Velo vor Ihren anderen Tags.
- 04
Veröffentlichen und prüfen
Klicken Sie auf Submit und dann auf Publish. Preview allein schaltet Velo nicht live. Öffnen Sie danach Ihre Website in einem privaten Fenster, testen Sie das Banner und prüfen Sie, ob die Website in Ihrem Velo-Dashboard als installiert angezeigt wird.
Sie nutzen ClientRouter? Das kurze Skript aus den Astro-Schritten oben brauchen Sie trotzdem, sonst verschwindet das Banner, wenn Besucher die Seite wechseln.
Fragen zu Astro,
beantwortet.
Was Teams bei der Installation auf Astro zuerst fragen.
Für welche Astro-Websites gilt das?
Jedes Astro-Projekt mit gemeinsamem Layout, statisch oder serverseitig gerendert, denn das Tag steht im HTML, das das Layout ausgibt. Wir haben die Schritte auf Astro 7 mit statischer Ausgabe getestet.
Muss ich is:inline ergänzen?
Das ist die sichere Wahl. Astro lässt jedes Script mit anderen Attributen als src unverändert, das Snippet bleibt also ohnehin intakt, und is:inline macht das ausdrücklich. Lassen Sie die data-Attribute genau so, wie Ihr Dashboard sie anzeigt.
Das Banner verschwindet, wenn ich auf einen Link klicke.
Das liegt daran, dass ClientRouter beim Navigieren den Body der Seite ersetzt. Ergänzen Sie das zweite Script aus Schritt 2 im selben Head, dann werden das Banner und die Schaltfläche zum erneuten Öffnen auf jede neue Seite übernommen. transition:persist von Astro hilft hier nicht, weil Velo diese Elemente erst nach dem Laden der Seite hinzufügt.
Meine Website hat mehr als ein Layout.
Fügen Sie das Snippet in das Basis-Layout ein, das die anderen umschließen. Wenn Ihre Layouts keines teilen, ergänzen Sie es in jedem. Velo ignoriert eine zweite Kopie auf derselben Seite, prüfen Sie aber, ob jeder Bereich der Website das Banner zeigt.
Wird die Website dadurch langsamer?
Das Snippet aus dem Dashboard lädt asynchron. Wie bei jedem Skript sollten Sie die Auswirkung auf Ihre Website messen und die Reihenfolge Ihrer Tags prüfen. Asynchrones Laden allein garantiert nicht, dass die Consent-Standardwerte vor anderen Tags greifen.
Kann ein KI-Assistent das für mich erledigen?
Ja. Kopieren Sie den Prompt aus „Mit Agenten installieren“ direkt darunter in Claude, ChatGPT, Cursor oder den Assistenten, den Sie ohnehin nutzen. Er enthält die Schritte dieser Seite, die Reihenfolge, in der die Tags laden müssen, und die Prüfungen, die der Agent durchführen muss, bevor er Ihnen meldet, dass alles erledigt ist.
Oder übergeben Sie es
an einen Agenten.
Kopieren Sie den Prompt in Claude, ChatGPT, Cursor oder den Assistenten, den Sie ohnehin nutzen. Er enthält alles von dieser Seite: beide Wege, die Reihenfolge, in der die Tags laden müssen, und die Prüfungen, die zeigen, dass alles funktioniert.
Fügen Sie diesen Prompt in Ihren Assistenten ein und geben Sie dann Ihre Site-ID sowie das vollständige Installations-Snippet oder die GTM-Einstellungen aus Ihrem Velo-Dashboard an.
Ihr Agent liest Webseiten? Verweisen Sie ihn auf veloconsent.com/llms.txt und /install.md, dort steht derselbe Kontext als reiner Text.
Aus dem Blog.
© 2026
