[JS] Bandeau d’autorisation d’utiliser des cookies
Cookieschoices.js - Création un bandeau d’autorisation pour l'utilisation des cookies sur son site Internet
Un cookie, qu’est-ce c’est ? A part le biscuit aux pépites de chocolat !!!
Il s’agit tout simplement d’un petit fichier que va déposer un site internet sur votre ordinateur pour y stocker des informations qui vous sont propres. Cela peut servir par exemple à analyser l’audience du site, cibler des publicités ou tout simplement mémoriser vos identifiant et mot de passe.
Il n’y a encore pas si longtemps, cela pouvait se faire de manière invisible pour le visiteur. Aujourd’hui, pour les cookies autres que ceux nécessaires au bon fonctionnement du site, il faut lui informer la finalité de leur usage, obtenir son consentement (validité de 13 mois maximum) ainsi que lui donner la possibilité de les refuser.
En savoir + : CNIL - Cookies & traceurs - Que dit la loi
Exemple de message :
Message pour statistiques :
Ce site utilise des cookies afin d'analyser le trafic et de mesurer les performances des annonces. [ACCEPTER] / [REFUSER]
Message pour publicité ou réseaux sociaux :
En poursuivant votre navigation, vous acceptez le dépôt de cookies tiers destinés à vous proposer des vidéos, des boutons de partage, des remontées de contenus de plateformes sociales. [ACCEPTER] / [REFUSER]
Message général :
Ce site utilise des cookies pour vous offrir le meilleur service. En poursuivant votre navigation, vous acceptez l’utilisation des cookies. [ACCEPTER] / [REFUSER]
Cookieschoices.js
<div id="cookiesAccept"></div>
<div id="cookiesScript"><!-- Your Script (ex : Google Analytics; facebook; twitter; ...) --></div>
<script>
/** PARAM ////////////////////// */
var bndIdCookiesInfos = 'cookiesAccept';
var bndIdCookiesScript = 'cookiesScript';
var contentInfosMessage = 'Ce site utilise des cookies afin d\'analyser le trafic et de mesurer les performances des annonces. En poursuivant votre navigation sur ce site, vous en acceptez l\'utilisation.';
var contentInfosMessageLinkMore = '';
/** .PARAM ////////////////////// */
var blkInfos = null;var blkScript = null;var htmlChecked = null;
window.onload = function () {
if ((document.getElementById(bndIdCookiesInfos)) && (document.getElementById(bndIdCookiesScript))) {
var cookiesAccepted = null;
blkInfos = document.getElementById(bndIdCookiesInfos);
blkScript = document.getElementById(bndIdCookiesScript);
htmlChecked = true;
if (sessionStorage.getItem("cookiesAccepted")) {cookiesAccepted = sessionStorage.getItem("cookiesAccepted");}
else {sessionStorage.setItem('cookiesAccepted', 'null');}
CookiesAreAccepted(cookiesAccepted);
}
};
function CookiesAreAccepted(param) {
if (htmlChecked === true) {
if (param === 'true') {
sessionStorage.setItem('cookiesAccepted', 'true');
blkInfos.remove();
}
else if (param === 'false') {
sessionStorage.setItem('cookiesAccepted', 'false');
blkInfos.remove(); blkScript.remove();
}
else {
var htmlContent = '<div style="z-index: 9999 !important;position: fixed !important;background-color: rgba(51, 51, 51, 0.6);color:#fff;bottom: 0;width: 100%;padding: 10px;">';
htmlContent += '<div style="float: left;"><em>' + contentInfosMessage + '</em>';
if (contentInfosMessageLinkMore != '') {
htmlContent += ' <a href="' + contentInfosMessageLinkMore + '" style="color:#fff;text-decoration: underline;">en savoir +</a>';
}
htmlContent += '</div>';
htmlContent += '<div style="float: right;">';
htmlContent += '<span id="btnAcceptCookies" style="padding:5px;background-color:green;cursor:pointer;" onclick="CookiesAreAccepted(\'true\');">ACCEPTER</span> ';
htmlContent += '<span id="btnDeclineCookies" style="padding:5px;background-color:red;cursor:pointer;" onclick="CookiesAreAccepted(\'false\');">REFUSER</span> ';
htmlContent += '</div></div>';
blkInfos.innerHTML = htmlContent;
}
}
}
function ClearCookieschoices() {sessionStorage.removeItem('cookiesAccepted');}
</script>
Quoi de mieux qu’un exemple concret ! Voici un bandeau qui notifie l’utilisation de cookies en bas de page. Si vous appuyez sur le bouton « AUTORISER » le bandeau -div-"cookiesAccept" est masquée et le contenue de le -div-"cookiesScript" reste, par contre si vous cliquez sur "REFUSER" le bandeau est masqué ainsi que le -div-"cookiesScript".
Pour l’afficher à nouveau ce beandeu, utilisez la commande "ClearCookieschoices()" dans la console javascript de votre navigateur et rafraîchissez la page.
Voilà vous avez tous les éléments pour afficher un bandeau de notifications de l’utilisation des cookies sur l’ensemble des pages de votre site web. Grâce à ce simple tutoriel et ce petit code Cookieschoices.js, c’est à vous de jouer maintenant pour rendre votre site internet conforme aux législations européennes.