Mettez (facilement) votre site en conformité avec RGPD !

illustration de l'article

Vous aussi vous adorez les bandeaux de consentement que l’on trouve désormais sur (presque) tous les sites et vous rêvez d’en avoir un sur le vôtre ? C’est normal, ça fait tellement plus sérieux…​ Et puis, c’est aussi ça respecter les règles !

C’est un petit fichier assez simple déposé dans notre navigateur lorsque nous visitons certains sites. Notamment pour nous identifier lors de la prochaine visite.
Ce qui peut parfois se révéler assez pratique : le site peut ainsi connaître à l’avance nos préférences d’affichage par exemple.

Mais lorsqu’une régie publicitaire commune à plusieurs sites se permet de tracer nos habitudes d’un site à l’autre, par exemple pour nous proposer des publicités sur Amazon en rapport avec nos pages Facebook suivies …​ l’aspect pratique s’efface derrière l’aspect effrayant.
Nos données personnelles ne sont plus personnelles, alors même que l’on ne nous a pas demandé notre avis.

C’est pour combattre cette dérive que le RGPD demande de recueillir le consentement des utilisateurs avant d’exploiter leurs données personnelles.

Cookies

RGPD : rappel rapide

Le règlement général sur la protection des données est un texte du Parlement européen qui a pour but d’améliorer la protection des données des personnes, notamment en responsabilisant les acteurs du traitement de ces données.

Il donne par ailleurs plus de pouvoirs aux autorités comme la CNIL, en charge de faire respecter les directives européennes transposées en droit français.

La conséquence

Il en résulte une conséquence directe assez visible lorsque l’on navigue sur Internet : notre consentement autour des cookies est demandé à tout bout de champ.

Et bien souvent la question est difficile à ignorer…​
Bandeau envahissant, popup au premier plan, tous les moyens sont bons pour détourner notre attention de l’information que l’on veut consulter. En améliorant la confidentialité de nos données, le RGPD a aussi considérablement détérioré notre expérience du web.

Cookie Monster

Le RGPD ne se résume pas qu’au consentement autour des cookies, mais l’objectif ici n’est pas de lister les tenants et les aboutissants d’un texte de loi de plus de 80 pages.

La difficulté de faire les choses proprement

Mais avant de jeter la pierre aux designers ou aux développeurs qui n’ont pas eu le choix, essayons de comprendre les difficultés qui résident dans la mise en œuvre du recueil du consentement des utilisateurs.

Lister les cookies

La première étape consiste à lister les cookies utilisés par le site.

Bien souvent on retrouve un (ou plusieurs !) cookie(s) permettant la mesure d’audience, comme ceux déposés par Google Analytics ou ses concurrents. Mais il faut aussi penser à tous les services tiers utilisés…​

C’est ainsi que sur ce blog, nous utilisons par exemple Disqus pour gérer le système de commentaires.

Il ne faut pas non plus oublier l’intégration de lecteurs vidéo comme YouTube qui apportent leur lot de cookies, l’utilisation de fonctionnalités de réseaux sociaux, etc.

Rendre les cookies optionnels

Nous l’avons dit, de manière à être conforme aux recommandations de la CNIL, le site ne doit pas déposer de cookie sans le consentement du visiteur.

Cela signifie donc qu’il faut gérer 3 états :

  1. Le consentement n’a ni été donné, ni été refusé, donc les cookies ne doivent pas être déposés

  2. Le consentement a été refusé, donc les cookies n’ont pas été déposés et le site doit tout de même fonctionner normalement

  3. Le consentement a été accordé, donc les cookies peuvent être déposés

Il faut donc à tout moment savoir si le consentement a été accordé et être capable de désactiver des fonctionnalités le cas échéant. Ce qui ne manque pas d’avoir un impact direct sur le code source de la page concernée…​

On se retrouve alors avec des petits morceaux de code retouchés qui ressemblent à cela :

    if (isGoogleConsentGiven) {
        // Add Google Analytics
    }

    if (isDisqusConsentGiven) {
        // Add Disqus
    }

Ne pas (trop) dégrader l’expérience utilisateur

On l’a vu plus haut, même en ayant refusé les cookies (ou en tout cas certains), l’utilisateur doit pouvoir continuer sa navigation le plus normalement possible. Il convient donc de vérifier que les fonctionnalités au cœur de notre page ne sont pas impactées par l’absence d’un service.

Par exemple, une page qui liste des vidéos YouTube sous forme de vignettes …​ sans YouTube …​ ça rend tout de suite moins bien. Il faut donc à minima prévoir un petit message pour expliquer l’apparence surprenante de la page.

De plus, les bannières et autres encarts demandant le consentement viennent s’ajouter en superposition de pages souvent déjà bien remplies et complexifient parfois beaucoup trop la navigation. Même s’il y a du mieux ces derniers mois suite aux rappels à l’ordre de la CNIL, il est encore difficile de systématiquement refuser les cookies avec des boutons "ACCEPTER" bien trop mis en avant.

Au-delà de l’aspect technique, il y a donc aussi des notions d’UX à prendre en compte pour éviter de retourner au web d’il y a 20 ans…​

Popup

La solution : tarteaucitron

Nous l’avons vu, cette démarche de mise en conformité est donc relativement longue et complexe.
Et heureusement, il est temps de présenter l’outil qui pourra grandement vous faciliter la tâche, Tarteaucitron !

Sans le savoir, il est probable que vous avez déjà utilisé Tarteaucitron, utilisé sur de nombreux sites (plus de 20 000 revendiqués sur le site de l’éditeur).

C’est un outil qui se veut le plus générique possible, avec une version gratuite open-source et une version payante proposant une mise à jour continue ainsi qu’un plugin WordPress. Il consiste en une librairie JavaScript disponible via npm, autrement dit très facilement installable.

Il convient alors de l’intégrer à votre page :

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

        <script type="text/javascript">
            tarteaucitron.init({
              // Configuration
            });
        </script>

La configuration porte sur tous les aspects de l’outil : position de la bannière, affichage ou non des différents boutons de choix, etc. Il vous faudra vous retrousser les manches pour modifier l’apparence de la bannière, de l’icône et de l’écran de choix, mais rien de très compliqué.

Aperçu de la bannière sur ce site
Aperçu de la bannière sur ce site, en plein écran

Ensuite, service par service, vous allez pouvoir remplacer votre intégration actuelle par celle de Tarteaucitron.
Par exemple, dans le cas de Google Analytics, vous aviez l’habitude de l’ajouter comme ceci :

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-XXXXXXX');
    </script>

Il faut désormais remplacer ce morceau de code par :

    <!-- Cookies management for Google Analytics -->
    <script type="text/javascript">
        tarteaucitron.user.gtagUa = 'UA-XXXXXXX';
        (tarteaucitron.job = tarteaucitron.job || []).push('gtag');
    </script>

À tout moment, l’utilisateur peut revenir sur ses choix, par défaut en cliquant sur l’icône située en bas à droite de l’écran comme sur ce site.
Il accède alors à l’écran détaillé de choix :

Aperçu de l’écran de choix
Aperçu de l’écran de choix

De même, en naviguant sur le site, il peut se retrouver face à une fonctionnalité désactivée en l’absence de cookie, Tarteaucitron va automatiquement lui proposer d’accepter les cookies associés s’il veut s’en servir :

Aperçu d’une fonction de commentaire désactivée en l’absence de consentement autour de Disqus
Aperçu d’une fonction de commentaire désactivée en l’absence de consentement autour de Disqus

En résumé, Tarteaucitron nous a permis de surmonter les difficultés listées plus haut :

  1. En intégrant par défaut plus d’une centaine de services couramment utilisés, il permet de répondre à la grande majorité des cas que l’on peut lister sur son site

  2. Il gère le cas du consentement accordé au non, service par service

  3. Il évite de dégrader l’expérience utilisateur en proposant des bannières simples et en remplaçant proprement les encarts refusés

Par sa facilité d’installation et de configuration, nul doute que Tarteaucitron continuera de gagner de nombreux utilisateurs dans les prochaines années …​ pour le plus grand bien des internautes !

Commentaires

comments powered by Disqus

Date

Auteur

Avatar Alain NICOLAS

Alain NICOLAS

Développeur Blockchain & DLT

Lab