> Tarteaucitron : La gestion des cookies simplifiée 🍋

8 minutes de lecture

Introduction

Dans l’écosystème web actuel, la gestion des cookies est devenue primordiale (et obligatoire). Ces petits fichiers sur le navigateur de l’utilisateur sont importants pour l’expĂ©rience utilisateur, la personnalisation du contenu et la mesure de l’audience.

Avec le RGPD en Europe, les sites web doivent gérer les cookies pour respecter la vie privée des utilisateurs et la loi. Négliger cette gestion peut entraîner des sanctions sévères et affecter la réputation de votre entreprise en ligne.

Face à ce défi, Tarteaucitron se présente comme une solution de choix pour la gestion des cookies. Cet outil innovant, entièrement développé en France (cocorico 🇫🇷), vous permet de respecter facilement les exigences du RGPD en matière de cookies.

Il permet aux utilisateurs de choisir les cookies. Il garantit que les scripts ne se chargent que si lutilisateur donne son accord préalable. Facile à installer et flexible, ce dispositif est essentiel pour les sites web qui se soucient de la vie privée de leurs utilisateurs.

Qu’est-ce que Tarteaucitron ?

Le principe est assez simple, aucun cookie n’est déposé par défaut sans consentement de l’internaute.

L’utilisateur a toujours le choix d’accepter ou de refuser tous les cookies de la mĂŞme manière. Il n’y a pas de stratagèmes pour refuser les cookies dans des menus cachĂ©s.

Cet outil est un succès mondial utilisé sur plus de 35 000 sites, y compris des sites gouvernementaux français. Son interface est facile à utiliser et son installation est simple.

Chez Numos, nous sommes persuadés que c’est LA solution idéale pour tous ceux souhaitant se conformer au RGPD. Ce qui nous a conduit à être la première agence à les sponsoriser sur GitHub.

L’outil est en effet Open Source et peut-ĂŞtre dĂ©ployĂ© sans coĂ»ts pourvu que vous ayez les compĂ©tences techniques. Attention, la version auto hĂ©bergĂ©e n’a pas d’interface web pour modifier les traductions ou l’apparence du bandeau. Vous pourrez quand mĂŞme le faire, mais en modifiant directement le code. Il faudra mettre les mains dans le cambouis.

Aujourd’hui, Tarteaucitron est un indispensable dans les outils proposés par Numos à ses clients.

Pourquoi choisir Tarteaucitron pour la gestion des cookies ?

L’un de ses principaux avantages est, pour la version PRO, sa facilité d’installation.

Après avoir installé le script, il reconnaîtra automatiquement les balises sur votre site et ajustera le bandeau en conséquence. Nul besoin de déclarer manuellement chaque service.

Le deuxième avantage est que vous ĂŞtes automatiquement conforme au RGPD. Les balises dĂ©tectĂ©es sont bloquĂ©es jusqu’Ă  ce que l’utilisateur donne son consentement. Au chargement de la page, aucun tracker n’est donc dĂ©clenchĂ© sans l’accord prĂ©alable accordĂ© par l’utilisateur.

Un dernier argument pour sauter le pas ? Le prix de la version pro est grosso modo alignĂ© Ă  ceux de la concurrence avec un prix de 15 euros. Tarteaucitron se distingue de ses concurrents en proposant un tarif illimitĂ© pour les sites, sous-domaines et pages visitĂ©es. Contrairement Ă  Axeptio qui facture un supplĂ©ment au-delĂ  de 5000 pages vues par mois.

Astuce des pros : La version annuelle Ă©conomise 2 mois d’abonnement, soit 150 euros par an. La version Ă  vie coĂ»te 490 euros, ce qui Ă©quivaut Ă  plus de 3 ans d’abonnement.

Deuxième astuces des pros : La version gratuite de tarte au citron comprend l’installation de 3 services par site. Ce qui signifie que vous n’ĂŞtes pas obligĂ© d’utiliser la version pro si vous installez par exemple uniquement Google Analytics et Google ads sur votre site par exemple.

Installation via le plugin WordPress (Niveau DĂ©butant)

Tarte au citron propose pour les dĂ©butants sur WordPress l’installation de son outil via un plugin très simple qui ne nĂ©cessitera aucune compĂ©tence en dĂ©veloppement. Ce dernier s’installe très simplement via la marketplace officielle de WordPress, que vous pouvez retrouver sur l’accès administrateur de votre site.

La seule configuration que vous devrez faire sera de récupérer votre identifiant unique ainsi que votre token directement sur le site de Tarte au citron, via vos paramètres. Pour, dans un second temps, sélectionner les services via un menu déroulant que vous souhaitez installer sur votre site et fournir votre identifiant unique pour ce service.

Par exemple, votre identifiant Google Analytics pour la balise Google Analytics et votre identifiant Google Ads pour la balise Google Ads.

Installation et activation de tarteaucitron
Installation et activation de tarteaucitron
Connexion à tarteaucitron pour récupérer ses identifiants
Connexion à tarteaucitron pour récupérer ses identifiants
Exemple d'identifiants Tarteaucitron à récupérer
Exemple d’identifiants Tarteaucitron Ă  rĂ©cupĂ©rer
Exemple d'ajout du service Google Ads
Exemple d’ajout du service Google Ads
Votre bannière de gestion des cookies est active
Votre bannière de gestion des cookies est active

Installation manuelle (Niveau expert)

Dans notre cas, nous allons voir comment le dĂ©ployer sur WordPress en utilisant les Ă©lĂ©ments de GeneratePress et le fichier functions.php de notre thème enfant. L’installation de la version PRO est diffĂ©rente de celle-ci. Avec la version PRO, il suffit de mettre le script sur le site et de tout gĂ©rer via l’interface.

Toutes les versions sont disponibles sur le github officiel Ă  cette adresse.

Comment télécharger tarteaucitron

Les fichiers contenus dans le .zip que nous venons de tĂ©lĂ©charger devront ĂŞtre placĂ©s dans l’un des dossiers de votre installation WordPress. Pour l’exemple, j’ai crĂ©Ă© un dossier « tarteaucitron » avec ce chemin : « wp-content/themes/generatepress_child/tarteaucitron » dans lequel je viens dĂ©poser uniquement les fichiers nĂ©cessaires (cf image ci-dessous).

Où déposer les fichier tarteaucitron

Retenez bien l’emplacement de votre installation car nous allons en avoir besoin pour la prochaine Ă©tape.
Actuellement Tarteaucitron est disponible, mais il n’est jamais appelĂ©.

Rendez-vous dans le fichier functions.php pour y ajouter le bout de code ci-dessous permettant d’appeler le script tarteaucitron.js et quelques rĂ©glages.

<?php

function tarteaucitron_init() {
    ?>
    <script src="/wp-content/themes/generatepress_child/tarteaucitron/tarteaucitron.js"></script>
    <script type="text/javascript">
        tarteaucitron.init({
          "privacyUrl": "", /* Privacy policy url */
		  "DenyAllCta": false,
		  "closePopup": true,
          "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
          "cookieName": "tartaucitron", /* Cookie name */
          "orientation": "middle", /* Banner position (top - bottom) */
          "showAlertSmall": false, /* Show the small banner on bottom right */
          "cookieslist": false, /* 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": true, /* Disable auto consent */
          "handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
          "removeCredit": true, /* Remove credit link */
          "moreInfoLink": false, /* Show more info link */
		  "useExternalCss": false,
        });
		
		document.addEventListener("DOMContentLoaded", function() {
   		window.addEventListener('tac.root_available', function() {
			setTimeout(function() {
				document.getElementById('tarteaucitronCloseCross').innerHTML = tarteaucitron.lang.denyAll;
				tarteaucitron.addClickEventToElement(document.getElementById('tarteaucitronCloseCross'), function(){tarteaucitron.userInterface.respondAll('false');});
			}, 200);
		
        
   })
})
    </script>
    <?php
}
add_action('wp_head', 'tarteaucitron_init');

Il ne nous reste plus qu’Ă  configurer un service en utilisant le guide d’installation officiel :

Choisir quel script déployer
Exemple de code Ă  ajouter

Ce code permet de dĂ©ployer Google Analytics 4 sur notre site web et d’attendre le consentement d’un utilisateur pour le charger. Nous allons placer ce bout de code dans le footer de notre site pour ne pas ralentir inutilement le temps de chargement de nos pages.

<script type="text/javascript">
        tarteaucitron.user.gtagUa = 'G-XXXXXXXXX';
        // tarteaucitron.user.gtagCrossdomain = ['example.com', 'example2.com'];
        tarteaucitron.user.gtagMore = function () { /* add here your optionnal gtag() */ };
        (tarteaucitron.job = tarteaucitron.job || []).push('gtag');
</script>

Une fois que vous avez tout sauvegardĂ© et Ă©ventuellement vidĂ© votre cache, vous pouvez naviguer sur la page d’accueil de votre site oĂą vous devriez ĂŞtre accueilli par le bandeau cookie :

Exemple d'un bandeau cookie tarteaucitron

Utilisation optimale de Tarteaucitron

Sachez que ce dispositif est déjà très flexible dans sa configuration par défaut. Le bandeau change de couleur selon la préférence système et la langue définie dans le navigateur.

Les plugins de mise en cache ou d’optimisation des fichiers javascripts peuvent crĂ©er des conflits avec le script et empĂŞcher son chargement. Faites attention Ă  cela.

Dans la configuration de WP Rocket j’ai par exemple dû exclure les fichiers de tarteaucitron de l’optimisation :

/wp-content/themes/generatepress_child/tarteaucitron/(.*).js

La mise en conformitĂ© Consent Mode V2 est dĂ©sormais activable très facilement via une simple case Ă  cocher dans l’interface de Tarteaucitron :

image 12

Conclusion

En conclusion, Tarteaucitron, est une solution incontournable pour la gestion des cookies sur votre site web. Son approche open-source, la facilité d’utilisation et l’engagement envers la conformité et le respect de la vie privée font de cet outil un choix fiable et pertinent pour votre site web.

Que vous soyez dĂ©butant ou pro, l’ajout de ce service sur votre site amĂ©liorera la confiance des utilisateurs. De plus, cela respectera la loi en vigueur. Si vous souhaitez le dĂ©ployer sur votre site web, nous pouvons vous accompagner. Contactez-nous !

Alors, on se lance ?

Envoyez-nous un message ou appelez directement, on ne mord pas 🙂

Logo de Numos dans le pied de page
Agence Web Numos : Les Experts en DĂ©pannage & Maintenance WordPress Ă  Lyon

Ressources

Blog

Glossaire