Consentl

Consentl avec Nuxt

Ajoutez le chargeur Consentl à Nuxt 3 et 4 avec app.head et tagPriority 0, afin qu’il soit rendu avant tous les autres scripts.

Chargeur en premier dans <head>
Oui

Le chargeur doit être le premier script dans <head> et être synchrone. Le gestionnaire de head de Nuxt (Unhead) trie les balises de <head> par poids ; les poids les plus faibles sont rendus en premier :

Balise Poids
charset −20
viewport −15
title 10
script asynchrone 30
script synchrone 50
feuille de style 60
point d’entrée des modules Nuxt 80

tagPriority: 0 place le chargeur avant tous les autres scripts. "critical" (poids 42) viendrait encore après les scripts asynchrones.

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

Langue par requête (@nuxtjs/i18n)

Utilisez les mêmes options dans 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 }],
});

Changer de langue côté client ne recharge pas la bannière ; la nouvelle langue s’applique au prochain chargement complet de page.

Autres balises (app.head ou useHead)

Attribuez à chaque balise qui doit attendre le consentement type: "text/plain" et sa catégorie Consentl. Nuxt l’écrit telle quelle, le navigateur ne la télécharge pas, et Consentl l’exécute une seule fois après le consentement :

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

Une balise simple { src, async: true } est également bloquée avec le forfait Business, et ne s’exécute qu’une seule fois même si Nuxt en ajoute une seconde copie pendant le démarrage de la page, mais le navigateur la télécharge avant le consentement. Dans notre test (Nuxt 4.6, une balise Google) : balise async simple, une requête avant le consentement et une exécution après ; type: "text/plain", aucune requête avant le consentement et une exécution après.

Vérifier le fonctionnement

Affichez le code source de la page : le chargeur est le premier <script> dans <head>. Suivez ensuite les vérifications de Tout site web. La navigation côté client ne nécessite rien de plus, et les données de page de Nuxt (__NUXT_DATA__, window.__NUXT__) ne sont jamais bloquées. Testé avec Nuxt 4.6.

Consent Mode nécessite le forfait Pro ou supérieur, le blocage automatique des traceurs connus le forfait Business. Les balises écrites dans le HTML de la page (par exemple via app.head) sont demandées avant le consentement, sauf si vous les marquez comme indiqué dans Autres balises (voir aussi Tout site web).

Limites

  • N’ajoutez pas le chargeur une seconde fois depuis un composant ou un plugin : il doit être chargé une fois par document.
  • Si vous envoyez une Content Security Policy, autorisez https://api.consentl.com (voir Tout site web).

Vous êtes bloqué ? Écrivez à support@consentl.com — nous répondons en anglais les jours ouvrables.