Aimez vous la tarte au citron ? Si vous vous intéressez de près ou de loin aux sujets RGPD, privacy et autres cookies, il y a fort à parier que vous allez vous laisser tenter !
Mais de quoi il parle celui la ? Non, je ne suis pas encore tombé sur la tête. Tarteaucitron.js est un script très sérieux (et open-source!), qui permet de se mettre en conformité avec la loi RGPD. Créé en 2018 par Amauri Champeaux, développeur web, Tarteaucitron.js est l’un des outils recommandés par la CNIL, qui l’utilise même sur son propre site :
Pour info, le script tourne aussi sur mon site pro, si vous voulez analyser son comportement. L’ayant donc installé récemment, j’ai décidé d’écrire un petit tutoriel pour vous guider dans l’implémentation avec Google Tag Manager. Voici donc les différentes étapes :
1. Insérer l’appel du script tarteaucitron.js dans le <head>
La première étape consiste à appeler le script tarteaucitron.js sur votre site. Il convient de le placer dans le <head> de votre site avant tout autre script d’analytics, de tracking publicitaire, etc… A ce stade, vous avez deux options :
- Appeler le fichier depuis un dossier en local hébergé sur votre site (il faut alors télécharger les fichiers du script sur le site de tarteaucitron.js ou sur github).
- Appeler le fichier depuis un CDN via le JSDeliver d’Amauri.
<html>
<head>
//Exemple d'intégration avec le JS hébergé localement
<script type="text/javascript" src="/tarteaucitron/tarteaucitron.js"></script>
//Exemple d'intégration avec le JS hébergé sur le CDN
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@1.3/tarteaucitron.js"></script>
...
</head>
Si vous choisissez le premier cas, il faudra bien penser à upgrader la version du script de temps en temps 😉 Le choix de l’option n°1 permet cependant d’être plus libre sur la customisation css, j’y reviendrai plus tard.
2. Ajouter le code pour paramétrer votre privacy
Le script vous donne ensuite la possibilité d’effectuer différentes configurations grâce au code suivant, à placer directement après l’appel à tarteaucitron.js, toujours dans le <head> :
<script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "", /* Privacy policy url */
"hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
"cookieName": "tarteaucitron", /* Cookie name */
"orientation": "middle", /* Banner position (top - bottom) */
"showAlertSmall": false, /* 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, disallow all */
"removeCredit": false, /* Remove credit link */
"moreInfoLink": true, /* Show more info link */
"useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */
//"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */
"readmoreLink": "/cookiespolicy" /* Change the default readmore link */
});
</script>
Par exemple, le paramètre privacyURL vous permet de renseigner l’URL de la page sur laquelle votre politique vie privée est décrite. L’un des paramètres les plus importants est « highPrivacy », qui permet d’activer ou de désactiver le consentement implicite. En le passant à true, aucun tag/cookie ne sera déposé tant que l’utilisateur n’aura pas cliqué sur le bouton « accepter » dans le bandeau cookies. S’il est valorisé à false, alors les tags et les cookies se déclencheront à partir du moment où l’internaute poursuit sa navigation.
Notez qu’il existe une version pro sur le site officiel du script, qui permet d’effectuer ces paramétrages directement via une interface web.
3. Appeler vos tags avec Tarteaucitron
Si comme moi, vous utilisez Google Tag Manager sur votre site web, alors il existe une méthode particulière pour appeler votre gtag.js avec Tartaucitron.js :
<script type="text/javascript">
tarteaucitron.user.googletagmanagerId = 'GTM-XXXX';
(tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
</script>
Dans la variable googletagmanagerId, il faut renseigner son GTM-ID. Ensuite, il faut supprimer l’ancien code appelant Google Tag Manager. En effectuant cette modification, le script de Google Tag Manager ne sera pas appelé tant que l’utilisateur n’aura pas donné son consentement.
Le principe est similaire pour d’autres scripts / tags présents sur votre site. Il faut désormais les appeler via tarteaucitron.job et supprimer l’ancien code. Pour connaître la syntaxe exacte à utiliser, n’hésitez-pas à vous rendre sur le site officiel du script à l’étape 3 : https://opt-out.ferank.eu/fr/install/. Par exemple, pour le pixel Facebook, on insère .push(‘facebook’), pour Contentsquare, on utilise .push(‘contentsquare’)…
Personnellement, je ne suis pas fan de cette implémentation. En effet, l’utilisateur peut désactiver le script GTM dans son interface de gestion des cookies, alors même que plusieurs types de tags avec différentes finalités (statistiques, marketing, …) sont gérés dans Google Tag Manager.
Sur mon site, j’ai choisi de ne pas appeler Google Tag Manager avec cette méthode. J’appelle GTM quoiqu’il arrive, peu importe, le consentement. Cela ne pose pas de problèmes car GTM ne pose pas de cookies en soit.
La technique consiste donc à utiliser des Custom HTML Templates pour appeler ses tags via tarteaucitron directement dans GTM. Par exemple, pour Google Analytics, voici ce que j’ai configuré :
Ainsi, je peux donner le choix aux internautes d’activer ou de désactiver les cookies de certains outils dans leur interface de gestion des cookies :
Cette méthode comporte cependant certains inconvénients, puisque cela oblige à utiliser des templates custom et il n’est plus possible d’utiliser le template Google Analytics proposé par défaut par Google Tag Manager. Notez qu’il est possible de paramétrer tout de même son tag GA via la variable gtagMore. L’ensemble des appels aux différents tags sont dorénavant gérés par le fichier tarteaucitron.services.js.
Pour ces raisons, je préfère l’utilisation de CookieBot, un autre service open-source, plus adapté à l’acceptation des cookies par catégories, et directement disponible dans la librairie des templates de Google Tag Manager. Je publierai bientôt un tuto pour expliquer comment configurer Cookiebot avec GTM.
4. Donner la possibilité à ses utilisateurs de revenir sur leur choix
Pour être totalement conforme avec RGPD, vous devez donner la possibilité à vos internautes de modifier leur consentement à tout moment, et pas uniquement à la première arrivée sur votre site. En ajoutant ce lien quelque part sur votre site, par exemple dans le footer ou dans votre page présentant votre politique cookies, vous donnez la possibilité à vos internautes d’afficher à nouveau le privacy center de tarteaucitron.js :
<a href="#" onclick="tarteaucitron.userInterface.openPanel();">Gestion des cookies</a>
5. Customiser la bannière cookies
Avec tarteaucitron.js, même en version gratuite, il est possible de modifier l’apparence et les couleurs de la bannière cookies et de la pop-up de gestion des cookies. C’est ce que j’ai fait sur mon site pro. Cela demande quelques connaissances en CSS, bien sûr, et si l’envie vous en dit, rendez-vous dans le dossier /css et le fichier tarteaucitron.css. Cette technique fonctionne si vous avez installé les fichiers de tarteaucitron, directement sur votre serveur FTP. Notez qu’il est aussi possible de modifier les textes de votre bandeau cookie en éditant le fichier tarteaucitron.fr.js du dossier /lang.
Personnellement, la tarte au citron ne fait pas partie de mes desserts préférés. Mais lorsqu’il s’agit de bannière cookies et privacy, c’est une toute autre histoire 😉 Une petite part de tarte au citron ?
Si vous utilisez déjà tarteaucitron.js sur votre site ou si vous avez des questions, n’hésitez-pas à publier un commentaire ci-dessous ! Je vous répondrai dès que possible.
Bonjour,
nous devons intégrer plusieurs tag GTM dans un même site, qui utilise tarteaucirton.
Malheureusement nous n’avons pas trouvé comment faire (pour plusieurs UA , oui).
Avez-vous une idée ?
Merci
Cordialement
Nicolas
Bonjour, avez-vous besoin d’intégrer plusieurs containers GTM et/ou plusieurs tags Google Analytics ? Comme indiqué dans mon article, le mieux à mon avis est d’intégrer les différents containers GTM sans les fonctions tarteaucitron. Ensuite, vous pouvez appeler vos différents tags analytics via plusieurs appels de la fonction job de tarteaucitron dans vos containers GTM.
Merci pour ces informations très utiles.
J’aimerais pouvoir garder mes balises (tags: google analytics, pixel facebook mais aussi des trackings des clics sur les liens vers des pages externes par exemple) et ensuite avoir une variable cookie pour savoir si le cookie en question est accepté ou non pour pouvoir déclencher le tracking depuis GTM. Donc j’aurais par exemple 3 types de cookies: analytique, social et campagnes.. Est-ce qu’il est possible de gérer ça avec les services custom de tarte au citron? Je ne trouve pas trop d’informations qui explique comment utiliser ces services..
Bonjour Sophie et désolé pour le délai de réponse. A priori, il n’est pas encore possible avec Tarteaucitron de donner la possibilité aux utilisateurs d’accepter une catégorie de tags. L’acceptation se fait au global ou par service / outil (Google Analytics, Facebook…). Le problème a d’ailleurs été remonté par un utilisateur sur le github du projet : https://github.com/AmauriC/tarteaucitron.js/issues/455. Je pense que vous pouvez regarder aussi la solution Cookiebot pour votre besoin : https://digital-analyst.fr/1560-configurer-cookiebot-dans-google-tag-manager/
Bonjour et merci pour le tuto
Quand on regarde Google Page speed, le tag TAC fait mal et fait baisser le score des pages assez nettement. Le fait de passer par TGM peut il ameliorer le score ou voyez vous d’autres options pour y arriver ?