Mise en œuvre du consentement aux cookies

Découvrez comment mettre en œuvre le consentement aux cookies et l'intégrer avec Zenovay Analytics pour la conformité à la vie privée.

Avez-vous besoin d'une bannière de cookies?

Utilisation des cookies Zenovay

Mode	Stockage côté client	Consentement requis
Mode sans cookies	Aucun (IDs window-scoped en mémoire)	Généralement non
Mode par défaut	Un seul cookie first-party pour reconnaître les visiteurs récurrents	Peut être nécessaire

Zenovay est toujours sans cookies côté serveur: aucune adresse IP ou donnée personnelle n'est stockée. Le tableau ci-dessus concerne uniquement ce que le script de suivi écrit dans le navigateur du visiteur. Le mode sans cookies empêche le script d'écrire des cookies ou des entrées localStorage.

Quand le consentement est requis

Le consentement est généralement requis lorsque:

Utilisation de cookies persistants
Suivi inter-sessions
Identification des visiteurs récurrents
Collecte de données personnelles

Le consentement peut ne pas être requis lorsque:

Utilisation du mode sans cookies (pas de cookies)
Fonctionnalité strictement nécessaire
Statistiques agrégées anonymes

Mode sans cookies (pas de cookies)

Vous pouvez exécuter le script de suivi Zenovay en mode sans cookies, qui n'écrit rien dans le navigateur du visiteur. Il existe deux façons d'activer cette fonction.

Option 1: attribut de script. Ajoutez data-cookieless="true" à votre balise de script:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  data-cookieless="true"
  src="https://api.zenovay.com/z.js"
></script>

Option 2: paramètre du site Web. Ouvrez le tableau de bord de votre site Web, allez à Paramètres, et activez le curseur sans cookies (il apparaît dans les onglets Général et Avancé). L'onglet Général régénère également le snippet ci-dessus avec data-cookieless="true" déjà ajouté.

Mode sans cookies:

N'utilise pas de cookies ni localStorage (uniquement des IDs en mémoire window-scoped)
Ne crée pas d'identifiants persistants
Conforme légalement avant consentement selon ePrivacy pour le script de suivi Zenovay lui-même
Données légèrement moins précises sur les visiteurs récurrents (attendez-vous à environ 10-15% d'uniques en moins)

Les autres outils que vous chargez (Meta Pixel, Google Analytics, et similaires) définissent toujours leurs propres cookies et peuvent nécessiter un consentement indépendamment de ce paramètre.

Chargement conditionnel

Vérification de base du consentement

// Vérifier le consentement avant le chargement
function loadZenovayIfConsented() {
  const consent = localStorage.getItem('analytics_consent');

  if (consent === 'granted') {
    loadZenovay();
  } else if (consent === 'denied') {
    // Ne pas charger les analyses
  } else {
    showConsentBanner();
  }
}

function loadZenovay() {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.defer = true;
  document.head.appendChild(script);
}

// Exécuter au chargement de la page
loadZenovayIfConsented();

Bannière de consentement simple

<div id="cookie-banner" style="display: none;">
  <div class="cookie-content">
    <p>Nous utilisons des analyses pour améliorer votre expérience.</p>
    <button onclick="acceptCookies()">Accepter</button>
    <button onclick="declineCookies()">Refuser</button>
    <a href="/privacy">En savoir plus</a>
  </div>
</div>

<script>
function showConsentBanner() {
  document.getElementById('cookie-banner').style.display = 'block';
}

function acceptCookies() {
  localStorage.setItem('analytics_consent', 'granted');
  document.getElementById('cookie-banner').style.display = 'none';
  loadZenovay();
}

function declineCookies() {
  localStorage.setItem('analytics_consent', 'denied');
  document.getElementById('cookie-banner').style.display = 'none';
  // Chargement optionnel en mode sans cookies
  loadZenovayCookieless();
}

function loadZenovayCookieless() {
  // data-cookieless="true" indique au suivi d'utiliser uniquement
  // les IDs window-scoped en mémoire - pas de cookies, pas de localStorage.
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.setAttribute('data-cookieless', 'true');
  script.defer = true;
  document.head.appendChild(script);
}
</script>

Plateformes de consentement populaires

Intégration Cookiebot

// Attendre le consentement Cookiebot
window.addEventListener('CookiebotOnAccept', function() {
  if (Cookiebot.consent.statistics) {
    loadZenovay();
  }
});

// Gérer les modifications de consentement
window.addEventListener('CookiebotOnDecline', function() {
  // Consentement retiré - arrêter le suivi
  if (window.zenovay) {
    window.zenovay('disable');
  }
});

Configuration Cookiebot:

Ajouter Zenovay à la catégorie "Statistiques"
Définir le nom du cookie: zenovay_session
Définir le fournisseur: zenovay.com
Définir le type: HTTP
Définir l'expiration: Session ou 1 année

Intégration OneTrust

// Rappel de consentement OneTrust
function OptanonWrapper() {
  if (OnetrustActiveGroups.includes('C0002')) {
    // Cookies de performance consentis
    loadZenovay();
  } else {
    // Charger en mode sans cookies
    loadZenovayCookieless();
  }
}

Catégories OneTrust:

C0001: Strictement nécessaire
C0002: Performance (Zenovay)
C0003: Fonctionnel
C0004: Ciblage

Intégration Osano

// Rappel de consentement Osano
window.Osano.cm.addEventListener('osano-cm-consent-changed', function(event) {
  if (event.ANALYTICS === 'ACCEPT') {
    loadZenovay();
  }
});

Intégration Termly

// Rappel de consentement Termly
window.addEventListener('termly-consent-preferences-updated', function(e) {
  if (e.detail.analytics) {
    loadZenovay();
  }
});

Mode de consentement Google

Intégration

// Initialiser le mode de consentement Google
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('consent', 'default', {
  'analytics_storage': 'denied'
});

// Mettre à jour lors du consentement
function updateConsent(granted) {
  gtag('consent', 'update', {
    'analytics_storage': granted ? 'granted' : 'denied'
  });

  if (granted) {
    loadZenovay();
  }
}

Avec Zenovay

Utilisez l'approche de chargement conditionnel montrée ci-dessus pour charger Zenovay uniquement après la mise à jour du consentement via le mode de consentement Google:

// Charger Zenovay uniquement après l'octroi du consentement aux analyses
function updateConsent(granted) {
  gtag('consent', 'update', {
    'analytics_storage': granted ? 'granted' : 'denied'
  });

  if (granted) {
    const script = document.createElement('script');
    script.src = 'https://api.zenovay.com/z.js';
    script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
    script.defer = true;
    document.head.appendChild(script);
  }
}

Implémentation React

Contexte de consentement

// ConsentContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const ConsentContext = createContext();

export function ConsentProvider({ children }) {
  const [consent, setConsent] = useState(() => {
    return localStorage.getItem('analytics_consent') || 'pending';
  });

  const grantConsent = () => {
    localStorage.setItem('analytics_consent', 'granted');
    setConsent('granted');
  };

  const denyConsent = () => {
    localStorage.setItem('analytics_consent', 'denied');
    setConsent('denied');
  };

  return (
    <ConsentContext.Provider value={{ consent, grantConsent, denyConsent }}>
      {children}
    </ConsentContext.Provider>
  );
}

export const useConsent = () => useContext(ConsentContext);

Composant de bannière de consentement

// CookieBanner.js
import { useConsent } from './ConsentContext';

export function CookieBanner() {
  const { consent, grantConsent, denyConsent } = useConsent();

  if (consent !== 'pending') return null;

  return (
    <div className="cookie-banner">
      <p>Nous utilisons des cookies pour analyser le trafic du site Web.</p>
      <button onClick={grantConsent}>Accepter</button>
      <button onClick={denyConsent}>Refuser</button>
    </div>
  );
}

Analyses conditionnelles

// Analytics.js
import { useEffect } from 'react';
import { useConsent } from './ConsentContext';

export function Analytics({ websiteId }) {
  const { consent } = useConsent();

  useEffect(() => {
    if (consent === 'granted') {
      const script = document.createElement('script');
      script.src = 'https://api.zenovay.com/z.js';
      script.setAttribute('data-tracking-code', websiteId);
      script.defer = true;
      document.head.appendChild(script);
    } else if (consent === 'denied') {
      // Ne pas charger les analyses si le consentement est refusé.
      // Si vous voulez quand même un suivi minimal, chargez le script avec
      // data-cookieless="true" à la place (pas de cookies, pas de localStorage).
    }
  }, [consent, websiteId]);

  return null;
}

Implémentation Vue.js

<!-- CookieConsent.vue -->
<template>
  <div v-if="showBanner" class="cookie-banner">
    <p>Nous utilisons des cookies pour les analyses.</p>
    <button @click="accept">Accepter</button>
    <button @click="decline">Refuser</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const showBanner = ref(false);

onMounted(() => {
  const consent = localStorage.getItem('analytics_consent');
  if (!consent) {
    showBanner.value = true;
  } else if (consent === 'granted') {
    loadZenovay();
  }
});

function accept() {
  localStorage.setItem('analytics_consent', 'granted');
  showBanner.value = false;
  loadZenovay();
}

function decline() {
  localStorage.setItem('analytics_consent', 'denied');
  showBanner.value = false;
  loadZenovayCookieless();
}

function loadZenovay() {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}

function loadZenovayCookieless() {
  // data-cookieless="true" indique au suivi d'utiliser uniquement
  // les IDs window-scoped en mémoire - pas de cookies, pas de localStorage.
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.setAttribute('data-cookieless', 'true');
  document.head.appendChild(script);
}
</script>

Page de préférences de consentement

Permettez aux utilisateurs de modifier leurs préférences:

<div class="cookie-preferences">
  <h2>Préférences des cookies</h2>

  <div class="cookie-option">
    <label>
      <input type="checkbox" id="necessary" checked disabled>
      Cookies nécessaires (requis)
    </label>
    <p>Essentiels au fonctionnement du site Web.</p>
  </div>

  <div class="cookie-option">
    <label>
      <input type="checkbox" id="analytics">
      Cookies d'analyse
    </label>
    <p>Nous aider à comprendre comment les visiteurs utilisent notre site.</p>
  </div>

  <button onclick="savePreferences()">Enregistrer les préférences</button>
</div>

<script>
// Charger les préférences actuelles
document.getElementById('analytics').checked =
  localStorage.getItem('analytics_consent') === 'granted';

function savePreferences() {
  const analytics = document.getElementById('analytics').checked;
  localStorage.setItem('analytics_consent', analytics ? 'granted' : 'denied');

  // Recharger pour appliquer les modifications
  location.reload();
}
</script>

Journalisation du consentement

Suivre le consentement pour la conformité:

function logConsent(type, granted) {
  fetch('/api/consent-log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      type: type,
      granted: granted,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    })
  });
}

function acceptCookies() {
  logConsent('analytics', true);
  localStorage.setItem('analytics_consent', 'granted');
  loadZenovay();
}

Bonnes pratiques

Conception de la bannière

Langage clair: expliquez à quoi servent les cookies
Options équitables: accepter et refuser avec la même prominence
Pas de motifs sombres: ne pas tromper les utilisateurs pour qu'ils acceptent
Contrôle granulaire: permettre aux utilisateurs de choisir par catégories
Retrait facile: permettre de modifier les préférences

Technique

Ne pas charger avant le consentement: charger le suivi uniquement après le consentement
Respecter le retrait: arrêter le suivi lorsque le consentement est retiré
Mémoriser les préférences: ne pas demander à plusieurs reprises
Tester complètement: vérifier que le flux de consentement fonctionne

Conformité

Documenter le consentement: consigner quand le consentement est accordé/retiré
Révision régulière: mettre à jour à mesure que la réglementation change
Piste d'audit: conserver les dossiers pour la conformité

Dépannage

Le suivi est toujours actif après le refus

Vérifiez:

Script non codé en dur dans le HTML
Vérification du consentement avant tout suivi
Pas de problèmes de cache

La bannière s'affiche à plusieurs reprises