Comment gérer les cookies avec Tarteaucitron

  1. Accueil  > Rédaction web  > 
  2. Comment gérer les cookies avec Tarteaucitron
12, Juil 2024
Comment gérer les cookies avec Tarteaucitron

Les cookies, utilisés avec Google Analytics, permettent aux créateurs de site de mesurer ses performances. Cependant, pour se conformer au RGPD, il est crucial de demander l’autorisation des utilisateurs avant de collecter ces données personnelles.

1. Présentation de Tarteaucitron

Le produit Tarteaucitron est proposé en deux formules :

  • La première formule est gratuite et minimaliste, mais elle est suffisante car elle respecte les lois sur les cookies.
  • La seconde, à 15 € par mois, est plus complète avec plusieurs langues et un plugin sur WordPress.

2. Téléchargement

Vous pouvez télécharger la dernière version du script depuis GitHub et extraire le fichier à la racine de votre projet.

3. Installation et configuration du script

Une fois le fichier extrait vous pouvez copier le code suivant et l’insérer dans votre fichier html, dans la section body. :

<html>
    <head>

        <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 */
          "showDetailsOnClick": true, /* Click to expand the description */
          "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 */
          "alwaysNeedConsent": false, /* Ask the consent for "Privacy by design" services */
                           
    	  "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 */
    
          //"customCloserId": "", /* Optional a11y: Custom element ID used to open the panel */
          
          "googleConsentMode": true, /* Enable Google Consent Mode v2 for Google ads and GA4 */
          
          "partnersList": false /* Show the number of partners on the popup/middle banner */
        });
        </script>

Attention !!!

Vous devez vérifier que la première ligne du code avec l’arborescence trateaucitron/trateaucitron.js correspond à votre nom de dossier. Après extraction du fichier, assurez-vous que le dossier conserve le nom tarteaucitron, comme illustré ci-dessous.

Une fois cette vérification effectuée, vous pouvez commencer à installer les services souhaités. Prenons ici l’exemple de Google Analytics :

Tout d’abord, entrez le nom du service que vous souhaitez installer :

Ensuite, cliquez sur « Installer ». Cela ouvrira une page où vous devrez simplement copier le code en haut et le placer juste en dessous du code que vous avez copié précédemment.

Voici le code pour Google Analytics :

  <script type="text/javascript">
    tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
    tarteaucitron.user.analyticsMore = function () { /* optionnal ga.push() */ };
    tarteaucitron.user.analyticsUaCreate = { /* optionnal create configuration */ };
    tarteaucitron.user.analyticsAnonymizeIp = true;
    tarteaucitron.user.analyticsPageView = { /* optionnal pageview configuration */ };
    tarteaucitron.user.analyticsMore = function () { /* optionnal ga.push() */ };
    (tarteaucitron.job = tarteaucitron.job || []).push('analytics');
  </script>

Maintenant, vous êtes libre d’installer tous les services que vous souhaitez.

4. Test

Normalement, si votre site est en ligne, vous devriez obtenir ceci :

Si vous n’obtenez pas ce résultat, pensez à vérifier l’arborescence de votre dossier. Sinon, n’hésitez pas à demander à ChatGPT pour obtenir de l’aide.

4. Personnalisation du message

Dans un premier temps, nous allons configurer le message « Personnaliser ». Comme vous pouvez le constater, lorsque vous cliquez sur le bouton, vous devriez obtenir ceci :

Cependant, selon les obligations du RGPD, il est essentiel de fournir une liste des cookies utilisés sur le site, en spécifiant leur utilisation. C’est la politique de confidentialité. Nous allons donc créer une page dédiée à la politique de confidentialité (ici appelée politique_de_confidentialite.html) et l’intégrer dans le script tarteaucitron une fois qu’elle sera créée (toujours après les scripts précédents de la page d’accueil).

<script type="text/javascript">
    tarteaucitron.init({
      "privacyUrl": "https://www.goblinsway.com/politique_de_confidentialite.html", /* lien à adapter en fonction
      // Ajoutez d'autres paramètres ici si nécessaire
    });
</script>

On obtient alors ceci avec le bouton « Politique de confidentialité » en blanc qui redirige vers notre politique de confidentialité :

Dans un second temps, vous pouvez modifier les couleurs de la bannière en éditant la feuille de style tarteaucitron.css présente dans le dossier tarteaucitron. Pour cela, vous avez deux options :

  • On peut modifier les codes css directement dans le fichier tarteaucitron.css
  • Ou alors on peut empêcher la redirection avec ce script, toujours placé après les autres script :
<script type="text/javascript">
    tarteaucitron.init({
    "useExternalCss": true     /* false by default If false, the tarteaucitron.css file will be loaded */
    });
</script>

Peu importe la méthode choisie, on peut obtenir des résultats plutôt sympas.

Avant

Après

Conclusion

À travers les étapes que nous avons explorées, il est essentiel de respecter les obligations légales telles que le RGPD en matière de gestion des cookies. En configurant correctement des outils comme Tarteaucitron, nous avons vu comment fournir une transparence et un contrôle accrus aux utilisateurs concernant leurs données personnelles. En personnalisant l’apparence et en intégrant une politique de confidentialité claire, nous pouvons non seulement respecter les normes de conformité mais aussi améliorer l’expérience utilisateur. Avec ces ajustements, votre site est prêt à offrir une expérience en ligne sécurisée et transparente.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *