Si vous n’avez encore jamais entendu parler de Tarteaucitron il s’agit de l’une des plus ancienne et des plus performante (qui plus est française) solution de gestion du consentement des visiteurs d’un site web. Elle existe en version gratuite comme expliqué dans l’article correspondant et est logiquement très connue des éditeurs de sites web français.
Ses points forts sont nombreux :
- La solution est Open Source ce qui lui permet d’être tenue à jour par une large communauté de développeurs
- Elle existe en version gratuite ce qui vous évite d’alourdir vos charges avec le sujet RGPD
- Elle est facile à mettre en place dans son utilisation standard
- Elle s’installe sur votre hébergement web ce qui évite les appels externes et la maintient dans une pose de cookies 1rst
Et elle n’a que peu d’inconvénients :
- La nécessité de l’installer sur votre serveur est problématique avec les CMS en SaaS comme Shopify par exemple
- Il faut jouer un peu avec son code pour une installation avancée dans GTM mais nous allons voir comment
Création et intégration de la bannière de consentement
Dépose du code sur votre hébergement web
La première étape de l’installation de Tarteaucitron consiste à télécharger son script et à l’héberger sur votre site web.
Le téléchargement se fait directement depuis le GitHub de Tarteaucitron.
Vous y récupérez la dernière version du code pour le décompresser sur votre ordinateur.
Le dossier ainsi crée aura un nom du type « tarteaucitron.js-Numero.De.Sa.Version ». Le plus simple pour la suite est de raccourcir ce nom pour ne garder simplement que « tarteaucitron ».
Direction ensuite votre logiciel FTP favoris pour aller déposer ce dossier à la racine de l’hébergement de votre site web.
Intégration du script sur votre site
La seconde étape est la plus simple de toutes. Rendez vous pour cela sur la page du guide d’installation de Tarteaucitron pour y récupérer le code Javascript à intégrer.
Comme vous le voyez il suffit de jouer avec les options de ce script qui sont bien commentées pour personnaliser la bannière qui sera générée.
Si vous ne savez pas trop quoi faire dans cette personnalisation vous pouvez aussi très bien laisser ce code en l’état et le poser tel que sur votre site.
<script src="/tarteaucitron/tarteaucitron.js"></script>
<script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "", /* Privacy policy url */
"bodyPosition": "bottom", /* or top to bring it as first element for accessibility */
"hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
"cookieName": "tarteaucitron", /* Cookie name */
"orientation": "middle", /* Banner position (top - bottom) */
"groupServices": false, /* Group services by category */
"serviceDefaultState": "wait", /* Default state (true - wait - false) */
"showAlertSmall": false, /* Show the small banner on bottom right */
"cookieslist": false, /* Show the cookie list */
"closePopup": false, /* Show a close X on the banner */
"showIcon": true, /* Show cookie icon to manage cookies */
//"iconSrc": "", /* Optionnal: URL or base64 encoded image */
"iconPosition": "BottomRight", /* BottomRight, BottomLeft, TopRight and TopLeft */
"adblocker": false, /* Show a Warning if an adblocker is detected */
"DenyAllCta" : true, /* Show the deny all button */
"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
"highPrivacy": true, /* HIGHLY RECOMMANDED 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 */
"useExternalJs": false, /* If false, the tarteaucitron.js file will be loaded */
//"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */
"readmoreLink": "", /* Change the default readmore link */
"mandatory": true, /* Show a message about mandatory cookies */
"mandatoryCta": true /* Show the disabled accept button when mandatory on */
});
</script>
Ce code doit être placé dans la section head de votre site web. Comme pour Cookie Consent Generator je vous conseille de le poser plutôt directement sur votre site dans un fichier du template ou depuis le back office de votre CMS que par GTM que nous utiliserons pour poser et conditionner nos différents tags analytics et publicitaires.
Le plus simple reste donc de la placer à côté du code de GTM. Autre conseil au passage ; la solution Tarteaucitron prévoit la modification du tag GTM pour le conditionner aussi au consentement des visiteurs. Je vous recommande de ne pas le faire et de garder le code GTM d’origine car lui même ne pose aucun suivi de vos visiteurs (ce sont les tags qu’il héberge qui le font). Cela permettra de gérer au mieux les déclenchements sans risque d’erreurs à ce niveau.
Ne soyez pas non plus étonnés si à ce stade la bannière ne s’affiche pas, même avec son code posé. En effet tant que nous ne lui donnons pas de tags à conditionner elle n’est pas utile et reste donc invisible.
Conditionnement standard des tags
Comme expliqué dans le guide de fonctionnement de Tarteaucitron les tags que l’on souhaitent conditionner ne doivent plus être utilisés dans leur version d’origine mais dans une version alternative proposée par la solution.
Par exemple le tag du pixel marketing Facebook se présente comme ceci dans sa version « standard ».
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'VOTRE-ID'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
Mais pour le conditionner nous allons utiliser le code alternatif fournis par Tarteaucitron qui se présente comme ceci.
<script type="text/javascript">
tarteaucitron.user.facebookpixelId = 'VOTRE-ID';
tarteaucitron.user.facebookpixelMore = function () { /* add here your optionnal facebook pixel function */ };
(tarteaucitron.job = tarteaucitron.job || []).push('facebookpixel');
</script>
Comme vous le voyez la syntaxe du code est très différente. C’est elle (notamment la 3ième ligne) qui prévient la solution que le pixel Facebook doit être envoyé avec comme identifiant celui de la ligne 1.
En posant ce code par GTM comme ci-dessus sur l’ensemble des pages du site nous allons donc faire 2 choses :
- Initier l’affichage de la bannière qui demandera aux visiteurs leur accord pour ce pixel
- Lancer ou bloquer le pixel en fonction de la réponse de leur réponse
Conditionnement avancé des tags dans GTM
La méthode standard de conditionnement des tags proposée par Tarteaucitron présente l’avantage d’être simple et efficace mais elle présente aussi deux inconvénients :
- Les tags ne sont plus posés dans leur version standard ce qui présente des risques d’erreurs
- Il n’est pas possible d’utiliser une méthode de gestion de tags plus avancée comme le Consent Mode de Google
Pour ces raisons il pourrait être au moins parfois préférable d’utiliser un conditionnement plus classique par GTM qui consiste à récupérer le consentement des visiteurs pour un tag donné, de passer cette réponse à GTM et de créer un déclencheur qui lance le tag uniquement dans les cas de réponse favorable.
Personnalisation d’un tag Tarteaucitron pour envoyer un événement à GTM
Prenons par exemple le code GA4 fournis par le guide d’installation de la solution.
Comme la plupart des codes fournis par Tarteaucitron il comprends 3 lignes principales (nous ne nous occuperons pas ici de la ligne annexe.
- La première ligne comprends juste l’identifiant de la propriété GA4 à envoyer à Tarteaucitron.
- La seconde permet de rajouter un code Javascript à déclencher en cas d’acceptation par l’internaute du suivi GA4 ; c’est cette ligne qui va nous intéresser ici
- La troisième envoie le code GA4 final en cas d’acceptation mais envoie aussi l’info de l’acceptation au cookie crée par Tarteaucitron ; elle nous intéressera pour l’option suivante
En personnalisant le code de la ligne 2 nous pouvons donc envoyer un événement à GTM quand le visiteur accepte le cookie GA4.
Son nom n’est pas très important du moment qu’il est spécifique pour vous. Par exemple :
tarteaucitron.user.gtagMore = function () { dataLayer.push({ 'event': 'tarteaucitron_ga4', }); };
Et nous pouvons ajouter ainsi des évènement spécifiques pour chaque tag. Comme c’est surtout la mise en place du consent mode Google qui nous intéresse nous le ferons ici pour GA4 et Google Ads. Cela donne le code ci-dessous à envoyer par GTM sur toutes les pages du site.
Une fois cette balise en place il ne reste plus dans GTM qu’à créer des déclencheurs spécifiques lors de la réception de ces deux évènements. Par exemple pour GA4 :
Et si vous souhaitez ainsi utiliser le mode consentement Google que je détaillerai dans un autre article vous pouvez maintenant lancer votre balise d’initialization du consentement sur toutes les pages, suivies des balises d’update pour l’analytics et les ads sur les deux déclencheurs que nous venons de générer.
Personnalisation d’un tag Tarteaucitron pour travailler dans GTM sur le contenu du cookie dédié à la solution
Comme expliqué plus haut une partie du code fournis par Tarteaucitron pour chaque tag envoie au cookie crée par la solution l’état d’acceptation du tag concerné par le visiteur. C’est une fonctionnalité qu’il peut être intéressant d’utiliser en méthode alternative à l’envoi d’un événement dédié.
La méthode de mise en place n’est pas très complexe. Nous allons tout d’abord créer une balise dans GTM déclenchée sur toutes les pages du site qui ne contient que la ligne en question du code Tarteaucitron. Comme dans l’exemple précédent voici ce que cela va donner pour GA4 plus Google Ads.
<script type="text/javascript">
(tarteaucitron.job = tarteaucitron.job || []).push('gtag');
(tarteaucitron.job = tarteaucitron.job || []).push('googleads');
</script>
La première ligne envoie l’état d’acceptation de GA4 au cookie tarteaucitron et la seconde l’acceptation de Google Ads.
Pour récupérer ces infos dans GTM il faut y créer une variable de type cookie. Le nom du cookie est celui présent dans le code d’intégration de Tarteaucitron ; « tarteaucitron » si vous ne l’avez pas modifié.
A partir de la si vous basculez en mode prévue de GTM vous verrez que la valeur de cette variable de type cookie varie en fonction de l’acceptation des tags GA4 et Google Ads.
En cas d’acceptation les solutions sont sur « true » (par exemple gtag=true).
Et en cas de refus chaque tag concerné basculera sur false. Ex : « !gtag=false!googleads=false »
A partir de la vous pouvez facilement créer un déclencheur dans GTM sur l’événement que vous souhaitez (page vue ou autre) qui ne sera vérifié par exemple que quand GA4 sera accepté par le visiteur (gtag=true) et vous en servir en méthode alternative à la précédente.
Attention toutefois à un point. La lecture du cookie ne se fait qu’une fois par GTM à chaque chargement de page mais lorsqu’un visiteur modifie ses choix de consentement la page n’est pas toujours rechargé automatiquement. Il peut donc y avoir avec cette méthode quelques cas où le conditionnement ne sera pas exact.
Sachez, si besoin, qu’il existe un moyen d’ajuster le code source de Tarteaucitron dans le fichier tarteaucitron.js pour forcer le rechargement de la page à chaque changement de réglages du visiteur mais je ne le détaillerai pas ici.