Consentl

Consentl met Nuxt

Voeg de Consentl-loader toe aan Nuxt 3 en 4 met app.head en tagPriority 0, zodat hij vóór elk ander script wordt gerenderd.

Loader als eerste in <head>
Ja

De loader moet het eerste script in <head> zijn en synchroon worden geladen. De head-manager van Nuxt (Unhead) sorteert <head>-tags op gewicht; lagere gewichten worden eerst gerenderd:

Tag Gewicht
charset −20
viewport −15
title 10
async-script 30
synchroon script 50
stylesheet 60
entry van Nuxt-module 80

tagPriority: 0 plaatst de loader vóór elk ander script. "critical" (gewicht 42) zou nog steeds na async-scripts komen.

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,
        },
      ],
    },
  },
});

Taal per verzoek (@nuxtjs/i18n)

Gebruik dezelfde opties 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 }],
});

Als de taal aan de clientkant wordt gewijzigd, wordt de banner niet opnieuw geladen; de nieuwe taal geldt bij de volgende keer dat de pagina volledig wordt geladen.

Andere tags (app.head of useHead)

Geef elke tag die op toestemming moet wachten type: "text/plain" en zijn Consentl-categorie. Nuxt schrijft hem zoals hij is, de browser downloadt hem niet en Consentl voert hem na de toestemming één keer uit:

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",
  },
],

Een gewone tag { src, async: true } wordt bij het plan Business ook tegengehouden en maar één keer uitgevoerd, ook al voegt Nuxt er tijdens het starten van de pagina een tweede kopie van toe, maar de browser downloadt hem vóór de toestemming. In onze test (Nuxt 4.6, een Google-tag): gewone async-tag, één verzoek vóór de toestemming en één uitvoering daarna; type: "text/plain", geen verzoek vóór de toestemming en één uitvoering daarna.

Controleren of het werkt

Bekijk de paginabron: de loader is het eerste <script> in <head>. Volg daarna de controles in Elke website. Navigatie aan de clientkant vereist niets extra's, en de paginagegevens van Nuxt (__NUXT_DATA__, window.__NUXT__) worden nooit tegengehouden. Getest met Nuxt 4.6.

Consent Mode vereist het plan Pro of hoger, automatische blokkering van bekende trackers het plan Business. Tags die in de HTML van de pagina staan (bijvoorbeeld via app.head), worden vóór de toestemming opgevraagd, tenzij u ze markeert zoals getoond in Andere tags (zie ook Elke website).

Beperkingen

  • Voeg de loader niet een tweede keer toe vanuit een component of plugin: hij moet één keer per document laden.
  • Als u een Content Security Policy verstuurt, sta dan https://api.consentl.com toe (zie Elke website).

Vastgelopen? Schrijf naar support@consentl.com — wij antwoorden op werkdagen in het Engels.