Bonjour les gens,

Depuis le mois de décembre 2013, vous pouvez voir fleurir sur vos sites préférés des bandeaux vous informant que les dits sites utilisent des cookies à des fins publicitaireset de mesure d’audience.

Ces bandeaux apparaissent en réponse à la transposition de la directive européenne. Voila maintenant il faut distinguer 3 types de cookies qui nécéssitent la mise en place d’un tel bandeau :

• Les cookies de mesure d’audience : Ce sont les cookies déposés par notre fameux google analytics.
• Les cookies à des fins publicitaires : Criteo, tradedoubler et autres régies publicitaires.
• Les cookies des réseaux sociaux  : facebook; et consorts.

Dans ce tutoriel, je vais juste reprendre la gestion pour les cookies dits de mesure d’audience, notamment en ce qui concerne google analytics. J’ai exploité pour cela les recommendations de la CNIL que vous pourrez égalemen retrouver ici

On va procéder en 2 étapes, tout d’abord nous allons créer un fichier javascript dans le thème et ensuite nous allons l’ajouter au chargement de la page.

Alors commencons par récuperer le contenu du fichier cookies.js

// Remplacez la valeur UA-XXXXXX-Y par l'identifiant analytics de votre site.
gaProperty = 'UA-XXXXXX-Y'

// Désactive le tracking si le cookie d’Opt-out existe déjà.

var disableStr = 'ga-disable-' + gaProperty;

if (document.cookie.indexOf('hasConsent=false') > -1) {
window[disableStr] = true;
}
//Cette fonction retourne la date d’expiration du cookie de consentement 

function getCookieExpireDate() {
 var cookieTimeout = 34214400000;// Le nombre de millisecondes que font 13 mois 
 var date = new Date();
date.setTime(date.getTime()+cookieTimeout);
var expires = "; expires="+date.toGMTString();
return expires;
}

// Cette fonction est appelée pour afficher la demande de consentement
function askConsent(){
    var bodytag = document.getElementsByTagName('body')[0];
    var div = document.createElement('div');
    div.setAttribute('id','cookie-banner');
    div.setAttribute('width','70%');
    // Le code HTML de la demande de consentement
    // Vous pouvez modifier le contenu ainsi que le style
    div.innerHTML =  '<div style="background-color:#000000;color:#FFFFFF"> Ce site utilise des cookies pour mesurer son audience. En naviguant sur ce site, vous en accepter l`utilisation. Pour vous y opposer en suivant c\'est <a href="javascript:gaOptout()" style="color:white;text-decoration:underline;">lien</a>.</div>';
    bodytag.insertBefore(div,bodytag.firstChild); // Ajoute la bannière juste au début de la page 
    document.getElementsByTagName('body')[0].className+=' cookiebanner';
}


// Retourne la chaine de caractère correspondant à nom=valeur
function getCookie(NomDuCookie)  {
    if (document.cookie.length > 0) {
        begin = document.cookie.indexOf(NomDuCookie+"=");
        if (begin != -1)  {
            begin += NomDuCookie.length+1;
            end = document.cookie.indexOf(";", begin);
            if (end == -1) end = document.cookie.length;
            return unescape(document.cookie.substring(begin, end));
        }
     }
    return null;
}

// Fonction d'effacement des cookies   
function delCookie(name )   {
    path = ";path=" + "/";
    domain = ";domain=" + "."+document.location.hostname;
    var expiration = "Thu, 01-Jan-1970 00:00:01 GMT";
    document.cookie = name + "=" + path + domain + ";expires=" + expiration;
}
// Efface tous les types de cookies utilisés par Google Analytics    
function deleteAnalyticsCookies() {
    var cookieNames = ["__utma","__utmb","__utmc","__utmz","_ga"]
    for (var i=0; i<cookieNames.length; i++)
        delCookie(cookieNames[i])
}

// La fonction d'opt-out   
function gaOptout() {
    document.cookie = disableStr + '=true;'+ getCookieExpireDate() +' ; path=/';
    document.cookie = 'hasConsent=false;'+ getCookieExpireDate() +' ; path=/';
    var div = document.getElementById('cookie-banner');
    // Ci dessous le code de la bannière affichée une fois que l'utilisateur s'est opposé au dépôt
    // Vous pouvez modifier le contenu et le style
    if ( div!= null ) div.innerHTML = '<div style="background-color:#000000;color:#FFF"> Vous vous êtes opposé \
    au dépôt de cookies de mesures d\'audience dans votre navigateur.<br/>Pour accepter le depot des cookies, il vous suffit de supprimer les cookies du domaine \'www.domain.tld\' </div>'
    window[disableStr] = true;
    deleteAnalyticsCookies();
}



//Ce bout de code vérifie que le consentement n'a pas déjà été obtenu avant d'afficher
// la baniére
var consentCookie =  getCookie('hasConsent');
if (!consentCookie) {//L'utilisateur n'a pas encore de cookie de consentement
 var referrer_host = document.referrer.split('/')[2];
   if ( referrer_host != document.location.hostname ) { //si il vient d'un autre site
   //on désactive le tracking et on affiche la demande de consentement            
     window[disableStr] = true;
     window[disableStr] = true;
     window.onload = askConsent;
   } else { //sinon on lui dépose un cookie 
      document.cookie = 'hasConsent=true; '+ getCookieExpireDate() +' ; path=/';
   }
}

Copiez ce code, collez dans un fichier “cookies.js” que vous déposerez dans le dossier js de votre thème

www/wp-content/themes/mon-theme/js/cookies.js

Ensuite, nous allons ajouter ce ficher js au chargement de toutes les pages, pour cela nous allons modifier le fichier “header.php” de votre thème.

Ajoutez la ligne suivante dans le fichier :

 <script src="<?php echo get_template_directory_uri(); ?>/js/cookies.js"></script>

Voila, sauvegardez votre fichier, et si vous avez deja inscrit le tag G.A., vous n’avez rien d’autre a faire.

Pour tester votre bandeau, vous pouvez accèder à votre site en utilisant la navigation privée.

A bientot !!