Le tracking sur un site web est indispensable pour savoir ce que font vos utilisateurs. Google Analytics, Facebook Pixel, Linkedin, et d’autres encore sont autant de scripts qui vous aident dans la compréhension de votre audience.
Depuis l’arrivée du RGPD, il (normalement) obligatoire de demander le consentement aux internautes pour l’utilisation de cookie, pour pouvoir les suivre lors de leur visite. De nombreux outils ont vu le jour pour aider les propriétaires de sites à rester dans les clous.
Parmi eux un outil très connu : Tarteaucitron
Si vous connaissez Tarteaucitron et que vous êtes utilisateur de Google Tag Manager, vous avez du vous poser la question :
« Comment utiliser Tarteaucitron combiné à Google Tag Manager », sachant que l’intérêt est de pouvoir utiliser GTM le plus normalement possible, c’est à dire avec les balises que vous propose la plateforme. En effet, il existe une méthode pour combiner les deux, mais qui vous oblige à n’utiliser que des balise custom HTML ce qui je trouve est dommage.
Du coup, l’utilité de Tarteaucitron avec ma méthode ne se trouve plus dans l’idée de bloquer ou non des scripts, mais plutôt d’utiliser Tarteaucitron comme un outil qui va indiquer à GTM quoi faire.
Dans ce tuto je vais vous montrer comment configurer GTM et comment modifier le comportement de Tarteaucitron pour que tout fonctionne ensemble 😊
Il s’agit de Tarteaucitron version 20200521 que j’ai modifié comme décris dans mon tuto. Il ne vous restera qu’à le customiser pour qu’il s’intègre bien dans votre site. C’est 👉 par ici
La configuration en détail
Rendez-vous dans Google Tag Manager où vous allez créer une nouvelle variable utilisateur.
- Sélectionnez comme type de variable « Cookie propriétaire »
- Le nom du cookie correspond au nom que vous aurez donné dans le bloc de configuration de tarteaucitron que vous avez collé dans votre header
<script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "https://cedric-duma.fr/politique-de-confidentialite/", /* 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": true, /* Show a Warning if an adblocker is detected */
"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
"highPrivacy": true, /* Disable auto consent */
"handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */
"removeCredit": true, /* 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>
Pourquoi créer cette variable GTM me direz vous ? Simplement parce que Tarteaucitron crée un cookie dans lequel il va stocker des valeurs qui correspondent au choix de l’utilisateur et ce cookie dans mon cas s’appelle « tartaucitron ». Nous allons récupérer la valeur de ce cookie pour conditionner le déclenchement de nos balises sur GTM. Oui ! Je vois que vous commencez à comprendre 😉
- Suivez la méthode d’installation manuelle de Tarteaucitron et copiez le morceau de code que propose tarteaucitron pour le service que vous souhaitez utiliser. Par exemple ici Google Analytics.
- Gardez simplement la ligne qui push le service en question : (tarteaucitron.job = tarteaucitron.job || []).push(‘nomduservice’);
<script type="text/javascript">
(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
</script>
Votre code TAC pour Google Analytics étant en place, il est temps de retourner sur GTM et de créer votre déclencheur 😉
Pour notre exemple, la balise Google Analytics se déclenche sur toutes les pages, mais elle doit également prendre en compte la valeur de notre cookie. Si celui-ci contient analytics=true cela veut dire que l’utilisateur a donné son accord pour que ce service soit activé depuis son panneau de contrôle de TAC.
Pour cela nous allons créer un déclencheur que nous appelons « Analytics – TRUE »
- Type de déclencheur « Page vue – DOM prêt«
- Sélectionnez « Certains événements déclenchés lorsqu’un objet DOM est prêt«
- Cherchez votre variable que vous avez créée (pour moi « Cookie Tarteaucitron« )
- Correspond à l’expression régulière :
.*(analytics=true).*
Maintenant que nous possédons toutes les conditions de déclenchement de notre balise, nous allons créer un nouveau déclencheur de type « groupe de déclencheurs »
Nous sélectionnons les deux déclencheurs qui composeront ce groupe :
- All pages
- Analytics – TRUE
.*(analytics=true).* mais si vous faites cela pour un autre service il faudra lire le contenu du cookie pour ce service dans les outils de développement de votre navigateur dans l’onglet Application / Cookies. Sur la ligne correspondant au nom du cookie de TAC, vous allez avoir l’ensemble des services que vous avez sélectionné et leur état
- !nom_du_service=true si l’utilisateur a donné son accord.
- !nom_du_service=false si l’utilisateur à refusé l’utilisation de ce service.
- !nom_du_service=wait si l’utilisateur n’a pas encore fait de choix.
Maintenant que votre première balise est configurée il est nécessaire de modifier un peu le code de Tarteaucitron. En effet, lorsque vous allez autoriser un service pour la première fois (et même les fois suivantes) au moment où vous fermez le panneau, la page ne se réactualise pas. Cela est dû au fait que nous détournons un peu l’utilisation de Tarteaucitron qui n’a pas besoin de recharger la page pour lancer les services alors que nous oui étant donné que notre déclencheur que nous avons créé tout à l’heure qui lit le contenu du cookie se déclenche une fois que le DOM est prêt.
Pour contourner cela rien de compliqué. il faudra ajouter une ligne au fichier tarteaucitron.js après la ligne 790 :
// if not already launched... launch the service
if (status === true) {
if (tarteaucitron.launch[key] !== true) {
tarteaucitron.pro('!' + key + '=engage');
tarteaucitron.launch[key] = true;
tarteaucitron.sendEvent(key + '_loaded');
tarteaucitron.services[key].js();
}
tarteaucitron.reloadThePage = true; // Ligne ajoutée : on recharge la page
}
tarteaucitron.state[key] = status;
tarteaucitron.cookie.create(key, status);
tarteaucitron.userInterface.color(key, status);
},
Il faut également prendre en compte le fait qu’un utilisateur puisse accepter ou refuser tous les cookie en une seule fois en cliquant sur « accepter tous les cookies » ou « interdire tous les cookies ».
De base lorsque l’on clique sur « interdire tous les cookies » et que l’on ferme le panneau de configuration de Tarteaucitron, la page se recharge (c’est dans le fonctionnement normal de TAC). Par contre lorsque l’on souhaite tout activer d’un coup et que l’on ferme ensuite le panneau, il n’y a pas de rechargement de la page.
Pour modifer celà, il faut ajouter une autre ligne du code de tarteaucitron.js après la ligne 760 :
for (index = 0; index < tarteaucitron.job.length; index += 1) {
service = s[tarteaucitron.job[index]];
key = service.key;
if (tarteaucitron.state[key] !== status) {
if (status === false && tarteaucitron.launch[key] === true) {
tarteaucitron.reloadThePage = true;
}
if (tarteaucitron.launch[key] !== true && status === true) {
tarteaucitron.pro('!' + key + '=engage');
tarteaucitron.launch[key] = true;
tarteaucitron.services[key].js();
tarteaucitron.reloadThePage = true; // Ligne ajoutée : on recharge la page
}
tarteaucitron.state[key] = status;
tarteaucitron.cookie.create(key, status);
tarteaucitron.userInterface.color(key, status);
}
}
Update : Pour actualiser la page lorsque l’utilisateur clique sur « Ok, tout accepter » dans le bandeau, il faut modifier une ligne de code à la ligne 404 du fichier tarteaucitron.js en rajoutant une autre action au clic : window.location.reload(true);
Le paramètre « true » permet de forcer le rechargement sans utiliser le cache.
html += ' <button type="button" id="tarteaucitronPersonalize" onclick="tarteaucitron.userInterface.respondAll(true); window.location.reload(true);">';
En modifiant ces lignes vous forcez le chargement de votre page une fois que le panneau se referme si l’utilisateur a choisi d’accepter 1 ou plusieurs services ou lorsqu’il cliquera sur « tout accepter » depuis le bandeau.
Vous pouvez ensuite tester de supprimer l’autorisation et vous constaterez qu’à la fermeture la page se recharge, ce qui est un comportement normal de Tarteaucitron étant donné que de potentiels scripts qu’on ne souhaite plus voir actifs le sont déjà.
Refaites vos tests pour chacun des services que vous souhaitez utiliser et pour lesquels vous aurez suivi la même procédure.
Vous pouvez légitimement penser que si un internaute ne souhaite pas que Google Analytics soit actif, il ne souhaite pas non plus que les évènements liés à Google Analytics le soient.
Ca y est vous avez réussi votre installation vous devriez pouvoir contrôler vos scripts GTM en accord avec le RGPD ! Bravo 👏
Petite information tout de même : si vous mettez à jour votre script Tarteaucitron, pensez à le remodifier pour que cela fonctionne à nouveau 😋
Laissez moi vos commentaires si vous avez pu mettre en place cette méthode ou bien une autre.
Si un service n’existe pas
Il est probable que vous vous retrouviez dans la situation d’un service qui n’existe pas avec Tarteaucitron et par conséquent vous allez devoir créer vous-même ce service.
Il faut noter que la méthode que je décris ci-dessous n’est valable que dans le cas où vous souhaitez utiliser Tarteaucitron avec Google Tag Manager comme décris plus haut. Si vous utilisez Tarteaucitron de façon normale, la méthode qui suit n’est pas faite pour vous.
Imaginons donc que vous souhaitiez rajouter le service « toto » que Tarteaucitron ne propose pas (pour l’instant 😋).
Dans le fichier tarteaucitron.services.js vous avez tous les services qui sont gérés par TAC. Il suffira d’en recréer un à la fin de votre fichier sur le modèle d’un service existant :
// TOTO
tarteaucitron.services.toto= {
"key": "toto",
"type": "analytics", // analytics/ads/other
"name": "Toto service Analytics",
"uri": "https://www.toto.com/privacy", // le lien vers la partie traitant de la confidentialité pour ce service
"needConsent": true,
"cookies": ['__totoid', '__totoprivacy'], //si vous connaissez les cookies déposés, renseignez-les ici.
"js": function () {
// normalement ici on exécute du code propre au service, mais dans notre cas, ce morceau de code ne servira qu'à afficher le nom du service dans votre bandeau
}
};
Maintenant que votre service est créé, sauvegardez votre fichier. Il faut désormais créer un appel à ce service et pour cela, à l’instar des autre service il faut rajouter un morceau de code qui va indiquer à Tarteaucitron qu’il doit utiliser ce service et l’afficher.
<script type="text/javascript">
(tarteaucitron.job = tarteaucitron.job || []).push('toto');
</script>
30 Comments
Pas besoin de faire un rechargement de la page…juste utiliser la fonction de call back des services….en poussant un dataLayer qui sera exploité dans le déclenchement des tags…
Bonjour Cédric,
Merci pour ton message. Peut-être que tu peux être plus précis ? 🙂
Bonjour
J’ai testé sur mon site mais ça ne fonctionne pas.
En fait ce que j’aimerai c’est que Google Analytics soit chargé sans être bloqué par TAC, car j’ai implémenté la fonction anonymizeip et j’ai une chute du trafic GA puisque bloqué par TAC.
Est-il possible que TAC n’affiche que l’avertissement pour l’utilisation de GA et la possibilité de refuser mais que par défaut ce soit accepté ?
Bonjour Cathy et merci pour ton message.
En fait, je te déconseille de bypass TAC en mettant Google Analytics en direct. Le fait d’anonymiser l’IP n’est pas suffisant pour s’affranchir de la demande de consentement. C’est une réalité d’avoir une chute de trafic constatée sur GA lorsque l’on met en place un consentement. Maintenant ce qui est faisable c’est que le bandeau qui apparaît en bas et qui permet de personnaliser le consentement soit plus visible. J’entends par là, en plein milieu de l’écran de l’utilisateur, le gênant pour naviguer. De ce fait l’utilisateur sera « obligé » de consentir ou non. J’ajoute le fait que l’acceptation par défaut ne respecte pas la RGPD. Par défaut et avant tout consentement l’utilisateur ne doit pas déjà être suivi. Mais ça c’est pour être dans les clous.
Il me semble que dans le script il y a cette ligne qui pourrait t’aider :
"highPrivacy": true, /* HIGHLY RECOMMANDED Disable auto consent */en mettant la valeur à « false » cela devrait faire ce que tu souhaites, mais encore une fois ce n’est pas censé être comme ça 😉
Bonjour Cédric,
Merci pour ton article qui va beaucoup m’aider. Cependant, il y a quelque chose qui ne reste pas clair pour moi. Où est ce que tu mets le script » tarteaucitron.init » ? Est ce qu’il faut/on peut le mettre dans GTM ou le mettre dans le head en dur ?
Merci d’avance pour ta réponse
Bonjour Laurent et merci ton commentaire 😊
Personnellement, j’ai mis en place tarteaucitron en dur sur le site. L’avantage de faire de cette façon est que c’est moi qui décide à quel endroit dans la page je mets en place le script. Ensuite dans le footer en dur également les différents « push » de chaque service.
Bonjour Cédric,
Article très intéressant.
J’essaie pour ma part d’intégrer TAC via GTM, mais, sans comprendre pourquoi, le script que j’ai hosté sur mon serveur, est bien appelé mais n’affiche rien.
Sauf erreur de ma part, cette partie semble absente de l’article?
Bonne journée
Bonjour Jérémy,
de ton site le script de paramétrage. Comme tu peux l’apercevoir au début de l’article, tu as un morceau de code qui correspond aux paramètres qui permettent à TAC de fonctionner. Tu adaptes en fonction de ton site à toi (nom du cookie, url de page de politique de confidentialité, etc…). Ensuite, TAC devrait s’afficher sur ton site. Si tu n’as pas déjà configuré un service, je t’invite à le faire.Merci beaucoup pour ton commentaire.
Par hosté sur ton serveur, j’imagine que tu évoques les fichiers scripts qui composent TAC ? Une fois que TAC est hébergé sur ton serveur il faut faire les appels. Effectivement, je ne précise pas comment installer TAC de base dans l’article. Il faut que tu insères dans le
Dis-moi si cela répond à ton souci ?
Bien à toi,
Bonjour Cédric,
Merci de ta réponse.
Justement, j’en suis à l’étape préliminaire à ton article.
J’ai bien intégré (via gtm mais j’avais aussi testé en dur) mon script : appel au tarteaucitron.js (ok), je vois bien les appels aux css / langue / service.
J’ai ensuite l’init, mais rien.
Même chose si je déclenche l’init via la console : je n’ai ni erreur, ni rien qui se passe et du coup ça me perturbe… d’où ma question initiale : un exemple de code d’intégration, meme si théoriquement il est dans la documentation de TAC…
Bonne journée
Jérémy, je te propose d’en discuter de vive voix si tu le souhaites. Je t’invites à me faire une demande de contact via le formulaire contact du site (j’ai essayé de t’envoyer un mail qui semble t-il ne passe pas avec l’adresse que j’ai via ton commentaire.)
Grand merci pour ces explications !!
Tout fonctionne excepté le CROSS DOMAIN.
Lorsque je suis la documentation sur comment activer le cross domain via GTM, rien ne se passe.
Faudrait-il configurer quelque chose dans le script TAC ?
Grand merci pour ces explications !
Bonjour Benjamin,
Merci beaucoup pour ton commentaire. Alors personnellement GTM je le lance de toute façon donc il est « hors du périmètre » de TAC. Ce sont tous les tags à l’intérieur que je conditionne. Maintenant si ton problème c’est que les balises ne fonctionnent pas pour le site A & B, à première vue ce que j’essaierai c’est d’avoir la même configuration de TAC sur le site A comme sur le site B. Même nom de cookie, etc. Site A & B on lance GTM sans passer par TAC. Après dans GTM si la configuration est la même et que tu as bien paramétré le cross domain de GTM ça devrait passer. J’ai jamais testé le cross domain, si tu as des nouvelles , je t’invite à nous le partager en commentaire 😊
Bonjour Cédric, j’ai bien suivi le tuto, excellent d’ailleurs 😉
Depuis que je l’ai mis en place, la collecte des données ne se fait plus.
Le tag manager est bien chargé, les balises sont bien appelées lors de la remontée des événements.
Aurais-je manquais une étape ?
Bonjour Mathieu,
Merci pour ton commentaire 🙂
Est ce que ton souci est résolu depuis ton message ? Sinon est ce qu’il est possible d’avoir un peu plus d’information ? Normalement si tu vois bien que ton tag analytics est bien chargé, que dans temps réel tu retrouve bien le fait que tu navigues sur le site, il n’y a pas de raisons que tu ne collectes plus de données. Juste je rappelle deux choses :
– j’ai utilisé une version spécifique de Tarteaucitron et pas la dernière version que propose le site officiel, c’est important parce que l’outil a été modifié au fil des versions.
– dans GTM toutes tes balises devront prendre en compte le fait qu’un service soit sur TRUE, c’est à dire que l’utilisateur ait fait le choix d’être suivi => valeur du cookie avec !lenomduservice=true
Bonjour Cédric,
Merci pour ton explication et pour toutes ces précieuses informations. Est ce que tu sais comment cela se passe et comment installer Google Tag Manager dans le cas de l’utilsation d’un cms qui utilse tarte au citron. En effet, je cherche à installer GTM sur un site drupal où tarte au citron est installé en tant que web service.
Merci d’avance pour ton aide,
Cordialement,
Souad
Bonjour Oscar,
Merci pour ton commentaire 🙂
Alors concernant Tarteaucitron installé en tant que Webservice (je ne savais pas que c’était possible), je suppose que la personne qui a ajouté Tarteaucitron à ce site Drupal a du prendre la dernière version de Tarteaucitron et que, par2 conséquent cette version là n’est pas adaptée à ma configuration. En effet, j’utilise une ancienne version de tarteaucitron que je propose en téléchargement. Quoiqu’il en soit si tu as un développeur sous la main, tu peux regarder avec lui dans quelle mesure il peut adapter le script de tarteaucitron déjà en place pour qu’il puisse faire la même chose que celui que j’ai modifié.
Bonjour Cedric.
Merci beaucoup pour cet article.
Stp, j’ai juste une petite partie que je ne comprends pas bien;
Tu expliques à un moment:
« Gardez simplement la ligne qui push le service en question : (tarteaucitron.job = tarteaucitron.job || []).push(‘nomduservice’); »
Mais dans la suite de l’article, je ne vois pas bien si on doit faire quelquechose avec.
Est-ce juste pour obtenir le nom du service ?
Merci bien
Laurent
Bonjour Laurent,
Merci pour ton commentaire ça fait plaisir 🙂
En gros cette ligne permet à Tarteaucitron d’afficher le service dans la modal.
Exemple tu veux mettre en place pour Google Analytics :
(Début de la balise script)
(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
(fin de la balise script)
Cette ligne permettra d’afficher le service Google Analytics. Tu fais la même chose pour tous les services que tu veux installer. Si un service n’existe pas dans tarteaucitron.services.js, tu suis ce que j’écris plus bas pour ajouter ce service.
Normalement cette ligne tu la retrouve dans la méthode d’installation manuelle de Tarteaucitron, mais je ne garde que le push du service pour l’afficher dans la modale.
Si tu as plusieurs services cela pourrait ressembler à ça :
(Début de la balise script)
(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
(tarteaucitron.job = tarteaucitron.job || []).push('unsecondservice');
(tarteaucitron.job = tarteaucitron.job || []).push('untroisiemeservice');
(fin de la balise script)
J’espère avoir répondu à ta question.
Bonjour,
Bravo pour le taf,
Si on ajoute un service cela veut dire qu’on peu potentiellement gérer les cdn ?
Merci tintin pour ton commentaire 🙂
Je comprends ce que tu souhaites faire avec les CDN ?
Bonjour
Article très intéressant, je vois que finalement vous utilisez Axeptio et non tarteaucitron, une raison particulière ?
49€ / mois me semble extrêmement cher pour un site avec un peu de trafic
Bonjour,
Merci pour votre commentaire 🙂
Tarteaucitron en l’état et comme je le présente est une alternative pour être le plus « RGPD friendly » sans passer par des outils payants. Il s’agit d’un hack de l’utilisation au départ. J’ai choisi d’utiliser Axeptio car dans le cadre de mon activité avec certains clients, j’ai eu besoin de mettre en place cette solution. Vous avez une offre à 15€ / mois qui est largement suffisante pour un petit budget/site.
De plus, avec des outils comme Axeptio ou Cookiebot pour ne citer qu’eux, vous avez la possibilité de setup le mode de consentement Google pour qu’il soit intégré à votre solution CMP. Particulièrement utile quand vous faites des campagnes Google et que vous voulez mieux analyser vos performances optimiser vos campagnes et cela que l’utilisateur ai refusé le suivi via les cookies ou qu’il n’ai pas encore donné son accord.
Bonjour,
Cédric et merci pour cet article. Je l’ai trouvé en cherchant comment faire pour utiliser TAC et le google consent mode.
Votre dernier commentaire semble répondre donc à ma question.
Sauf si votre passage sur Axeptio et dû à d’autre fonctionnalité, j’en déduis configurer TAC et le google consent mode via le TAG Manager n’est pas possible et qu’il me faut moi aussi passer par des solutions payantes. C’est bien cela ?
Bonjour Arnaud,
Merci beaucoup pour votre message. Effectivement, mon passage à Axeptio est entre choses dû au fait que de base Tarteaucitron ne soit pas (encore) compatible avec le mode de consentement Google et GTM. Et quand on sait que l’on peut récupérer 80% des données perdues, le choix est vite fait.
Salut, merci pour ce tuto qui me sera utile, je pense (je n’ai pas encore mis en pratique). Pour le moment, j’ai mis en place TAC sans GTM. J’ai juste une petite question, la preuve du consentement, on le trouve où s’il-te-plait 🙂 ?
Bonjour Adam,
Merci beaucoup pour ton commentaire. Comme je l’expliquais dans mes précédentes réponses. TAC n’est pas (encore) compatible avec le mode consentement Google. Il n’y a à mon sens rien qui te permet de récupérer une preuve que le consentement a été donné par l’utilisateur. Dans le cas où tu souhaites une solution plus complète, je te conseille de passer par Axeptio. Oui c’est un outil payant, mais le ticket d’entrée est bas : 9€HT/mois (il ont baissé leur prix). L’utilisation que je faisais de TAC était un peu détournée pour m’en servir avec GTM et être plus RGPD friendly. Mais si tu veux une vraie solution cela ne suffira pas 😉
Bonjour,
J’ai 70% d’acceptation des cookies sur tarte au citron mais google analytics capte seulement 20%.
Comment cela est possible ?
Merci d’avance
Bonjour,
Merci pour ton commentaire. Je suppose que tu utilises la version pro de Tartaucitron. Je ne saurai pas dire comment Tartaucitron récupère les informations pour dire que X% des utilisateurs acceptent les coookies ou non. En ce qui concerne Google Analytics, comment peux tu affirmer que ce que tu vois c’est 20% de l’ensemble ? J’ai fini par laisser tomber Tartaucitron au profit d’axeptio qui est beaucoup plus complet et qui n’est pas forcément plus cher que la version pro de Tartaucitron.
Bonjour,
avez-vous des informations concernant le Google Consent Mode V2 et TAC avec GTM ? Est-il compatible ?
Merci
Bonjour,
Malheureusement je pense pas que TAC soit compatible, il existe une liste de partenaires compatibles avec Google pour le mode de consentement V2. Si je dois vous recommander une CMP ce serait celle de SirData qui propose une version Freemium.