Consentl

Consentl con Nuxt

Aggiunga il loader di Consentl a Nuxt 3 e 4 con app.head e tagPriority 0, così viene generato prima di ogni altro script.

Loader per primo nel <head>
Sì

Il loader deve essere il primo script nel <head> e sincrono. Il gestore del head di Nuxt (Unhead) ordina i tag del <head> in base al peso; i pesi più bassi vengono generati per primi:

Tag Peso
charset −20
viewport −15
title 10
script asincrono 30
script sincrono 50
foglio di stile 60
entry dei moduli Nuxt 80

tagPriority: 0 colloca il loader prima di ogni altro script. "critical" (peso 42) verrebbe comunque dopo gli script asincroni.

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

Lingua per richiesta (@nuxtjs/i18n)

Usi le stesse opzioni 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 }],
});

Il cambio di lingua sul client non ricarica il banner; la nuova lingua si applica al successivo caricamento completo della pagina.

Altri tag (app.head o useHead)

Assegni a ogni tag che deve attendere il consenso type: "text/plain" e la sua categoria Consentl. Nuxt lo scrive così com'è, il browser non lo scarica e Consentl lo esegue una volta dopo il consenso:

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

Anche un tag semplice { src, async: true } viene trattenuto con il piano Business, ed eseguito una sola volta anche se Nuxt ne aggiunge una seconda copia durante l'avvio della pagina, ma il browser lo scarica prima del consenso. Nel nostro test (Nuxt 4.6, un tag Google): tag async semplice, una richiesta prima del consenso e un'esecuzione dopo; type: "text/plain", nessuna richiesta prima del consenso e un'esecuzione dopo.

Verificare che funzioni

Visualizzi il sorgente della pagina: il loader è il primo <script> nel <head>. Poi segua i controlli in Qualsiasi sito web. La navigazione lato client non richiede nulla di più, e i dati di pagina di Nuxt (__NUXT_DATA__, window.__NUXT__) non vengono mai trattenuti. Testato con Nuxt 4.6.

Consent Mode richiede il piano Pro o superiore, il blocco automatico dei tracker noti il piano Business. I tag scritti nell'HTML della pagina (ad esempio tramite app.head) vengono richiesti prima del consenso, a meno che lei non li contrassegni come mostrato in Altri tag (veda anche Qualsiasi sito web).

Limitazioni

  • Non aggiunga il loader una seconda volta da un componente o da un plugin: deve essere caricato una sola volta per documento.
  • Se invia una Content Security Policy, consenta https://api.consentl.com (veda Qualsiasi sito web).

Serve aiuto? Scriva a support@consentl.com: rispondiamo in inglese nei giorni lavorativi.