Barre d’acceptation ou de refus des cookies sur votre site web

J’avais auparavant créé une simple barre d’information de la politique des cookies dans ce tutoriel. Mais maintenant, ce n’est plus suffisant avec les nouvelles réglementations sur les données personnelles (RGPD) :

• Les visiteurs de votre site doivent pouvoir accepter / refuser l’utilisation des cookies
• Certains cookies doivent pouvoir être supprimés à la demande de l’internaute
• Les visiteurs doivent pouvoir revenir sur leur décision

A noter : tous les cookies ne sont pas concernés par cette réglementation. Seuls les cookies pouvant identifier une personne sont concernés (cookies de connexion, cookies d’analyse de trafic, cookies dédiés à la publicité …).

Voici donc ma démarche pour créer une barre parfaite d’acceptation / de refus des cookies :

• J’affiche ma barre d’information des cookies avec un lien vers ma page politique des cookies, un lien pour accepter les cookies et un lien pour les refuser.
• Lorsque je clique sur l’un des choix accepter ou refuser, je fais disparaitre ma barre, mais je garde un bouton au cas ou l’utilisateur souhaiterait revenir sur sa décision.
• Lorsque ‘utilisateur fait un choix, je crée un cookie pour stoquer son choix. Cela me permet de ne pas lui redemander cette information sur toutes les pages de mon site.
• SI l’utilisateur refuse les cookies, je supprime les cookies concernés et je bloque les scripts générant les cookies.

Commençons par afficher la barre des cookies

J’ai décidé de tout coder dans un seul fichier JavaScript. Cela me permet de rajouter cette barre des cookies facilement sur n’importe quel site.

Pour simplifier la gestion des cookies, j’utilise une petite librairie nommée js-cookie.

var policyurl = "https://dmp.com/policy-cookie",
    okcolor = "#7CCBDE",
    cookie_crunch = Cookies.get('cookie_crunch');

// ma barre de cookies en HTML
document.write("<div id='cookie-bar' style='display:none;z-index:10;position:absolute; bottom:0; left:0; width: 100%;  text-align: center; padding: 12px 0; margin:0;  background: rgba(244, 244, 244, 1);  color: #919191;  font: 14px arial, sans-serif;'><div style='display:inline-block;width:78%;margin:0; font-family: Arial;'>Ce site web utilise des cookies - <a id='cookie-policy' href='"+policyurl+"' style='color: #919191;font-weight:bold;'>Consulter notre politique des cookies !</a>. Vous pouvez stopper l'utilisation des cookies <span id='stop-cookie' style='text-decoration:underline;'>en cliquant ici</span>.</div><div style='width:20%;'><span id='agree' style='position:absolute;bottom:4px;right:4%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 6px;margin: 1px 8px 0 0;font-weight: 600;'>J'accepte</span></div></div>");

// je garde un bouton en dessous de ma barre des cookies, pour que l'utilisateur puisse modifier son choix
document.write("<span id='checkcookies' style='z-index:1;position:absolute;bottom:4px;right:2%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 6px;margin: 1px 8px 0 0;font-weight: 600;'>cookies</span>");

Enfin, je gère le choix de l’internaute, en fonction de son acceptation ou de son refus des cookies.

document.getElementById("checkcookies").addEventListener("click", showCookiebar);
function showCookiebar() {
  document.getElementById("cookie-bar").style.display = 'block';
}

//si l'utilisateur accepte
document.getElementById("agree").addEventListener("click", hideCookiebar);
function hideCookiebar() {
   // j'enregistre cette donnée dans un cookie
  document.cookie = "cookie_crunch=ok;expires=Thu, 18 Dec 2020 12:00:00 UTC;path=/";
  // je cache ma barre
  document.getElementById("cookie-bar").style.display = 'none';
}

//si l'utilisateur refuse
document.getElementById("stop-cookie").addEventListener("click", hideCookiebar);
function hideCookiebar() {
   // j'enregistre son choix dans un cookie
  document.cookie = "cookie_crunch=no;expires=Thu, 18 Dec 2020 12:00:00 UTC;path=/";
  // je cache ma barre
  document.getElementById("cookie-bar").style.display = 'none';
  // je supprime les cookies spécifiques
}

Gérer certains paramètres en fonction du choix de l’internaute

Enfin, je vais déclencher ou non certaines actions en fonction du choix de l’utilisateur. Premièrement, si l’internaute a fait un choix, je vais arrêter d’afficher ma barre sur toutes mes pages.

// si l'utilisateur n'a pas encore accepté / refusé les cookies, j'affiche la barre des cookies
if (cookie_crunch == null || cookie_crunch == ""){
   document.getElementById("cookie-bar").style.display = "block";
}

Enfin, je ne vais pas charger certains scripts si l’utilisateur a choisi de bloquer les cookies. (ce qui m’évite de les générer et les supprimer à toutes les pages).

// Si l'utilisateur n'a pas refusé l'utilisation des données
var cookie_crunch = Cookies.get('cookie_crunch');
if (cookie_crunch != "no"){
  // je charge mes scripts de suivi de données, publicités ... 
}

Voici le résultat global de ma barre d’acceptation des cookies 🙂

See the Pen Simple cookie bar aggreement / disagreement in jquery by Arthur H (@ArthurAndAshes) on CodePen.

retrouvez tous les outils et ressources en liens avec ce tuto ...

Technologies utilisées pour ce tuto :

HTML 5

JavaScript (JS)

Tutoriels en lien avec le sujet :

• Simple barre d’information sur votre politique des cookies en javascript ou jquery
• Créer un cookie simplement avec JS cookie