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

31 Mai 2018

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.

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 individuellement chacun des services à interdire/autoriser.

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.

Installation des fichiers

Téléchargez le code source de tarteaucitron sur GitHub, décompressez-le et renommer le répertoire obtenu avec le nom « tarteaucitron » (tout attaché en minuscules).

Copiez ce répertoire à la racine de votre site WordPress à l’aide d’un client FTP.

Déclaration et initialisation du script

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

<script src="/tarteaucitron/tarteaucitron.js"></script>
<script>
	tarteaucitron.init({
		"hashtag": "#tarteaucitron", /* Ouverture automatique du panel avec le hashtag */
		"highPrivacy": false, /* désactiver le consentement implicite (en naviguant) ? */
		"orientation": "top", /* le bandeau doit être en haut (top) ou en bas (bottom) ? */
		"adblocker": false, /* Afficher un message si un adblocker est détecté */
		"showAlertSmall": true, /* afficher le petit bandeau en bas à droite ? */
		"cookieslist": true, /* Afficher la liste des cookies installés ? */
		"removeCredit": false /* supprimer le lien vers la source ? */
	});
</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 :

add_action( 'wp_enqueue_scripts', 'tarteaucitron_load' );
function tarteaucitron_load() {
  wp_enqueue_script( 'tarteaucitron', '/tarteaucitron/tarteaucitron.js' );
}

add_action( 'wp_head', 'tarteaucitron_init' );
function tarteaucitron_init() {
?><script>
	tarteaucitron.init({
		"hashtag": "#tarteaucitron", /* Ouverture automatique du panel avec le hashtag */
		"highPrivacy": false, /* désactiver le consentement implicite (en naviguant) ? */
		"orientation": "top", /* le bandeau doit être en haut (top) ou en bas (bottom) ? */
		"adblocker": false, /* Afficher un message si un adblocker est détecté */
		"showAlertSmall": true, /* afficher le petit bandeau en bas à droite ? */
		"cookieslist": true, /* Afficher la liste des cookies installés ? */
		"removeCredit": false /* supprimer le lien vers la source ? */
	});
</script><?php
}

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 rien 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é.

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

Bonus : Vous remarquerez que sur cette capture j’ai ajouté une instruction à la fonction analyticsMore() afin de rendre Analytics un peu plus conforme à la RGPD (anonymisation de l’adresse IP des visiteurs).

Version WordPress générale

Cette fois c’est à la fin des pages HTML, avant la balise </body>, qu’il faut insérer les snippets de code associés aux services. Ajoutez ces lignes dans le fichier functions.php :

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');
</script><?php
}

Bonus : Comme dans la version Divi, j’ai ajouté une instruction à la fonction analyticsMore() afin de rendre Analytics un peu plus conforme à la RGPD (anonymisation de l’adresse IP des visiteurs).

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.job = tarteaucitron.job || []).push('gplus');
        ETC....................
</script><?php
}

Bloqueurs de pub, mise en cache et optimisation

Si ça ne marche pas, ne paniquez pas et ne me maudissez pas tout de suite…

  1. Il se peut que vous ayez un bloqueur de publicité activé, et dans ce cas ce dernier bloque tout, y compris tarteaucitron !
    Pour remédier à ce problème, vous pouvez modifier l’option « adblocker » du premier script :

    		"adblocker": true, /* Afficher un message si un adblocker est détecté */
    
  2. Si vous utilisez un système de mise en cache, vous devrez peut-être en exclure le fichier tarteaucitron.js, par exemple avec Fastest Cache :
  3. Exclusion du script tarteaucitron dans Fastest Cache

  4. Idem pour les systèmes d’optimisation (minify, combine, defer…), ici Autoptimize :
  5. Exclusion de tarteaucitron dans Autoptimize

Conclusion

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

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