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.
• 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

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.

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>