Consentl mit Nuxt

Fügen Sie den Consentl-Loader in Nuxt 3 und 4 mit app.head und tagPriority 0 ein, damit er vor allen anderen Skripten ausgegeben wird.

Loader als erstes im <head>

Ja

Der Loader muss das erste Skript im <head> und synchron sein. Der Head-Manager von Nuxt (Unhead) sortiert die <head>-Tags nach Gewicht; niedrigere Gewichte werden zuerst ausgegeben:

tagPriority: 0 setzt den Loader vor alle anderen Skripte. "critical" (Gewicht 42) käme immer noch nach asynchronen Skripten.

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: `https://api.consentl.com/v1/loader.js?k=${process.env.NUXT_PUBLIC_CONSENTL_SITE_KEY}&l=en`,
          tagPosition: "head",
          tagPriority: 0,
        },
      ],
    },
  },
});

Sprache pro Anfrage (@nuxtjs/i18n)

Verwenden Sie dieselben Optionen in app.vue:

const { locale } = useI18n();
useHead({
  script: [{ src: computed(() => `https://api.consentl.com/v1/loader.js?k=${key}&l=${locale.value}`), tagPosition: "head", tagPriority: 0 }],
});

Ein Sprachwechsel im Client lädt das Banner nicht neu; die neue Sprache gilt ab dem nächsten vollständigen Laden der Seite.

Andere Tags (app.head oder useHead)

Geben Sie jedem Tag, das auf eine Einwilligung warten muss, type: "text/plain" und seine Consentl-Kategorie. Nuxt schreibt es unverändert, der Browser lädt es nicht herunter, und Consentl führt es nach der Einwilligung einmal aus:

script: [
  { src: loader, tagPosition: "head", tagPriority: 0 }, // the Consentl loader, as above
  { src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX", type: "text/plain", "data-consentl": "analytics" },
  {
    innerHTML: "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-XXXXXXX');",
    type: "text/plain",
    "data-consentl": "analytics",
  },
],

Ein einfaches Tag { src, async: true } wird im Tarif Business ebenfalls zurückgehalten und nur einmal ausgeführt, obwohl Nuxt beim Start der Seite eine zweite Kopie davon hinzufügt, aber der Browser lädt es vor der Einwilligung herunter. In unserem Test (Nuxt 4.6, ein Google-Tag): einfaches async-Tag – eine Anfrage vor der Einwilligung und eine Ausführung danach; type: "text/plain" – keine Anfrage vor der Einwilligung und eine Ausführung danach.

Prüfen, ob es funktioniert

Sehen Sie sich den Seitenquelltext an: Der Loader ist das erste <script> im <head>. Folgen Sie dann den Prüfungen unter Jede Website. Die clientseitige Navigation braucht nichts weiter, und die Seitendaten von Nuxt (__NUXT_DATA__, window.__NUXT__) werden nie zurückgehalten. Getestet mit Nuxt 4.6.

Consent Mode erfordert den Tarif Pro oder höher, die automatische Blockierung bekannter Tracker den Tarif Business. Tags, die im HTML der Seite stehen (zum Beispiel über app.head), werden vor der Einwilligung angefordert, sofern Sie sie nicht wie unter Andere Tags gezeigt markieren (siehe auch Jede Website).

Einschränkungen

• Fügen Sie den Loader nicht ein zweites Mal aus einer Komponente oder einem Plugin hinzu: Er muss einmal pro Dokument geladen werden.
• Wenn Sie eine Content Security Policy senden, erlauben Sie https://api.consentl.com (siehe Jede Website).

Verwandte Anleitungen

• Next.js
• Astro
• React, Vue, Angular (SPA)

Kommen Sie nicht weiter? Schreiben Sie an support@consentl.com – wir antworten an Werktagen auf Englisch.