fbpx

Le Règlement Général pour la Protection des Données, en vigueur depuis le 25 mai 2018, impose de laisser le choix à vos visiteurs des cookies utilisés par votre site.

Un cookie, c’est un petit fichier enregistré sur votre ordinateur par un serveur, et qui permet de se souvenir de vous (ou d’une action que vous avez faites) lorsque vous revenez sur le site web visité.

Nativement, vous ne pouvez pas donner ce choix aux utilisateurs sur votre site, nous allons donc voir comment le faire en utilisant le script JS gratuit tarteaucitron.js

Tarteaucitron.js, qu’est-ce-que c’est ?

Tarteaucitron.js est un script que vous pouvez télécharger sur le site d’Amauri Champeaux qui permet à vos visiteurs de choisir les cookies qu’ils veulent autoriser parmi ceux que vous utilisez sur votre site, de manière individuelle.

Ils ont donc le choix d’en accepter certains et d’en refuser d’autres.

Le bandeau de gestion de Divi Community

Sachez que l’utilisation du script est gratuite si vous l’intégrez manuellement à votre site, mais vous coutera 15€/mois si vous choisissez d’utiliser le service premium ou tout est disponible en quelques clics.

Intégrer tarteaucitron.js manuellement à Divi

Nous allons voir ici comment installer et utiliser le script manuellement.

Pour ceci vous allez avoir besoin d’un thème enfant de Divi. Si vous n’en avez pas encore mis un en place, je vous conseille de télécharger gratuitement celui de Divi Community.

Le guide d’installation de tarteaucitron.js est assez bien détaillé et nous allons donc le suivre pas-à-pas pour mettre en place cette fonctionnalité.

1 – Charger tarteaucitron.js sur votre site

La première étape est le chargement du script JS sur votre site.

Pour ceci, nous allons ajouter le code suivant dans le fichier functions.php de votre thème enfant :

PHP
/functions.php

Quelques explications sur ce code :

  • On crée une fonction PHP qui va permettre de charger le script de façon externe, via un CDN. De cette manière votre site ne sera pas impacté par un quelconque temps de chargement.
  • La ligne 2 permet de ne pas charger le script si l’utilisateur est connecté. En fait si le visiteur est membre par exemple, c’est qu’il a déjà accepté toutes les conditions de votre site, nous n’avons donc pas besoin de lui demander son avis à chaque fois.

2 – Configurer le script

Pour configurer les options proposées par tarteaucitron.js, nous allons créer une nouvelle fonction PHP, toujours dans le fichier functions.php.

Je n’invente rien ici, tout est donné dans la documentation ici :

Voici donc la fonction à ajouter :

PHP
/functions.php

Si vous sauvegardez et que vous ouvrez votre site, vous pourrez voir que la pop-up est déjà visible.

Il nous reste cependant encore quelques étapes pour que l’ensemble soit opérationnel.

3 – Installer des services

La dernière étape consiste à définir et installer les services que votre site utilise.

Il peut ici s’agir de Google Analytics, du Pixel Facebook ou encore de Youtube par exemple.

La documentation de tarteaucitron.js étant très bien faite, elle vous permet de chercher n’importe quel service externe et vous fournit le code à utiliser pour remplacer le vôtre.

Prenons l’exemple du Global Site Tag de Google Analytics.
Si j’avais dû l’intégrer à Divi Community, j’aurais dû copier/coller le code suivant :

Lorsque l’on recherche ce service dans la documentation de tarteaucitron.js, voici ce qu’elle nous dit :

Quelques précisions :

  • La partie du bas, Marqueur du service, est normalement celle que vous utilisez tout le temps et qui vous est fournit par Google (ou un autre service si vous intégrez autre chose qu’Analytics). Elle est à supprimer et à remplacer par le code donné au-dessus.
  • La partie du haut est le code à intégrer en remplacement pour que l’autorisation ou non des cookies soit valide. Vous n’avez pas besoin de vous y connaitre en JS.

Deux choses à savoir:

  • Dans 99% des cas vous avez simplement à modifier la partie en vert comprenant votre code de suivi.
  • Si vous utilisez les services de manières classiques, vous pouvez à chaque fois supprimer les lignes comprenant le commentaires /* add your optional...*/ . Elles ne vous sont utiles que si vous utilisez des réglages très particuliers pour vos services.
    Dans l’exemple du code Google, il n’y a par exemple aucune option supplémentaire.

Maintenant que nous avons le code à insérer, nous allons voir comment le faire et surtout comment en ajouter plusieurs.

Ouvrez le fichier functions.php de votre thème enfant et ajoutez-y la fonction suivante :

PHP
/functions.php

Quelques précisions sur ce code:

  • On créé une fonction qui ajoute le script dans le footer de notre site de manière à ne pas ralentir ou bloquer l’affichage.
  • Si vous comparez au code donné dans la documentation, nous avons collé uniquement les deux lignes nous intéressant.
  • Maintenant que la fonction est en place, nous allons pouvoir activer tous nos services à l’intérieur.

Imaginons qu’en plus de Google Analytics, vous utilisez Youtube sur votre site.

Nous recherchons donc Youtube dans les services, toujours dans la documentation :

Comme précédemment, nous avons différents encarts avec du code :

  • Encart Ajoutez cette partie : le code que nous allons ajouter à notre fonction nouvellement créée (sans les balises puisque nous les avons déjà)
  • 2e encart : le code à afficher dans vos pages pour afficher les vidéos. Tous les paramètres sont donnés, vous n’avez qu’à les choisir.
  • 3e encart : le code que vous utilisez sûrement actuellement à supprimer et remplacer par celui juste au-dessus.

Notre fonction dans le fichier functions.php pour ajouter Youtube devient donc :

PHP
/functions.php

Vous devriez maintenant être en mesure d’ajouter tous les services qu’utilise votre site.

Je vous mets en exemple ci-dessous le code complet que l’on utilise pour Divi Community, comprenant tous les services intégrés :

PHP
/functions.php

Modifier le design de tarteaucitron.js

C’est bien beau de pouvoir intégrer le script à n’importe quel site, mais on ne va pas se mentir, le design de base ne s’intègre pas forcément très bien à tous les sites.

Je vais donc vous donner ici les principales propriétés CSS à utiliser pour modifier les différentes couleurs de la barre de cookies et de la fenêtre pop-up pour que tout s’intègre parfaitement.

1 – La barre de cookies

Pour modifier la couleur de fond et de police de la barre de cookies, utilisez le code suivant dans le fichier style.css de votre thème enfant ou dans Apparence->Personnaliser->CSS Additionnel :

CSS

2 – Le bouton “OK, tout accepter”

De base, ce bouton est vert et un peu flashy. Pour le personnaliser, copier/coller le code suivant :

CSS

3 – Le bouton “Personnaliser”

Pour le modifier, utilisez le code suivant :

CSS

Autoriser l’utilisateur à revenir sur ses choix de cookies

Dernière point, et non des moindres, vous devez permettre à vos visiteurs de changer d’avis une fois qu’ils ont accepté ou refusé vos cookies.
Pour ce faire, il vous suffit d’ajouter un lien intitulé par exemple “Gestion des cookies”, soit dans le footer de votre site, soit sur votre page “Politique de confidentialité”.

Ce lien se présente ainsi :

HTML

Cliquer sur ce lien aura pour effet d’afficher à nouveau la pop-up de personnalisation des cookies.

Ça ne marche pas, que faire ?

Vous avez scrupuleusement suivi ce tutoriel et pourtant rien ne se passe, ou alors le bandeau ne s’affiche qu’une fois sur 10 ?

Ouvrez la console du navigateur et regardez tout d’abord si vous avez des erreurs.

Je parie que vous allez y trouver l’erreur suivante :

Cette erreur peut apparaitre pour 2 raisons :

  • lorsque vous visitez votre site en tant qu’utilisateur connecté ; car souvenez-vous dans la section “Charger tarteaucitron.js sur votre site”, nous avons précisé dans le code que le script ne devrait être chargé que si l’utilisateur était déconnecté
  • lorsque vous différez vos scripts JS en utilisant un plugin comme WP Rocket ou JS Async Script.
    Pour corriger le problème, selon le plugin que vous utilisez, vous devez donc :
    • soit décocher l’option Chargement différé des fichiers JS
    • soit exclure le script manuellement

Pour terminer, rafraîchissez la page et vous verrez votre bandeau de cookies. 😉

Conclusion

Après le petit mal de crâne que peut vous donner ce tutoriel, l’intégration de tarteaucitron.js se fait finalement assez simplement.
Les services disponibles utilisant des cookies sont tous disponibles dans la documentation et généralement un copier-coller suffit à le rendre fonctionnel.

Gardez tout de même en tête que même si vous êtes maintenant en mesure de laisser le choix au visiteur de sélectionner les cookies qu’il souhaite ou non autoriser, ce script ne permet pas à lui seul de respecter à 100% la loi sur le RGPD et qu’un juriste ou un avocat sera toujours plus fiable.