Une solution open source pour les Cookies (RGPD) : tarteaucitron

tarteaucitron

une présentation par Marc Dechèvre | Woluweb

Marc
woluweb

slides https://slides.woluweb.be

1. Présentation du vendredi 22.01.2021 à 11h

Cookies et autres traceurs – comment mettre mon site en conformité ?

« tarteaucitron » est un outil open source permettant mettre votre site en conformité quel que soit le CMS et quels que soient les cookies utilisés

Inscription gratuite pour la session live en visioconférence sur
Les Mysteres du Web

2. Les Cookies expliqués en BD

https://blog.octo.com/bd-les-cookies

par Aryana Peze le 08/01/2021

En quelques cases de BD, on capte l’enjeu des Cookies :
cookies de session, cookies permanents, cookies de tiers, …


CookieMonster
Le “Cookie Monster” du Muppet Show. Source : giphy

3. Le contexte juridique – RGPD et Cookies

Le 25 mai 2018, l’entrée en application du règlement général sur la protection des données (RGPD ou GDPR en anglais) est venue renforcer les exigences en matière de gestion des cookies et autres traceurs.

4. Le contexte juridique – France et Belgique

Cette directive a été traduite (et/ou interprétée) dans chaque droit national et par chaque autorité :

5. Concentrons-nous sur les Cookies

Le RGPD est un sujet vaste.

[séquence humour]
La légende dit que si on enferme 2 juristes spécialistes en RGPD dans un local pendant une journée il en ressort 3 avis. 😂

Aussi, cette session se concentre exclusivement sur le volet “cookies” :

Il n’en reste pas moins qu’il est souvent difficile d’y voir clair sur le sujet des cookies car typiquement les juristes connaissent la loi mais pas les cookies… et inversement pour les informaticiens

6. Cookies – des sanctions lourdes

En l’occurrence, nos deux pays francophones ont tendance à avoir une interprétation stricte de la directive.

(et en toute modestie, la Belgique est sans doute encore plus stricte)

Et les premières sanctions qui sont déjà tombées sont très très lourdes financièrement !

7. Actualité chaude en France – sanctions

Le 10/12/2020
la CNIL annonce sa première sanction en matière de cookies

“Le 7 décembre 2020, la formation restreinte de la CNIL a sanctionné les sociétés GOOGLE LLC et GOOGLE IRELAND LIMITED d’un montant total de 100 millions d’euros d’amende, notamment pour avoir déposé des cookies publicitaires sur les ordinateurs d’utilisateurs du moteur de recherche google.fr sans consentement préalable ni information satisfaisante.”

8. Actualité chaude en France – fin mars

“[Le saviez-vous ?] La @CNIL a modifié le RGPD pour limiter les abus relatifs au consentement : pour être conforme, les sites ont jusqu’à fin mars 2021 pour proposer trois boutons de même format (Tout accepter, Tout refuser, Configurer)”

Source: https://twitter.com/fredcavazza/status/1349670297625047047

9. Interprétation et sanctions en Belgique

Le 06.02.2020, nous nous sommes rendus à une conférence où l’Autorité de Protection des Données présentait elle-même le thème “Bien appliquer le RGPD en e-marketing – Les erreurs à ne pas commettre pour les cookies, les e-newsletters, l’e-marketing, le contenu de la charte vie privée, …”

Le slide suivant présenté lors d’un des ateliers résume parfaitement la position de l’APD en matière de Cookies :
APD
C’était un véritable coup de tonnerre dans le monde du web car, de l’aveu même de l’APD, 99,9% des sites belges ne rencontraient pas ces critères au moment de la conférence (sic).

Bref, le “classique” OK | En savoir plus était désormais clairement et officiellement considéré comme non conforme.

Il est d’autant plus important de s’y conformer que le risque juridique, qui jusqu’ici semblait assez théorique, est devenu très concret.

En effet la première sanction est tombée fin 2019 : €15.000 pour non-respect. Ironie du sort, il s’agit d’un site… juridique. Plus d’infos à ce sujet p.ex. dans cet article de l’Echo.

10. Actualité chaude en Belgique – interprétation

Le 8/1/2021, la FeWeb (Fédération des Métiers du Web – Belgique) Communique

😱GDPR : la Belgique est désavantagée par rapport à ses voisins européens.
Chez nous, les propriétaires de site sont obligés de demander un consentement explicite à l’utilisateur pour les cookies analytiques et statistiques.
👎 Résultat : en moyenne, 70% de données en moins peuvent être récoltées sur les sites 🇧🇪 alors que l’impact de ce cookie sur la privacy des utilisateurs est faible.
Cela cause un dommage significatif aux entreprises belges face aux pays voisins (🇳🇱 🇫🇷) où ce type de consentement n’est pas requis.
En conséquence, la FeWeb demande la suppression ❎ de cet opt-in, en concertation avec le cabinet du ministre de l’Agenda du Numérique Mathieu MICHEL.

Communiqué officiel du 08.01.2021

Article dans l’Echo le 12.01.2021

A suivre donc…

11. Plein de services payants pour gérer les Cookies

Il existe une pléthore de services payants pour gérer les Cookies mais le coût est en général important, surtout s’il est récurrent.

Quelques exemples que j’ai croisés :

Et attention : certains services payants ne permettent même pas forcément de respecter la réglementation Cookies à la lettre.

12. Les avantages de tarteaucitron

La solution tarteaucitron présente de multiples avantages :

13. Version gratuite / payante / plugin

13.1. Une version gratuite complète

La version gratuite est complète :

On peut bien sûr aussi modifier les textes et le css, mais en éditant directement les fichiers concernés.

13.2. Une version payante

A noter qu’il existe aussi une version payante (actuellement €15 / mois pour un nombre illimité de sites et services).

Outre ce qui précède, ceci s’ajoute

13.3. Plugin

Comme on va le voir ci-après, l’installation “à la main” est très facile.

Mais pour les amateurs d’intégration directe, sachez

14. tarteaucitron en quelques captures d’écran

14.1. Popup lors de l’arrivée sur le site, position 'middle’

Pratique lorsqu’on veut forcer le choix avant de permettre le surf

tarteaucitron_middle

14.2. Popup lors de l’arrivée sur le site, position 'bottom’

Pratique lorsqu’on veut permettre le surf sans forcer un choix préalable

tarteaucitron_bottom

14.3. Accessible à tout moment en position fixe – showAlertSmall

Possibilité d’afficher en permanence ceci, avec ou sans le nombre
(très transparent et inspire confiance)

tarteaucitron_showalertsmall

14.4. Clic sur le showAlertSmall permet de changer les choix

tarteaucitron_popup

14.5. Clic sur le nombre de cookies permet de voir et supprimer – cookieslist

A nouveau, très transparent et pratique pour les visiteurs tarteaucitron_cookieslist

14.6. Nouvelle icône position fixe – showIcon

En plus ou à la place du showAlertSmall, possibilité d’ajouter une simple icône qui permet d’afficher le popup de configuration
(plus discret que le showAlertSmall)

tarteaucitron_new_icon

15. Exemple concret de rendu

15.1. Le site du Jour le Plus Court

15.2. Options choisies

Concrètement :

15.3. showAlertSmall

16. Passons à la pratique

Le but de la présentation est de montrer très concrètement comment implémenter cette solution sur un site.

16.1. Installation

Voir https://tarteaucitron.io/fr

Télécharger p.ex. depuis Github : https://github.com/AmauriC/tarteaucitron.js/releases

Décompresser le fichier et le mettre à la racine du site, dans un dossier nommé p.ex. tarteaucitron (veiller simplement à être cohérent avec la 1e ligne du script suivant).

NB : pour les codes, repartez de préférences toujours du site officiel pour avoir la toute dernière version des codes. En effet, en préparant cette session par exemple, j’ai réalisé qu’une nouvelle version était sortie, avec de nouveaux paramètres dans le script 🙂

16.2. Configuration

16.2.1. Configuration – partie 1

Après la balise <head>, ajouter ce qui suit

(code correspondant à la version v1.8.3) 

<script type="text/javascript" src="/tarteaucitron/tarteaucitron.js"></script>

<script type="text/javascript">

var tarteaucitronForceLanguage = 'fr';

tarteaucitron.init({
  "privacyUrl": "https://www.DOMAIN.COM/fr/privacy", /* Privacy policy url */

  "hashtag": "#mycookies", /* Open the panel with this hashtag */
  "cookieName": "mycookies", /* Cookie name */

  "orientation": "middle", /* Banner position (top - middle - bottom) */

  "showAlertSmall": true, /* Show the small banner on bottom right */
  "cookieslist": true, /* Show the cookie list */

  "showIcon": true, /* Show cookie icon to manage cookies */
  "iconPosition": "BottomLeft", /* 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 */

  "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 */
  "useExternalJs": false, /* If false, the tarteaucitron.js file will be loaded */

  //"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */

  "readmoreLink": "/fr/privacy", /* Change the default readmore link */

  "mandatory": true, /* Show a message about mandatory cookies */
});
</script>

16.2.2. Configuration – partie 2

Jusque là, rien ne se passe encore si on affiche le front-end du site. En effet, tarteaucitron ne va s’afficher que lorsqu’on aura ajouté au moins 1 service (parmi la bonne centaine déjà disponible).

On va alors chercher les services dont on a besoin pour obtenir le bout de code à ajouter : https://tarteaucitron.io/fr/install

On les ajoute juste avant la balise </body>

Et bien sûr, si ces services étaient déjà intégrés précédemment au site (via le template/thème, via une extension/un plugin, …) il faut les désactiver !

Exemples ci-après.Google Analytics

<script type="text/javascript">
tarteaucitron.user.gajsUa = 'UA-XXXXXXX-1';
tarteaucitron.user.gajsMore = function () { /* add here your optionnal _ga.push() */ };
(tarteaucitron.job = tarteaucitron.job || []).push('gajs');
</script>

Google Tags Manager

<script type="text/javascript">
tarteaucitron.user.googletagmanagerId = 'GTM-XXXX';
(tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
</script>

Facebook Pixel

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

16.3. Astuces

16.3.1. Astuces – partie 1

Attention à la contante privacyUrl : il faut indiquer l’URL absolue. Cela permet en fait de ne pas afficher en popup la fenêtre d’acceptation des cookies… sur la page Privacy Policy

Concernant la constante cookieName, personnellement je change parfois la valeur par défaut (“tarteaucitron” par “mycookies” p.ex., ce qui est plus clair pour un visiteur )

La constante readmoreLink donne l’URL des liens “En savoir plus”, qui pourrait être différent de l’URL “Privacy Policy”. Ici l’URL relative suffit

Pour changer les chaînes de langues, éditer /lang/tarteaucitron.fr.js pour le français (23 langues disponibles !)

16.3.2. Astuces – partie 2

La ligne suivante, que j’ai ajoutée au code original, permet de forcer la langue.

Très pratique pour un site multilingue où l’interface de tarteaucitron sera toujours dans la langue du visiteur !

var tarteaucitronForceLanguage = 'fr';

16.3.3. Astuces – partie 3

Pour faire apparaître l’interface à partir d’un lien n’importe où sur le site (un élément de menu par exemple) :

<a href="javascript:tarteaucitron.userInterface.openPanel();">Gestion des cookies</a>

Encore plus simple : la constante hashtag permet justement d’avoir un simple lien sans javascript.
Autrement dit, si mon hashtag est défini comme suit

  "hashtag": "#mycookies", /* Open the panel with this hashtag */

Alors le lien suivant permet d’ouvrir directement l’interface

<a href="#mycookies">Gestion des cookies</a>

16.3.4. Astuces – partie 4

Il est possible de modifier le CSS par défaut de tarteaucitron directement dans les fichiers originaux, mais pour ne pas perdre ses personnalisations lors des màj il peut être intéressant d’utiliser le fichier de CSS personnalisé de son template. Il faut du coup bien souvent ajouter !important pour que notre règle ait priorité. Exemple :

.exemple, #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine, #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine:hover {
    background: rgb(0, 113, 188) !important;
}

NB : fin 2020, un nouveau paramètre a été ajouté : useExternalCss

17. Quelques tutos

En principe on a tout couvert dans cette présentation, mais je tenais à mentionner les deux tutos qui m’ont mis sur la voie lorsque j’ai moi-même découvert tarteaucitron :

https://digital-analyst.fr/1479-implementer-tarteaucitron-js-avec-google-tag-manager/
(explique aussi plus Google Tags Manager et alternatives)

https://admaker.fr/blog/mode-dinstallation-pour-tarteaucitron/

18. Autres solutions sous Joomla

Indépendamment de tarteaucitron qui est compatible avec tous les sites/CMS, dans l’univers Joomla il existe bien sûr différentes extensions permettant de gérer les Cookies.

Citons les plus qualitatives (à vous de vérifier qu’elles respectent comme vous le souhaitez votre réglementation nationale…) :

19. Questions en suspens

On avons déjà fait ici un solide tour de tarteaucitron

Mais il reste encore des questions intéressantes à traiter
(merci à Yann de les avoir posées 🙏🏻)

Vous avez des éléments de réponse ?

Prenez contact avec moi
et je me ferai un plaisir de compléter ces slides 🙂 

20. Liens utiles

Outre les liens mentionnés au fil de cette présentation, je vous invite à lire ce dossier très bien ficelé par Jean-François Questiaux (bien connu sous le pseudo @jfque sur https://forum.joomla.fr) : https://www.betterweb.fr/dossiers/cookies-comment-mettre-mon-site-en-conformite

Pour Joomla, le plugin gratuit “UP” (“Universal Plugin”, développé par Loïc Martin aka Lomart, qui propose plus de 100 actions) est depuis la version 2.4 d’avril 2021 prend en charge TarteAuCitron pour une série d’actions. Plus d’informations sur https://up.lomart.fr/docs/webmaster/tarteaucitron-prise-en-charge

21. Restons en contact

woluweb

https://slides.woluweb.be

Des suggestions concernant cette presentation ?
N’hésitez pas à me contacter, je serai ravi de continuer à l’améliorer 🙂

Marc Dechèvre | woluweb
+32 474 37 13 12 | +32 2 772 58 69

https://www.woluweb.be/contact