Consentl

Consentl com Nuxt

Adicione o loader do Consentl ao Nuxt 3 e 4 com app.head e tagPriority 0, para que seja apresentado antes de qualquer outro script.

Loader em primeiro lugar no <head>
Sim

O loader tem de ser o primeiro script no <head> e síncrono. O gestor de head do Nuxt (Unhead) ordena as tags do <head> por peso; os pesos mais baixos são apresentados primeiro:

Tag Peso
charset −20
viewport −15
title 10
script assíncrono 30
script síncrono 50
stylesheet 60
entrada de módulo Nuxt 80

tagPriority: 0 coloca o loader antes de qualquer outro script. "critical" (peso 42) ficaria ainda depois dos scripts assí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 pedido (@nuxtjs/i18n)

Utilize as mesmas opções em 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 }],
});

Mudar o idioma no cliente não recarrega o banner; o novo idioma aplica-se no próximo carregamento completo da página.

Outras tags (app.head ou useHead)

Atribua a cada tag que tenha de aguardar o consentimento type: "text/plain" e a respetiva categoria do Consentl. O Nuxt escreve-a tal como está, o navegador não a transfere e o Consentl executa-a uma vez após o consentimento:

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

Uma tag simples { src, async: true } também é retida no plano Business e só é executada uma vez, embora o Nuxt acrescente uma segunda cópia dela durante o arranque da página, mas o navegador transfere-a antes do consentimento. No nosso teste (Nuxt 4.6, uma tag Google): tag async simples, um pedido antes do consentimento e uma execução depois; type: "text/plain", nenhum pedido antes do consentimento e uma execução depois.

Verificar que funciona

Veja o código-fonte da página: o loader é o primeiro <script> no <head>. Depois, siga as verificações em Qualquer site. A navegação do lado do cliente não precisa de mais nada, e os dados de página do Nuxt (__NUXT_DATA__, window.__NUXT__) nunca são retidos. Testado com Nuxt 4.6.

O Consent Mode exige o plano Pro ou superior e o bloqueio automático de rastreadores conhecidos o plano Business. As tags escritas no HTML da página (por exemplo, através de app.head) são pedidas antes do consentimento, a menos que as marque como indicado em Outras tags (consulte também Qualquer site).

Limitações

  • Não acrescente o loader uma segunda vez a partir de um componente ou plugin: tem de carregar uma vez por documento.
  • Se enviar uma Content Security Policy, permita https://api.consentl.com (consulte Qualquer site).

Com dificuldades? Escreva para support@consentl.com — respondemos em inglês nos dias úteis.