Comment ajouter un bandeau cookies à une application Vue 3

Où placer la balise dans une application Vue ?

Une application Vue 3 créée avec create-vue utilise Vite, dont le point d’entrée est index.html à la racine du projet. Collez la balise dans son head, au-dessus du script de module qui charge votre application :

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cookiequiet.com/cq.js" data-site="%VITE_COOKIEQUIET_SITE%" data-consent-mode="1" data-auto-block="1" defer></script>
    <title>My app</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Vite remplace %VITE_COOKIEQUIET_SITE% par la variable de votre fichier .env et laisse le texte inchangé quand la variable n’est pas définie : vérifiez donc le fichier construit, ou écrivez la clé directement. Les scripts de module s’exécutent après l’analyse du document, dans l’ordre du document avec les scripts différés : cq.js, placé au-dessus du script d’entrée, s’exécute donc avant votre application.

La balise reste dans le HTML : ne l’ajoutez pas depuis un composant et ne la bundlez pas. Elle lit ses réglages dans sa propre balise et doit s’exécuter avant les balises qu’elle contrôle. Si vous utilisez Nuxt plutôt que Vue seul, suivez le guide Nuxt.

Comment bloquer mes balises jusqu’au consentement ?

Collez les balises de suivi sous la balise Cookiequiet dans index.html et modifiez leur balise d’ouverture :

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>

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. Pour que la balise Google continue plutôt de se charger en Consent Mode, voir le guide Google Analytics 4. Les scripts et iframes que votre code ou une bibliothèque crée à l’exécution sont retenus par le bloqueur automatique quand ils viennent de l’un des quelque 80 traceurs qu’il connaît.

Comment les composants lisent-ils le choix ?

Cookiequiet émet un événement cq:consent sur window chaque fois qu’il applique un choix : un choix enregistré au chargement, un nouveau choix après un clic, et toutes les catégories dans les régions où le ciblage géographique n’affiche pas le bandeau. event.detail.categories liste les catégories accordées ; window.Cookiequiet.get() renvoie le choix en vigueur (catégories dans c, a: "geo" là où aucun bandeau n’est affiché) ou null tant qu’aucun choix ne s’applique. Un composable :

ts
// src/composables/useConsent.ts
import { ref } from "vue";
​
const cq = (window as any).Cookiequiet;
const granted = ref<string[]>(cq?.get()?.c ?? []);
​
window.addEventListener("cq:consent", (e) => {
  granted.value = (e as CustomEvent).detail.categories;
});
​
export function useConsent() {
  return granted;
}

Dans un composant :

vue
<script setup lang="ts">
import { useConsent } from "@/composables/useConsent";
const granted = useConsent();
const openPreferences = () => (window as any).Cookiequiet.showPreferences();
</script>
​
<template>
  <iframe v-if="granted.includes('marketing')" src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Video"></iframe>
  <button v-else @click="openPreferences">Allow videos</button>
</template>

Et les changements de route ?

Vue Router change l’URL sans recharger la 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 index.html plutôt que dans des composants. Pour les pages vues par route, utilisez un hook global after, que Vue Router appelle après chaque navigation :

ts
// src/router/index.ts
import { useConsent } from "@/composables/useConsent";
const granted = useConsent();
​
router.afterEach((to) => {
  if (granted.value.includes("analytics")) sendPageView(to.fullPath); // votre appel de mesure d’audience
});

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

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

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

Comment tester ?

1. Lancez vite build puis vite preview, et affichez le code source de la page : cq.js est le premier script.
2. Ouvrez l’application dans une fenêtre de navigation privée et cliquez sur Tout refuser : les cookies sont cq_consent et les vôtres.
3. Effacez les cookies, cliquez sur Tout accepter, rechargez : les balises marquées s’exécutent. Changez de route et vérifiez les pages vues.
4. Ouvrez le registre des consentements dans le tableau de bord.

Une Content Security Policy doit autoriser https://cookiequiet.com dans script-src et connect-src. Cookiequiet est gratuit pour un site, ciblage géographique compris ; Starter coûte 3 € par site et par mois, sans limite de pages vues dans aucune offre.