Consentl

Consentl con Nuxt

Añada el cargador de Consentl a Nuxt 3 y 4 con app.head y tagPriority 0, para que se genere antes que cualquier otro script.

Cargador el primero en el <head>
Sí

El cargador debe ser el primer script del <head> y síncrono. El gestor del head de Nuxt (Unhead) ordena las etiquetas del <head> por peso; los pesos más bajos se generan primero:

Etiqueta Peso
charset −20
viewport −15
title 10
script asíncrono 30
script síncrono 50
hoja de estilos 60
entrada de módulo de Nuxt 80

tagPriority: 0 coloca el cargador antes que cualquier otro script. "critical" (peso 42) seguiría quedando después de los scripts asíncronos.

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

Idioma por solicitud (@nuxtjs/i18n)

Utilice las mismas opciones en 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 }],
});

Cambiar el idioma en el lado del cliente no recarga el banner; el nuevo idioma se aplica en la siguiente carga completa de página.

Otras etiquetas (app.head o useHead)

Asigne a cada etiqueta que deba esperar el consentimiento type: "text/plain" y su categoría de Consentl. Nuxt la escribe tal cual, el navegador no la descarga y Consentl la ejecuta una vez después del consentimiento:

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

Una etiqueta simple { src, async: true } también se retiene en el plan Business, y solo se ejecuta una vez aunque Nuxt añada una segunda copia mientras se inicia la página, pero el navegador la descarga antes del consentimiento. En nuestra prueba (Nuxt 4.6, una etiqueta de Google): etiqueta async simple, una solicitud antes del consentimiento y una ejecución después; type: "text/plain", ninguna solicitud antes del consentimiento y una ejecución después.

Comprobar que funciona

Vea el código fuente de la página: el cargador es el primer <script> del <head>. Después, siga las comprobaciones de Cualquier sitio web. La navegación en el lado del cliente no necesita nada más, y los datos de página de Nuxt (__NUXT_DATA__, window.__NUXT__) nunca se retienen. Probado con Nuxt 4.6.

Consent Mode requiere el plan Pro o superior; el bloqueo automático de rastreadores conocidos, el plan Business. Las etiquetas escritas en el HTML de la página (por ejemplo, mediante app.head) se solicitan antes del consentimiento, salvo que las marque como se muestra en Otras etiquetas (consulte también Cualquier sitio web).

Limitaciones

  • No añada el cargador una segunda vez desde un componente o plugin: debe cargarse una vez por documento.
  • Si envía una Content Security Policy, permita https://api.consentl.com (consulte Cualquier sitio web).

¿Se ha atascado? Escriba a support@consentl.com: respondemos en inglés en días laborables.