Ajouter une bannière de consentement aux cookies sur votre site

Au Québec, un bandeau qui se contente d’annoncer l’utilisation de cookies ne suffit plus. Les cookies et scripts qui permettent d’identifier, de localiser ou de profiler un visiteur, comme la mesure d’audience, la publicité ou les pixels de réseaux sociaux, doivent rester désactivés tant que le visiteur ne les a pas acceptés. Ce guide s’adresse aux propriétaires de sites Web et présente une démarche pratique.

Ce guide fournit de l’information générale et ne constitue pas un avis juridique. Pour une situation précise, consultez une personne qualifiée en protection des renseignements personnels.

Dans cette page

Ce que la Loi 25 exige

Depuis le 22 septembre 2023, l’article 8.1 de la Loi sur la protection des renseignements personnels dans le secteur privé encadre les technologies qui permettent d’identifier, de localiser ou de profiler une personne. Ces fonctions doivent être désactivées par défaut : le visiteur doit être informé de leur utilisation et des moyens de les activer, et elles ne s’activent qu’avec son consentement.

Cookies strictement nécessaires : une session, un panier, une protection de sécurité ou la mémorisation du choix de consentement n’exigent pas de consentement. Décrivez-les tout de même dans votre politique de cookies ou de confidentialité.
Autres cookies et scripts : la mesure d’audience, la publicité, le reciblage et les contenus intégrés qui déposent des traceurs ne se chargent qu’après acceptation.

Le consentement doit être manifeste, libre, éclairé et donné à des fins précises. Concrètement :

proposez des choix par catégorie, par exemple « Mesure d’audience » et « Publicité » ;
rendez le refus aussi simple que l’acceptation, avec un bouton Refuser aussi visible que le bouton Accepter ;
n’utilisez aucune case précochée, et ne considérez pas la poursuite de la navigation ou le défilement comme un consentement ;
permettez au visiteur de modifier ou de retirer son choix en tout temps, par exemple avec un lien permanent dans le pied de page ;
conservez une trace des consentements obtenus : date, choix exprimés et version de la politique affichée.

Si votre site accueille des visiteurs de l’Union européenne, le RGPD et la directive « vie privée et communications électroniques » (ePrivacy) exigent aussi un consentement préalable pour les cookies non nécessaires. Vérifiez les exigences de chaque territoire où vous visez une clientèle.

Mettre en place le consentement

Inventoriez les cookies et les scripts. Ouvrez votre site dans une fenêtre de navigation privée, puis consultez les outils de développement du navigateur : l’onglet de stockage montre les cookies et l’onglet réseau, les services contactés. N’oubliez pas les extensions, le thème, le gestionnaire de balises, les vidéos, les cartes et les outils de clavardage.
Classez chaque élément. Pour chaque cookie ou script, notez sa finalité, son fournisseur et sa durée, puis décidez s’il est strictement nécessaire au fonctionnement demandé par le visiteur. En cas de doute, traitez-le comme non nécessaire.
Choisissez un outil de consentement. Une plateforme de gestion du consentement ou une extension adaptée à votre CMS évite bien des erreurs. Vérifiez qu’elle bloque réellement les scripts avant le consentement, qu’elle offre un bouton Refuser et des catégories, qu’elle permet de rouvrir les choix, qu’elle conserve les consentements et qu’elle s’affiche en français et en anglais si votre site est bilingue. Une implémentation sur mesure est possible, mais elle demande la même rigueur.
Chargez les scripts non nécessaires seulement après le consentement. Retirez-les du code de la page et laissez l’outil de consentement les ajouter lorsque la catégorie correspondante est acceptée. Certains services d’analyse ou de publicité offrent un mode de consentement : suivez leur documentation actuelle.
Mettez à jour votre politique. Décrivez les catégories, les finalités, les fournisseurs, les durées de conservation et la façon de modifier son choix. Faites un lien vers cette politique depuis la bannière et le pied de page.
Testez avec un navigateur neuf. Dans une fenêtre privée, vérifiez qu’aucun cookie non nécessaire n’est déposé et qu’aucun service de suivi n’est contacté avant un choix. Refusez, puis vérifiez que rien ne se charge. Acceptez ensuite, puis confirmez que seules les catégories choisies se chargent et que le choix peut être modifié. Répétez le test sur mobile et dans chaque langue du site.

Exemple minimal sur mesure

L’exemple suivant charge un script de mesure d’audience seulement après un consentement enregistré. L’adresse https://analytics.example.com/script.js et le lien vers la politique sont des exemples à remplacer par les vôtres. Placez ce code juste avant la balise </body> de vos gabarits.

HTML

<div id="consent-banner" hidden>
  <p>
    Nous utilisons des cookies de mesure d’audience seulement si vous les
    acceptez.
    <a href="/politique-de-cookies/">En savoir plus</a>
  </p>
  <button type="button" data-consent="refuse">Refuser</button>
  <button type="button" data-consent="accept">Accepter</button>
</div>
<button type="button" id="consent-settings">Paramètres des cookies</button>

<script>
  (function () {
    var KEY = "consent-analytics";
    var banner = document.getElementById("consent-banner");
    var loaded = false;

    function loadAnalytics() {
      if (loaded) return;
      loaded = true;
      var script = document.createElement("script");
      script.src = "https://analytics.example.com/script.js";
      script.async = true;
      document.head.appendChild(script);
    }

    function readChoice() {
      try {
        return localStorage.getItem(KEY);
      } catch (error) {
        return null;
      }
    }

    function saveChoice(value) {
      try {
        localStorage.setItem(KEY, value);
      } catch (error) {}
    }

    var choice = readChoice();
    if (choice === "accept") {
      loadAnalytics();
    } else if (choice !== "refuse") {
      banner.hidden = false;
    }

    banner.addEventListener("click", function (event) {
      var button = event.target.closest("[data-consent]");
      if (!button) return;
      var value = button.getAttribute("data-consent");
      saveChoice(value);
      banner.hidden = true;
      if (value === "accept") loadAnalytics();
    });

    document
      .getElementById("consent-settings")
      .addEventListener("click", function () {
        banner.hidden = false;
      });
  })();
</script>

Tant qu’aucun choix n’est enregistré, la bannière s’affiche et le script d’analyse n’est pas chargé. Le bouton Paramètres des cookies rouvre la bannière pour modifier le choix. Si le visiteur retire son consentement, le script déjà chargé reste actif jusqu’au rechargement de la page ; supprimez aussi les cookies du service selon sa documentation.

Ce choix mémorisé dans le navigateur relève du stockage nécessaire, mais il ne constitue pas une preuve de consentement : prévoyez un registre conservé de votre côté ou utilisez un outil qui le fait. Cet exemple ne gère qu’une catégorie ; ajoutez des choix distincts pour chaque catégorie supplémentaire.

Références

Pour une question sur l’hébergement de votre site chez Nuagerie, consultez la page Assistance. Pour toute question générale, consultez notre page Nous joindre.