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 😊

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.
• Supprimez simplement la valeur de l’ID du service que vous souhaitez utiliser. Dans le cas d’analytics il s’agit d’un UA-xxxxxxxx-x. Gardez la valeur vide. Si la valeur n’est pas une chaine délimitée par = 'string' mais une valeur numérique remplacez la valeur numérique par une chaîne vide = ''.

<script type="text/javascript">
    tarteaucitron.user.analyticsUa = '';
    tarteaucitron.user.analyticsMore = function () { /* add here your optionnal ga.push() */ };
    (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

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);
                }
            }

En rajoutant cette ligne 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.

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.

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.