Ce tutoriel va vous montrer comment développer un script concernant les nouvelles normes européennes de demande de consentement des utilisateurs en matière de cookies. On va voir comment vérifier la présence d'un cookie et en créer un.

Créer un cookie en javascript

Dans cette première partie, on va tout simplement créer un cookie. Pour ce faire, on va utiliser le javascript. La durée de validité du cookie est exprimée en millisecondes par rapport à la date courante.

Voici un exemple de script permettant de créer un cookie

function oft_setCookie(cname) {
    // Création d'une nouvelle date
    var d = new Date();
    // Ajout de la durée de conservation souhaitée en plus de la date courante, ici il s'agit d'un 1 an exprimé en millisecondes
    d.setTime(d.getTime() + 30660000000);
    // Création de la chaîne de caractère à placer dans le cookie
    document.cookie = cname + "=y; expires=" + d.toUTCString();
}

On peut voir que j'utilise ici la valeur "y" pour savoir si le cookie est validé. Vous pouvez bien évidement mettre ce que vous souhaitez, une heure par exemple. Cela permet éventuellement d'avoir une information supplémentaire.

Vérifier la présence d'un cookie

Dans cette troisième partie, on va vérifier que le cookie que l'on vient de créer existe et s'il est toujours valide. En effet, on peut avoir à redemander le consentement de l'utilisateur en fonction des recommandations données par la Commission Européenne.

Voici un exemple de script permettant de vérifier la présence d'un cookie

function oft_getCookie(cname) {
    // Indique le nom de la partie du cookie que l'on recherche, le cname correspond au nom du champ
    var name = cname + "=";
    // Découpe le contenu du cookie par rapport au caractère ';'
    var ca = document.cookie.split(';');
    // Boucle sur chacune des parties du cookie obtenues
    for(var i = 0; i < ca.length; i++) {
        // Récupération de la valeur en cours
        var c = ca[i];
        // Retire les espaces éventuels
        while (c.charAt(0) == ' ') c = c.substring(1);
        // Renvoie la valeur du champ que l'on recherche s'il correspond
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

Utiliser la vérification de présence du cookie et son contenu

Dans cette quatrième partie, on va voir comment utiliser simplement la présence du cookie que l'on a créé. S'il est présent on ne fait rien, mais s'il est absent, on affiche le message de demande de consentement à l'utilisateur.

Voici un exemple de script permettant d'utiliser la récupération du contenu du cookie

function oft_checkCookie() {
    // Récupération du contenu de notre valeur dans le cookie
    var check = oft_getCookie("oft_cookieConsent");
    // Si la valeur n'est pas 'y' on affiche la div avec l'id "oft_cookieConsent", il s'agit de notre message de demande de consentement
    if (check != "y")
        // Affichage de la div de demande de consentement en jQuery
        $('#oft_cookieConsent').show();
    else
        // Masquage de la div de demande de consentement
        $('#oft_cookieConsent').hide();
}

"oft_cookieConsent" est le nom que j'ai donné au cookie pour la demande de consentement. Vous pouvez mettre ce que vous voulez.

Fonction globale d'ajout du code HTML, du contenu de la div et de déclaration des listeners

Dans cette partie, on va voir comment faire pour articuler l'ensemble des scripts que l'on a créée juste avant.

Voici un exemple de script permettant d'ajouter la div avec le texte, afficher ou non son contenu et gérer le clic pour le consentement

function oft_cookieConsent() {
	// Ajoute la div de demande de consentement, masquée dans un premier temps
	$("body").append('<div id="oft_cookieConsent" style="display:none;position:fixed;bottom:0;width:100%;background-color:#999999;padding:5px;color:#FFFFFF;"><div style="display:inline-block;padding-right:20px;">This website uses cookies to ensure you get the best experience on our website &nbsp;&nbsp;<a href="http://online-free-tools.com/en/cookies">More info</a></div><div style="display:inline-block;"><button id="oft_cookieConsent_valid" class="btn btn-primary">Got it!</button></div></div>');

	// Affiche ou non la div que l'on vient d'ajout en fonction de la présence du cookie
	oft_checkCookie();

	// Ecoute si l'on clique sur le bouton d'acceptation du cookie
	$('#oft_cookieConsent_valid').on('click', function(){
		// Crée le cookie
		oft_setCookie("oft_cookieConsent");
		// Masque la div de demande de consentement
		$('#oft_cookieConsent').hide();
	});
}

il est possible de personnaliser le contenu de la div en fonction de la langue de votre site. il vous suffit de mettre une condition par rapport à la langue du navigateur pour passer par une variable globale créée précédemment dans la page.

Résultat complet du script

Pour récapituler, on a vu en javascript comment :

• créer un cookie,
• vérifier la présence d'un cookie,
• récupérer le contenu d'un cookie,
• afficher ou non une div en fonction de sa valeur,
• ajouter une div et son contenu au code HTML,
• placer un listener sur le clic de validation du consentement,

Voici un récapitulatif des différents bouts de codes que l'on vient de voir :

function oft_setCookie(cname) {
    var d = new Date();
    d.setTime(d.getTime() + 30660000000);
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=y; " + expires;
}

function oft_getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

function oft_checkCookie() {
    var check = oft_getCookie("oft_cookieConsent");
    if (check ! = "y") $('#oft_cookieConsent').show(); else $('#oft_cookieConsent').hide();
}

function oft_cookieConsent() {
	$("body").append('<div id="oft_cookieConsent" style="display:none;position:fixed;bottom:0;width:100%;background-color:#999999;padding:5px;color:#FFFFFF;"><div style="display:inline-block;padding-right:20px;">This website uses cookies to ensure you get the best experience on our website &nbsp;&nbsp;<a href="http://online-free-tools.com/en/cookies">More info</a></div><div style="display:inline-block;"><button id="oft_cookieConsent_valid" class="btn btn-primary">Got it!</button></div></div>');
	oft_checkCookie();
	$('#oft_cookieConsent_valid').on('click', function(){
		oft_setCookie("oft_cookieConsent");
		$('#oft_cookieConsent').hide();
	});
}
oft_cookieConsent();

Pour aller plus loin, il serait intéressant de ne diffuser le message de consentement qu'aux utilisateurs européens. Toutefois cela est quasi impossible à savoir avec certitude. Il est possible de passer par des bases de données pour géolocaliser l'adresse IP de l'utilisateur, mais cette information n'est pas sure et n'est, comme son nom l'indique, qu'une information.

Il est important pour vous de tester si le script fonctionne dans votre environnement. N'hésitez pas si vous avez des questions.

  Commentaires

Ajouter un commentaire

Nom / Pseudo

Mail

Commentaire

Informez moi quand il y a un nouveau commentaire

Ajouter