THELIA Forum

tarteaucitron.js (https://tarteaucitron.io/fr) est un outil qui permet de mettre un site en conformité avec la réglementation RGPD, pour ce qui concerne le consentement de l'internaute au dépôt de cookies sur sa machine.

L'outil est OpenSource, et est recommandé par la CNIL : https://www.cnil.fr/fr/solutions-centra … res-de-tag

Installation

Note: ce mode d'installation un peu hardcore peut certainement être amélioré (il existe maintenant un package npm: https://www.npmjs.com/package/tarteaucitronjs), et il y a des variations possible, en fonction de l'organisation de votre template.

1) Télécharger la distrib de tarteaucitron ici : https://github.com/AmauriC/tarteaucitron.js/releases

2) La placer dans web/assets-dist/js/vendors/tarteaucitron (créez ces répertoires, ils n'existent pas dans une distrib Thelia de base) , pour obtenir ceci :

3) Éditer le fichier assets/src/js/thelia.js pour y ajouter le code d'initialisation :

(function ($) {
  tarteaucitron.init({
    "AcceptAllCta": true,
    "european": true,
    // Ouverture automatique du panel avec le hashtag
    "hashtag": "#tarteaucitron",
    // Nom du cookie - A CHANGER
    "cookieName": 'ce_que_vous_voulez_rgpd',
    // désactiver le consentement implicite (en naviguant) ? 
    "highPrivacy": true,
    // le bandeau doit être en haut (top) ou en bas (bottom) ?
    "orientation": "bottom",
    // Afficher un message si un adblocker est détecté ?
    "adblocker": false,
    // afficher le petit bandeau en bas à droite ?
    "showAlertSmall": false,
    // Afficher la liste des cookies installés ?
    "cookieslist": true,
    // supprimer le lien vers la source ?
    "removeCredit": false,
    // Deny everything if DNT is on
    "handleBrowserDNTRequest": false, 
    // Show more info link
    "moreInfoLink": false,
    // If false, the tarteaucitron.css file will be loaded
    "useExternalCss": false, 
    // URL de la page "politique de confidentialité"
    "privacyUrl": privacyPolicyUrl || "/confidentialite.html"
  });

  // Paramétrage de Google Analytics.
  tarteaucitron.user.gajsUa = analyticsId || "UNDEFINED analyticsId";
  (tarteaucitron.job = tarteaucitron.job || []).push('gajs');

  // Ajouter le paramétrage des autres services ici
   
})(jQuery);

Ne pas oublier de regénérer assets/dist/js/thelia.min.js avec grunt, ou ce que vous voulez.

(Parenthèse: pour recompiler les assets, installez npm sur votre machine, puis ouvrez une console dans le répertoire de votre template front, tapez "npm install" pour installer les dépendances, puis "grunt default" pour tout recompiler dans assets/dist (less, images, js, ...) ou "grunt watch" pour surveiller et recompiler en temps réel les assets lorsque les sources dans assets/src sont modifiés. En fonction de votre environnement, vous devrez peut-être installer le package grunt-cli en global.
Tout ceci est assez obsolète, on utilise plutôt webpack de nos jours, cf. le travail de Maz sur le sujet: http://forum.thelia.net/viewtopic.php?pid=77605#p77605.
Fin de la parenthèse)

4) Le code ci-dessus ne concerne que Google Analytics. Si d'autres trackers sont utilisés sur le site, aller sur https://tarteaucitron.io/fr/install, cliquer "Next step", et rechercher le service concerné (ex. Facebook Pixel) :

Cliquer le bouton "Installer" du service concerné pour voir le code à ajouter dans thelia.js, et surtout le code à supprimer sur le site, pour que le service ne pose pas de cookies avant que l'internaute l'ait autorisé.

Exemple pour Facebook Pixel :

L'ID de pixel Facebook (YOUR-ID) devra être initialisé dans le layout.tpl (cf. point suivant).

5) Dans le fichier layout.tpl du template, avant l'inclusion de thelia.js, initialiser les variables, et inclure le script. Ici on utilise le module Tags pour identifier le contenu où se trouve la politique de confidentialité :

    <script>
         {* Privacy policy URL pour tarteaucitron *}
         {loop type="content" name="privacy" tag="privacy-policy"}
               var privacyPolicyUrl  = "{$URL}";
         {/loop}
        
       // ID google analytics utilisé dans thelia.js
          var analyticsId = 'ID GOOGLE ANALYTICS';

       // Ajouter les éventuelles variables qui sont utilisées dans thelia.js
    </script>

    <!-- JavaScript -->
    <script 
  src="{url file="assets-dist/js/vendors/tarteaucitron/tarteaucitron.js"}">
</script>

6) Si tout est OK, un bandeau d'avertissement doit maintenant apparaître en bas du site:

7) Il est possible de styler ce bandeau en CSS, de deux façons différentes :
   a) en modifiant directement le fichier web/assets-dist/js/vendors/tarteaucitron/css/tarteaucitron.css
   b) en définissant les styles dans le css du template. Dans ce cas, indiquer "useExternalCss": true dans le code d'initialisation qui est dans thelia.js

8) Cliquer sur "Personnaliser" permet d'indiquer les cookies qu'on souhaite accepter et ceux qu'on souhaite refuser :

Là aussi, il est possible de modifier le style du panneau.

Il faut créer web/assets-dist