Un gestionnaire de cookies qui respecte réellement la réglementation : tarteaucitron.js

par · 20 mai 2018

Conformément à la loi Informatique et liberté et le Règlement Général sur la Protection des Données (RGPD), les internautes doivent consentir librement au dépôt de cookies déposés lors de la consultation d’un site internet.

Cette obligation interdit donc l’utilisation de cookies sans action préalable de l’internaute : il n’est donc pas autorisé de seulement signaler à un internaute que le site qu’il consulte utilise des cookies, il doit avoir explicitement reçu l’autorisation. Cela signifie que tous les cookies utilisés sur le site doivent être désactivés par défaut et activés seulement dans le cas ou l’internaute a donné son accord. En outre, la durée de vie d’un cookie doit être limitée dans le temps et il est conseillé qu’elle ne dépasse pas 13 mois (sans être prolongé automatiquement lors d’une nouvelle visite).

Concrètement, vous avez l’obligation d’informer vos utilisateurs :

  1. Que votre site utilise des cookies
  2. De leurs finalités
  3. De la procédure pour activer / désactiver les cookies.

Un gestionnaire de cookies conseillé par la CNIL

Afin de respecter cette réglementation, la CNIL utilise et conseille une solution open source : tarteaucitron.js qui gère à elle seule 65 services comme  Google Maps, Google Tag Manager, Iframe, Facebook, Google Analytics, Amazon, Critéo, Google Adsense, Google AdWords, AdThis,  Google+, Linkedin, Pinterest, ShareThis, Twitter, Dailymotion, Vimeo, Youtube etc.

Ce script est disponible dans une version gratuite à installer manuellement ou dans une version payante à 15 € HT / mois pour une installation sur WordPress et Drupal.

Nous allons voir comment installer la version gratuite très simplement et rapidement.

Que propose tarteaucitron.js ?

En installant tarteaucitron.js sur votre serveur, vos internautes seront prévenus par un bandeau d’information que des cookies sont utilisés sur votre site. Ils pourront alors :

  1. Refuser ou accepter l’ensemble des cookies
  2. Refuser ou accepter les cookies de leur choix (interdire Facebook mais autoriser Youtube par exemple)
  3. Consentir implicitement à l’utilisation des cookies en continuant leur navigation (après avoir scrollé la page assez longuement) si vous activez cette fonctionnalité.

Lors de la première connexion, un bandeau s’affichera (selon votre configuration du script) avec :

  • le texte suivant : « En poursuivant votre navigation, vous acceptez l’utilisation de services tiers pouvant installer des cookies », laissant le choix à l’internaute de « tout accepter » ou « personnaliser » ses préférences dans le cas d’un consentement implicite.
  • ou « Ce site utilise des cookies et vous donne le contrôle sur ce que vous souhaitez activer » laissant le choix à l’internaute de « personnaliser » ses préférences dans le cas d’un consentement explicite.

Installation de tarteaucitron.js

  1. Commencez par installer le script sur Github.
  2. Décompressez l’archive et renommez le dossier « tarteaucitron.js-master » en « tarteaucitron »
  3. Sur toutes les pages de votre site ajoutez le code suivant dans les balises <head> (nous reviendrons en détail sur la configuration des options par la suite.)
    [pastacode lang= »markup » manual= »%3Chtml%3E%0A%20%20%20%20%3Chead%3E%0A%0A%20%20%20%20%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Ftarteaucitron%2Ftarteaucitron.js%22%3E%3C%2Fscript%3E%0A%0A%20%20%20%20%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20tarteaucitron.init(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22hashtag%22%3A%20%22%23tarteaucitron%22%2C%20%2F*%20Ouverture%20automatique%20du%20panel%20avec%20le%20hashtag%20*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22highPrivacy%22%3A%20false%2C%20%2F*%20d%C3%A9sactiver%20le%20consentement%20implicite%20(en%20naviguant)%20%3F%20*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22orientation%22%3A%20%22top%22%2C%20%2F*%20le%20bandeau%20doit%20%C3%AAtre%20en%20haut%20(top)%20ou%20en%20bas%20(bottom)%20%3F%20*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22adblocker%22%3A%20false%2C%20%2F*%20Afficher%20un%20message%20si%20un%20adblocker%20est%20d%C3%A9tect%C3%A9%20*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22showAlertSmall%22%3A%20true%2C%20%2F*%20afficher%20le%20petit%20bandeau%20en%20bas%20%C3%A0%20droite%20%3F%20*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22cookieslist%22%3A%20true%2C%20%2F*%20Afficher%20la%20liste%20des%20cookies%20install%C3%A9s%20%3F%20*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%22removeCredit%22%3A%20false%20%2F*%20supprimer%20le%20lien%20vers%20la%20source%20%3F%20*%2F%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Configurez les services que vous utilisez

Vous devez ajouter un code particulier pour chaque service que vous utilisez. Voici quelques exemple (la liste complète se trouve sur le site de tarteaucitron.js)

Par exemple, pour Google Analytics :

<script type="text/javascript">
    tarteaucitron.user.gtagUa = 'UA-XXXXXXXX-X';
    tarteaucitron.user.gtagMore = function () { /* add here your optionnal gtag() */ };
    (tarteaucitron.job = tarteaucitron.job || []).push('gtag');
 </script>

Veillez à toujours supprimer le code d’origine fourni par le service.

Pour Critéo :

<script type="text/javascript">
    tarteaucitron.user.gtagUa = 'UA-XXXXXXXX-X';
    tarteaucitron.user.gtagMore = function () { /* add here your optionnal gtag() */ };
    (tarteaucitron.job = tarteaucitron.job || []).push('gtag');
</script>

Puis à chaque endroit ou le service doit d’afficher dans votre page :

<div class="criteo-canvas" zoneid="zoneid"></div>

Pour le Pixel Facebook :

<script type="text/javascript">
    tarteaucitron.user.facebookpixelId = 'YOUR-ID'; tarteaucitron.user.facebookpixelMore = function () { /* add here your optionnal facebook pixel function */ };
    (tarteaucitron.job = tarteaucitron.job || []).push('facebookpixel');
 </script>

Configurer l’outil en fonction de vos préférences

Regardons de plus près les options proposées…

hasthag :

"hashtag": "#tarteaucitron", /* Ouverture automatique du panel avec le hashtag */

Le hashtag vous permet de créer un lien pour ouvrir le panel de gestion des plugins avec ce code par exemple :

<a href="javascript:void(0)" onclick="tarteaucitron.userInterface.openPanel();">Infos cookies</a>

highPrivacy :

"highPrivacy": false, /* désactiver le consentement implicite (en naviguant) ? */

highPrivacy prend false si vous souhaitez activer le consentement implicite à la navigation. Lorsque l’internaute scrolle un certain temps sur votre site, alors son consentement est considéré comme explicite. Si vous passez highPrivacy à true si l’internaute doit consentir activement en cliquant sur un bouton.

orientation :

"orientation": "top", /* le bandeau doit être en haut (top) ou en bas (bottom) ? */

Vouspouvez choisir l’emplacement du bandeau d’information cookies : en haut (top) ou en bas (bottom)

adblocker :

"adblocker": false, /* Afficher un message si un adblocker est détecté */

Si un bloqueur de cookie est installé sur son poste, l’internaute verra un message pour l’en informer si l’option est à true.

showAlertSmall :

"showAlertSmall": true, /* afficher le petit bandeau en bas à droite ? */

Une fois que l’internaute a accepté ou refusé les cookies, un petit bandeau s’affiche en bas à droite de l’écran en permanence qui lui permet de voir l’état de ses services et d’accéder au panel de configuration. Pour que ce bandeau ne soit pas affiché, passez showAlertSmall à false.

cookieslist :

"cookieslist": true, /* Afficher la liste des cookies installés ? */

Le panel de configuration affiche par défaut le nombre de cookies déposé. Vous pouvez décider de ne pas afficher cette information : dans ce cas passez cookieslist à false.

removeCredit :

"removeCredit": false /* supprimer le lien vers la source ? */

Dans le panel de configuration, le lien vers le site de tarteaucitron.js s’affiche. Vous pouvez supprimer ce lien en passant removeCredit à false.

Personnalisation des textes :

Vous pouvez modifier les textes affichés en modifiant le fichier tarteaucitron/lang/tarteaucitron.{LG}.js

Personnalisation de l’affichage :

Vous pouvez modifier les CSS en modifiant le fichier tarteaucitron/css/tarteaucitron.css

Si cet article "Un gestionnaire de cookies qui respecte réellement la réglementation : tarteaucitron.js" vous a aidé, si vous avez des questions ou des améliorations à proposer, n'hésitez pas à me laisser un commentaire en bas de page !
Charlie Stram,
Développeur web freelance

Étiquettes :

Vous aimerez aussi...

3 réponses

  1. eric emery dit :
    3 juillet 2018 à 11 h 52 min

    Merci pour cet article

    Répondre
  1. Mise en conformité au RGPD - Charlie Stram
    21 mai 2018

    […] que l’internaute a donné son accord (en installant un gestionnaire de cookie comme tarteaucitron.js par […]

  2. CookieCheck : un gestionnaire de cookies pour Google Analytics simple et gratuit - Charlie Stram
    8 juin 2018

    […] Un gestionnaire de cookies qui respecte réellement la réglementation : tarteaucitron.js […]

Laisser un commentaire

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