Simple barre d’information sur votre politique des cookies en javascript ou jquery

Bonjour à tous, aujourd’hui j’ai été amené à créer une barre d’information super simple sur mon site, pour informer de l’utilisation des cookies. Vous noterez que cette barre d’information n’est plus suffisante dans le cadre de la nouvelle réglementation européenne sur l’utilisation des données personnelles (RGPD). Si vos cookies rentrent dans cette nouvelle réglementation, on préférera faire une barre d’acceptation / de refus des cookies.

J’ai souhaité faire ma barre en JavaScript, car je gère déjà quelques cookies en javascript, et que la barre nécessite des animations en front-end. Cela me permet de coder ma barre dans un seul fichier .js, et de le plugger sur n’importe quel site.

Voici ma démarche :

• Je crée ma barre en HTML / CSS
• Je publie cette barre directement depuis mon fichier JS
• Je cache ma barre lorsque le visiteur a accepté les cookies

Ma barre en HTML

<div id='cookie-bar' style='position:fixed; bottom:0; left:0; width: 100%;  text-align: center; padding: 12px 0; margin:0;  background: rgba(244, 244, 244, 0.9);  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='https://monsite.fr/politique-cookies' style='color: #919191;font-weight:bold;'>Consulter notre politique des cookies !</a>
   </div>
   <div style='width:20%;'></div>
</div>
<span id='agree' style='position:absolute;bottom:5px;right:4%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 8px;margin: 0;font-weight: 600;'>ok</span>

Je crée donc ma barre en position:fixed; et quelques ajustements de position bottom:0; left:0; width: 100%;

A noter : j’ai créé mon bouton « OK » en dehors de la barre, car je souhaite qu’il reste affiché, après avoir fait disparaitre la barre.

Gestion de ma barre politique des cookies en JavaScript

Pour commencer, je vais appeler ma barre dans mon fichier javascript, et je définis 2 variables, la couleur du bouton et l’url de ma page « Politique d’utilisation des cookies » :

var policyurl = "https://mywebsite.com/cookies-policy",
    okcolor = "#7CCBDE";

document.write("<div id='cookie-bar' style='position:fixed; bottom:0; left:0; width: 100%;  text-align: center; padding: 12px 0; margin:0;  background: rgba(244, 244, 244, 0.9);  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>.</div><div style='width:20%;'></div></div><span id='agree' style='position:absolute;bottom:5px;right:4%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 8px;margin: 0;font-weight: 600;'>ok</span>");

Enfin, je vais faire disparaître ma barre lorsqu’un utilisateur clique sur le bouton OK. Lorsque ma barre a disparue, je modifie le bouton « OK » en « politique des cookies ». Ainsi, l’utilisateur peut à tout moment consulter votre politique des cookies.

document.getElementById("agree").addEventListener("click", hideCookiebar);
function hideCookiebar() {
    document.getElementById("agree").innerHTML = "cookie";
  document.getElementById("cookie-bar").style.display = 'none';
}

A noter : je peux faire exactement la même chose en jquery, mais pourquoi charger une bibliothèque pour quelque chose d’aussi simple ?

$(document).ready(function() {
       $('#agree').click(function(){
        $('#cookie-bar').hide(500);
         // document.getElementById("agree").innerHTML = "cookies";
       document.getElementById("agree").innerHTML = "<a href='policyurl' target='_blank' style='color:white;'>Our cookies policy</a>";
      });
   });

Voici le résultat final, que vous pourrez facilement modifier à votre sauce !

See the Pen Simple cookie bar information in JS / Jquery by Arthur H (@ArthurAndAshes) on CodePen.

Enfin, si vous souhaitez enregistrer l’acceptation de votre politique des cookies par l’utilisateur, je vous conseille d’enregistrer cette information dans un petit cookie. Je vous invite à consulter ce tutoriel pour créer une barre de cookies plus développée,

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 :

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