RGPD : Les cookies dans WordPress ou Divi avec tarteaucitron.js

31 Mai 2018

EDIT 19/11/2018 : Mise à jour v1.2 avec alternative CDN encore plus simple !

 

Bonjour à tous,

Si vous lisez ce billet, c’est que vous aussi vous vous êtes demandé, dans le cadre de la RGPD, comment vous alliez pouvoir gérer facilement l’autorisation et l’interdiction de ces satanés cookies / traceurs sur votre site WordPress ou Divi… Merci la RGPD !

Dans le fond, je suis pour ce genre de réglementation, mais il faut avouer que c’est un joyeux bordel techniquement (et légalement).

Au passage, j’invite celles et ceux qui sont passés à côté de cette nouvelle loi ces dernières semaines (ou, comme moi, qui ne savaient pas par quel bout la prendre) à lire cet excellent article de la marmite sur le Règlement Général pour la Protection des Données (et WordPress). Très complet et très concret, il m’a sorti du brouillard dans lequel j’errais depuis un moment.

Et pour aller encore plus dans les détails, vous pouvez aussi visionner cette série de vidéos sur le RGPD par Deborah Donnier. La partie technique est abordée dans la dernière vidéo.

RGPD et cookies (ou traceurs)

Je ne vais pas prendre le risque de (très mal) vous l’expliquer… Je préfère vous laisser lire cette page sur le site de la CNIL qui résume concrètement ce que dit la loi sur l’utilisation des cookies et traceurs.

En deux mots, vous devez interdire sur votre site web le dépôt de cookies ou la mise en place de traceurs par certains services (comme par exemple Google Analytics pour la mesure d’audience ou l’étude de comportements) tant que le visiteur n’a pas exprimé son consentement pour leur utilisation. Ce dernier doit de plus pouvoir choisir retirer sur son consentement par la suite.

Le script tarteaucitron à la rescousse

Le script « tarteaucitron » est un gestionnaire de tags open-source conforme à la RGPD. Il est très léger et recommandé et utilisé par la CNIL.

Il permet non seulement de positionner automatiquement les balises ou marqueurs associées à différents services (mesures d’audience, réseaux sociaux…), à la manière de Google Tag Manager, mais aussi et surtout de recueillir le consentement explicite (ou le refus) du visiteur pour l’utilisation de ces marqueurs et des cookies associés. Exactement ce qu’il nous faut.

Vous pouvez consulter le guide d’installation de tarteaucitron ; j’en détaille ici les différentes étapes pour une mise en œuvre facile et propre dans WordPress ou Divi, avec une alternative via CDN afin de se faciliter la vie 🙂

Installation des fichiers

Attention, méthode alternative au guide du site !

Au lieu de télécharger le code source de tarteaucitron sur GitHub et de l’installer en local, nous allons appeler le script directement sur un CDN (Content Delivery Network).

Cette technique a plusieurs avantages :

  • c’est plus rapide installer,
  • ça n’encombre pas l’espace de stockage,
  • ça simplifie les mises à jour futures du script,
  • ça ne fait pas planter les optimiseurs de code.

DONC PAS DE TÉLÉCHARGEMENT NI D’INSTALLATION DES FICHIERS !!!

Déclaration et initialisation du script

Attention, je vous copie-colle ci-dessous le code pour la version 1.2 du script, mais il faudra récupérer le nouveau code sur le site en cas de mise à jour.

Vous remarquerez que la déclaration du script est différente de celle du guide d’installation car le script n’est pas stocké localement. On appelle une version déjà minifiée via le site jsdelivr qui héberge les fichiers sur un CDN afin de les servir rapidement aux quatre coins du monde.

Pour les futures mises à jour du script, il suffira de modifier l’appel (la première ligne) du script et l’initialisation qui suit, alors qu’avec la méthode standard il faut en plus télécharger la nouvelle version et l’installer.

Les lignes suivantes doivent donc être insérées avant la balise </head> de chaque page de votre site web :

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.2/tarteaucitron.min.js"></script>
<script type="text/javascript">
  tarteaucitron.init({
    "privacyUrl": "https://pavenum.com/mentions-legales/", /* Privacy policy url */
    "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
    "cookieName": "tartaucitron", /* Cookie name */
    "orientation": "bottom", /* Banner position (top - bottom) */
    "showAlertSmall": true, /* Show the small banner on bottom right */
    "cookieslist": true, /* Show the cookie list */
    "adblocker": false, /* Show a Warning if an adblocker is detected */
    "AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
    "highPrivacy": false, /* Disable auto consent */
    "handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
    "removeCredit": false, /* Remove credit link */
    "moreInfoLink": true, /* Show more info link */
    //"cookieDomain": ".my-multisite-domaine.fr" /* Shared cookie for subdomain */
  });
</script>

Nous allons pour cela utiliser les fonctionnalités de WordPress ou de Divi pour effectuer cette tâche automatiquement.

Version Divi

Avec Divi, c’est immédiat car il suffit de copier/coller ce bloc dans l’onglet Intégration de la page « Options » de Divi, dans la zone associée à la balise <head> :

Installation tarteaucitron dans Divi

Bien-sûr, on prendra soin d’activer le code d’en-tête, conformément à la capture d’écran ci-dessus.

Version WordPress générale

Si le back-end de votre thème ne vous permet pas d’insérer du code directement (comme par exemple ci-dessus), il faut alors passer par un thème enfant afin d’injecter le code proprement dans vos pages HTML.

Pour ce faire, ajoutez les lignes suivantes dans le fichier functions.php de votre thème enfant :

function pavenum_tarteaucitron_load() {
  wp_enqueue_script( 'tarteaucitron', 'https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.2/tarteaucitron.min.js' );
} 
add_action( 'wp_enqueue_scripts', 'pavenum_tarteaucitron_load' );

function pavenum_tarteaucitron_init() {
  ?><script type="text/javascript">
			tarteaucitron.init({
				"privacyUrl": "https://pavenum.com/mentions-legales/", /* Privacy policy url */
				"hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
				"cookieName": "tartaucitron", /* Cookie name */
				"orientation": "bottom", /* Banner position (top - bottom) */
				"showAlertSmall": true, /* Show the small banner on bottom right */
				"cookieslist": true, /* Show the cookie list */
				"adblocker": false, /* Show a Warning if an adblocker is detected */
				"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
				"highPrivacy": false, /* Disable auto consent */
				"handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
				"removeCredit": false, /* Remove credit link */
				"moreInfoLink": true, /* Show more info link */
			});
		</script><?php
}		
add_action('wp_head', 'pavenum_tarteaucitron_init');

Remarque : Il existe aussi des plugins gratuits permettant d’insérer du code dans les fichiers HTML générés par WordPress, mais je préfère les solutions minimales, légères et sans dépendance.

Ajout des services

L’activation des services se fait à peu près de la même façon. Elle est indispensable pour le fonctionnement du script, puisque sans service, il n’y a aucun cookie ou traceur à interdire.

Il faut dans un premier temps récupérer sur le guide d’installation de tarteaucitron (étape 3) les snippets de code dont vous avez besoin. Par exemple, pour Google Analytics Universal :

Tarteaucitron et Analytics
Cette capture nous indique alors que :

  • le code Analytics doit être placé à la fin de chaque page du site avant la balise </body>,
  • le marqueur officiel associé, que vous avez dû positionner auparavant pour ce service, doit être supprimé.

Le code à utiliser pour Analytics sera donc :

<script type="text/javascript">
tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
</script>

Remarque : Vous noterez que j’ai ajouté une instruction à la fonction analyticsMore() afin de rendre Analytics un peu moins indiscret (anonymisation de l’adresse IP des visiteurs).

Malheureusement, l’anonymisation de l’adresse IP n’est pas suffisante pour dispenser Google de ce consentement obligatoire.

Version Divi

Même procédure que précédemment, mais cette fois le code récupéré doit donc remplacer le marqueur officiel dans la zone associée à la balise <body>, et ce pour chaque service utilisé :

Tarteaucitron et Analytics

Version WordPress générale

Ajoutez ces lignes dans le fichier functions.php :

function pavenum_add_tarteaucitron_analytics() {
	?><script type="text/javascript">
		tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
		tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
		(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
	</script><?php
}
add_action('wp_footer', 'pavenum_add_tarteaucitron_analytics');

Ajout de plusieurs services

Si vous utilisez plusieurs services, vous pouvez coller à la suite tous les morceaux de code associés, soit dans les options de Divi, soit dans la même fonction tarteaucitron_services() pour la version thème enfant (dans ce dernier cas ce n’est pas la peine de déclarer une fonction pour chaque) :

add_action( 'wp_footer', 'tarteaucitron_services' );
function tarteaucitron_services() {
  ?><script>
        tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
        tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
        (tarteaucitron.job = tarteaucitron.job || []).push('analytics');
        (tarteaucitron.job = tarteaucitron.job || []).push('facebook');
        tarteaucitron.user.facebookpixelId = 'PIXEL-ID';
        tarteaucitron.user.facebookpixelMore = function () { /* add here your optionnal facebook pixel function */ };
        (tarteaucitron.job = tarteaucitron.job || []).push('facebookpixel');
        (tarteaucitron.job = tarteaucitron.job || []).push('gplus');
        ETC....................
  </script><?php
}

Filtrage de tarteaucitron

Il est possible de désactiver tarteaucitron pour les utilisateurs connectés ou sur certaines pages, par exemple, et donc par la même occasion le dépôt des cookies pour les services déclarés.

Il vous faudra pour cela passer par la méthode du thème enfant. Par exemple, sur ce site je désactive le script et Analytics pour les utilisateurs connectés en utilisant le tag conditionnel is_user_logged_in() :

function pavenum_tarteaucitron_load() {
	if ( ! is_user_logged_in() )
		wp_enqueue_script( 'tarteaucitron', 'https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.2/tarteaucitron.min.js' );
} 
add_action( 'wp_enqueue_scripts', 'pavenum_tarteaucitron_load' );

function pavenum_tarteaucitron_init() {
	if ( ! is_user_logged_in() ) {
		?><script type="text/javascript">
			tarteaucitron.init({
				"privacyUrl": "https://pavenum.com/mentions-legales/", /* Privacy policy url */
				"hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
				"cookieName": "tartaucitron", /* Cookie name */
				"orientation": "bottom", /* Banner position (top - bottom) */
				"showAlertSmall": true, /* Show the small banner on bottom right */
				"cookieslist": true, /* Show the cookie list */
				"adblocker": false, /* Show a Warning if an adblocker is detected */
				"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
				"highPrivacy": false, /* Disable auto consent */
				"handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
				"removeCredit": false, /* Remove credit link */
				"moreInfoLink": true, /* Show more info link */
			});
		</script><?php
	}
}		
add_action('wp_head', 'pavenum_tarteaucitron_init');

function pavenum_add_tarteaucitron_analytics() {
	if ( ! is_user_logged_in() ) {
		?><script type="text/javascript">
			tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
			tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
			(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
		</script><?php
	}
}
add_action('wp_footer', 'pavenum_add_tarteaucitron_analytics');

Boîte de dialogue

Une fois le consentement passé (donné ou non), une boîte est affichée en bas du site, indiquant le nombre de cookies actifs et permettant d’en voir la liste et de gérer les consentements.

Personnellement, je trouve qu’elle défigure un peu le site et je préfère ne l’afficher que sur la page de politique de confidentialité.

Le CSS suivant permet de la masquer partout ailleurs (remplacer XXXX par l’ID WordPress de votre page de confidentialité) :

body:not(.page-id-XXXX) #tarteaucitronAlertSmall {
  display: none !important;
}

Design

Pour finir avec la personnalisation, voici mon CSS associé au design général de tarteaucitron :

/*******************************************************/
/* tarteaucitron */
/*******************************************************/

#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronRoot #tarteaucitronPercentage,
#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotGreen {
background: #E61071 !important;
}
#tarteaucitronAlertBig {
background-color: rgba(0,0,0,0.8) !important;
}
#tarteaucitronDisclaimerAlert, #tarteaucitronDisclaimerAlert strong, #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
color: #fff !important;
}
#tarteaucitronAlertSmall {
background-color: rgba(0,0,0,0.5) !important;
}
#tarteaucitronAlertBig #tarteaucitronPersonalize, #tarteaucitronAlertBig #tarteaucitronCloseAlert {
border-radius: 3px !important;
}

Cela permet d’harmoniser le bandeau et la boite de dialogue avec le reste du site. Je vous laisse le soin de l’adapter, sauf si vous voulez ajouter un peu de rose à votre site !

Mise en cache et optimisation

Le super-bonus, c’est qu’avec la méthode alternative de chargement du script, je n’ai plus aucun conflit avec les optimiseurs de code ou systèmes de cache 🙂

En effet, avec la recopie du script en local, ces derniers rendaient impossibles les appels directs des sous-scripts de tarteaucitron.js (par exemple l’initialisation des traductions) car ils déplaçaient les fichiers optimisés dans des dossiers spécifiques.

Remarque : Vous pourriez objecter qu’avec cette méthode, les scripts ne sont pas optimisés… C’est vrai… Même si j’appelle une version minifiée du script principal sur le CDN, celui-ci appelle des versions non minifiées des scripts annexes. De plus, les scripts ne sont pas combinés.

Mais malgré tout, je suis resté à 100% sur Pagespeed 😉

De plus, avec la méthode d’installation locale, l’optimisation ne fonctionne pas et il faut exclure les scripts des outils d’optimisation ! Donc pas mieux !

Spoiler : L’auteur du plugin prévoit des améliorations dans le chargement et les dépendances des scripts…

Conclusion

Grâce au travail d’Amauri Champeaux, qui fournit de surcroit gratuitement ce script avec les services les plus courants, le contrôle des cookies et traceurs est un jeu d’enfant pour WordPress et Divi.

Je le remercie également chaudement pour l’astuce du CDN qui n’est pas (encore ?) documentée.

(Fond de l’image de présentation téléchargé sur Freepik.)