Comment ajouter un bandeau cookies à une application SvelteKit

Où placer la balise dans SvelteKit ?

Le modèle de page de SvelteKit est src/app.html. Le marqueur %sveltekit.head% est remplacé par les éléments <link> et <script> dont l’application a besoin, plus le contenu des <svelte:head>. Placez la balise au-dessus, pour qu’elle figure dans le HTML de chaque route avant les scripts de SvelteKit :

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Pour garder la clé hors du fichier, écrivez data-site="%sveltekit.env.PUBLIC_COOKIEQUIET_SITE%". SvelteKit remplace le marqueur au moment du rendu par une variable d’environnement publique, et par une chaîne vide si elle manque. Avec une Content Security Policy à base de nonce, ajoutez nonce="%sveltekit.nonce%" à la balise, et autorisez https://cookiequiet.com dans script-src et connect-src.

Ne chargez pas la balise avec <svelte:head> dans un layout. Ce contenu est placé par l’application parmi ses propres éléments du head, alors que app.html est le seul modèle qui place le script avant tout le reste sur chaque route.

Comment bloquer mes balises jusqu’au consentement ?

Balises marquées dans app.html. Collez-les sous la balise Cookiequiet et modifiez leur balise d’ouverture. Cookiequiet les exécute quand la catégorie est accordée, et d’emblée lors des visites suivantes où le choix enregistré l’inclut :

html
<script type="text/plain" data-cq-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-cq-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Le code de base du pixel Meta reçoit data-cq-category="marketing", sans son image noscript ; le guide Meta Pixel explique pourquoi. Pour garder plutôt la balise Google en Consent Mode, voir le guide Google Analytics 4.

Scripts créés en JavaScript. Les gestionnaires de balises et les widgets qui injectent des traceurs à l’exécution sont retenus par le bloqueur automatique (activé par data-auto-block="1") quand le traceur fait partie des quelque 80 qu’il connaît, jusqu’à ce que la catégorie soit accordée.

Comment les composants connaissent-ils le choix du visiteur ?

Cookiequiet émet un événement cq:consent sur window chaque fois qu’il applique un choix : un choix enregistré au chargement de la page, un nouveau choix après un clic, et toutes les catégories d’un coup dans les régions où le ciblage géographique n’affiche pas le bandeau. event.detail.categories liste les catégories accordées. Un store l’enveloppe :

js
// src/lib/consent.js
import { readable } from "svelte/store";
import { browser } from "$app/environment";
​
export const consent = readable([], (set) => {
  if (!browser) return;
  const stored = window.Cookiequiet && window.Cookiequiet.get();
  if (stored) set(stored.c);
  const onConsent = (e) => set(e.detail.categories);
  window.addEventListener("cq:consent", onConsent);
  return () => window.removeEventListener("cq:consent", onConsent);
});

Dans un composant, ne rendez le contenu embarqué que lorsque la catégorie figure dans la liste :

svelte
<script>
  import { consent } from "$lib/consent";
</script>
​
{#if $consent.includes("marketing")}
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Video"></iframe>
{:else}
  <button onclick={() => window.Cookiequiet.showPreferences()}>Allow videos</button>
{/if}

Et la navigation côté client ?

SvelteKit navigue sans rechargement complet après la première page. La balise s’exécute une fois par chargement complet, le choix reste appliqué et le bandeau ne réapparaît pas. Les scripts marqués sont activés au chargement et après chaque choix : gardez-les donc dans app.html, pas dans les composants de route. Si votre outil de mesure a besoin d’une page vue par route, afterNavigate de $app/navigation, appelé dans le +layout.svelte racine, s’exécute au montage et après chaque navigation : lisez-y get(consent) (get vient de svelte/store) et n’envoyez la page vue que lorsqu’il inclut analytics.

Comment ajouter le lien Préférences de cookies ?

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Cookiequiet écoute les clics sur ce lien partout dans la page et ouvre le centre de préférences.

Comment tester ?

1. Lancez vite dev ou construisez puis prévisualisez, et ouvrez l’application dans une fenêtre de navigation privée.
2. Affichez le code source de la page : le script Cookiequiet vient avant les scripts de SvelteKit.
3. Cliquez sur Tout refuser. Les cookies sont cq_consent et vos cookies de session, rien de Google ni de Meta.
4. Effacez les cookies, cliquez sur Tout accepter, rechargez, naviguez entre les routes : les balises s’exécutent et le choix tient.
5. Consultez le registre des consentements dans le tableau de bord.

Les pages prérendues et les adaptateurs (adapter-static, adapter-node, adapter-vercel) utilisent tous le même modèle, rien ne change donc d’un adaptateur à l’autre. Cookiequiet est gratuit pour un site, ciblage géographique compris ; Starter coûte 3 € par site et par mois, et les pages vues sont illimitées dans toutes les offres.