Consentl

Consentl z Nuxt

Dodaj skrypt ładujący Consentl do Nuxt 3 i 4 za pomocą app.head i tagPriority 0, aby był renderowany przed każdym innym skryptem.

Skrypt ładujący jako pierwszy w <head>
Tak

Skrypt ładujący musi być pierwszym skryptem w <head> i musi być synchroniczny. Menedżer sekcji head w Nuxt (Unhead) sortuje tagi <head> według wagi; tagi o niższej wadze są renderowane jako pierwsze:

Tag Waga
charset −20
viewport −15
title 10
skrypt async 30
skrypt synchroniczny 50
arkusz stylów 60
punkt wejścia modułu Nuxt 80

tagPriority: 0 umieszcza skrypt ładujący przed każdym innym skryptem. "critical" (waga 42) znalazłby się nadal po skryptach async.

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

Język dla każdego żądania (@nuxtjs/i18n)

W app.vue należy użyć tych samych opcji:

const { locale } = useI18n();
useHead({
  script: [{ src: computed(() => `https://api.consentl.com/v1/loader.js?k=${key}&l=${locale.value}`), tagPosition: "head", tagPriority: 0 }],
});

Zmiana języka po stronie klienta nie przeładowuje banera; nowy język obowiązuje od następnego pełnego załadowania strony.

Inne tagi (app.head lub useHead)

Każdemu tagowi, który musi czekać na zgodę, należy nadać type: "text/plain" i jego kategorię Consentl. Nuxt zapisuje go bez zmian, przeglądarka go nie pobiera, a Consentl uruchamia go jeden raz po wyrażeniu zgody:

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

Zwykły tag { src, async: true } również jest wstrzymywany w planie Business i uruchamia się tylko raz, mimo że Nuxt dodaje jego drugą kopię podczas uruchamiania strony, ale przeglądarka pobiera go przed wyrażeniem zgody. W naszym teście (Nuxt 4.6, tag Google): zwykły tag async – jedno żądanie przed zgodą i jedno uruchomienie po niej; type: "text/plain" – brak żądania przed zgodą i jedno uruchomienie po niej.

Sprawdzenie działania

Należy wyświetlić źródło strony: skrypt ładujący jest pierwszym <script> w <head>. Następnie należy wykonać kontrole opisane w poradniku Każda strona internetowa. Nawigacja po stronie klienta nie wymaga niczego dodatkowego, a dane strony Nuxt (__NUXT_DATA__, window.__NUXT__) nigdy nie są wstrzymywane. Przetestowano z Nuxt 4.6.

Consent Mode wymaga planu Pro lub wyższego, a automatyczne blokowanie znanych narzędzi śledzących – planu Business. Tagi zapisane w kodzie HTML strony (na przykład przez app.head) są pobierane przed wyrażeniem zgody, chyba że zostaną oznaczone tak, jak pokazano w sekcji Inne tagi (zob. też Każda strona internetowa).

Ograniczenia

  • Nie należy dodawać skryptu ładującego po raz drugi z komponentu ani wtyczki: musi być ładowany raz na dokument.
  • Jeżeli wysyłają Państwo nagłówek Content Security Policy, należy zezwolić na https://api.consentl.com (zob. Każda strona internetowa).

Potrzebują Państwo pomocy? Prosimy pisać na adres support@consentl.com — odpowiadamy po angielsku w dni robocze.