Attention, article à mettre à jour avec une version récente de tarteaucitron !
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… 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 qui résume concrètement ce que dit la loi sur l’utilisation des cookies et traceurs, ainsi que ce complément sur les modifications de la loi RGPD et des recommandations de la CNIL.
En (très très) résumé, 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.
En outre, le visiteur doit pouvoir refuser aussi facilement l’utilisation des cookies que l’accepter.
Il doit enfin pouvoir choisir de retirer son consentement à tout moment.
Le script tarteaucitron à la rescousse
Le script « tarteaucitron » est un gestionnaire de tags open-source conforme à la RGPD.
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.
Installation
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.
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://votresite.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>Langage du code : HTML, XML (xml)Nous allons utiliser les fonctionnalités de WordPress pour effectuer cette tâche automatiquement.
Si le backend de votre thème ne vous permet pas d’insérer du code directement, 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 tarteaucitron_load() {
wp_enqueue_script( 'tarteaucitron', 'https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.2/tarteaucitron.min.js' );
}
add_action( 'wp_enqueue_scripts', 'tarteaucitron_load' );
function tarteaucitron_init() {
?><script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "https://votresite.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', 'tarteaucitron_init');Langage du code : JavaScript (javascript)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 en sélectionnant Analytics, le site nous indique 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>Langage du code : HTML, XML (xml)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.
Ajoutez ces lignes dans le fichier functions.php :
function 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', 'add_tarteaucitron_analytics');Langage du code : JavaScript (javascript)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
}Langage du code : JavaScript (javascript)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 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', 'tarteaucitron_load' );
function tarteaucitron_init() {
if ( ! is_user_logged_in() ) {
?><script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "https://votresite.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', 'tarteaucitron_init');
function 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', 'add_tarteaucitron_analytics');Langage du code : JavaScript (javascript)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;
}Langage du code : CSS (css)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;
}Langage du code : CSS (css)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.
Je le remercie également chaudement pour l’astuce du CDN qui n’est pas (encore ?) documentée.
Laisser un commentaire