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.
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 :
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 :
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 :
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 :
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 :
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 :
2 – Le bouton “OK, tout accepter”
De base, ce bouton est vert et un peu flashy. Pour le personnaliser, copier/coller le code suivant :
3 – Le bouton “Personnaliser”
Pour le modifier, utilisez le code suivant :
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é”.
Vous avez 2 méthodes pour ajouter le lien permettant d’afficher le panneau de gestion de Tarteaucitron.
Méthode 1 : avec du JavaScript
Méthode 2 : avec une classe CSS
À noter
Pour les 2 méthodes, j’ai conservé l’attribut href de chaque lien. Ceci a pour conséquence, au clic sur le lien, de faire un retour en haut de page.
Si vous ne souhaitez pas ça, supprimez le href et ajoutez dans vos CSS la règle ci-dessous. Ceci afin que le curseur de la souris se transforme en pointeur lors du survol du lien.
Ç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 (voir la marche à suivre pour WP Rocket)
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.
Bonjour,
Il est également légal de laisser l’utilisateur revenir sur ses choix en matière d’utilisation des cookies. Pour cela il faut que dans la page de la “politiques de confidentialités” un accès à l’usage des cookies soit accessible. Pur cela, il faut laisser un lien vers la page de personnalisation des cookies gérés par tarteaucitron :
Gestion des cookies
Cela permettra d’afficher la page de personnalisation des cookies.
Bien à vous.
En effet, pour cela soit on passe showAlertSmall ou showAlertBig sur true et on utilise la fonctionnalité native de Tarteaucitron qui liste les cookies actifs.
Soit on ajoute un lien comme tu le dis, du type href=”#” onclick=”tarteaucitron.userInterface.openPanel();”
Bonjour, Pierre et merci pour ces explications !
En ce qui concerne le commentaire de Fabrice, une question me vient à l’esprit :
Dans certains plugins de ce type, un lien vers la politique de confidentialité est disponible. Sauf qu’ici, ce n’est pas le cas. Comment pourrions-nous le rajouter ?
En arrivant sur la page de confidentialité, le visiteur pourra faire ce que décrit Fabrice.
D’ailleurs, le lien que tu donnes dans ta réponse, fait apparaitre un lien ? Ou faut-il rajouter autre chose pour que ça apparaisse ?
Merci de m’éclairer ! 🙂
DoM.
Bonjour,
tarteaucitron permet bien d’insérer un lien pour aller vers la politique de confidentialité dans l’une des variables, et celui-ci apparait juste au dessus du choix des cookies 😉
Bonjour,
Bien que les explications soient claires j’ai testé et je ne suis pas arrivé à voir l’affichage de la popup.
pour le moment je me suis tourné vers l’outil quantcast.
Bonne journée et merci pour toutes infos sur le site
Bonjour,
J’ai scrupuleusement suivi la partie 1 & 2 de ce tutoriel et le bandeau ne s’affiche pas.
Aucune erreur n’est indiquer dans ma console.
Puis-je avoir une aide s’il vous plait ?
Résolu sur notre groupe Facebook Support Divi Community.
Source du problème : aucun service n’était ajouté dans la configuration.
Bonjour Marc, as-tu bien ajouté au moins un service dans ta configuration ?
N’oublie pas que la popup ne s’affiche pas si on est connecté à WordPress (test en navigation privée).
Super tuto, ça marche nickel :p
Merci Pierre pour tes recommandations, je vais examiner et reprendre le tout dès que j’ai un peu de temps.
bonjour j ai essayer et suivi à la lettre votre Tuto mais impossible d implémenter tarte au citron….. le script est bien présent dans le code ( vue développeur) mais impossible de l afficher….help !
Bonjour,
malgré le fait que cela marche très bien je ne comprend pas pourquoi le bouton en savoir plus ne s’affiche pas dans le bandeau… Comment faire pour que ce bouton “en savoir plus” apparraisse et comment y ajouter une balise de lien pour rediriger sur ma page de politique de confidentialité ?
Merci d’avance !
Caroline, vois pour ajuster les styles de ce lien car il est probablement de la même couleur que le fond et est donc invisible :
#tarteaucitronRoot button { color: #fff; }Laurent, vérifie ce qui est précisé dans le chapitre “Ça ne marche pas, que faire ?”.
Bonjour Pierre,
j’y ai pensé mais la souris ne détecte rien d’autre que ce qui est visible. Mais je vais essayer merci !
En fait si ce n’est pas sur le bandeau lui même j’aimerais au moins faire comme vous et avoir le bouton dans la partie qui se déroule lorsqu’on clique sur personnaliser.
Super cela marche maintenant ! j’ai tout désinstallé et re installé, et cela fonctionne. comment faire pour rajouter le lien (politique de confidentialité) dans le bandeau tarte aux citron ?
Cordialement,
ps: Merci pierre et la communauté Divi !
Bonjour,
en fait je n’ai pas réussi à faire dont tu m’avez parlé Pierre, alors j’ai relu votre code avant la partie “design” et il y avait un champs que je n’avez pas ajouté… donc le bouton n’était pas activé et il n’y avait pas de lien ! Forcément ça ne pouvait pas marcher 🙂 !
Bonjour,
je reviens avec une question sur la partie où l’on ajoute les services. Je n’ais pas compris dans quoi (quelle feuille ?) il faut retirer les codes déjà installés ???
Les services s’ajoutent dans le fichier functions.php de ton thème enfant.
Pour prendre l’exemple de Google Analytics, il ne faut pas que le code de suivi soit inséré ailleurs sur le site.
Oui mais comment peut-il être inscrit ailleurs ? cette histoire de remplacer c’est pour les scripts qui auraient été ajouté à la main dans ce fichier function.php, c’est ça ?
Mais alors pour les vidéos youtube, ou pour la mini google map de localitation il faut remplacer le code inséré dans le module divi lors de la création de la page du coup ?
Pour GA c’est si tu as inséré le tracker dans les options de Divi.
Pour Google Maps, pas besoin d’insérer un service.
Pour Youtube, rien à supprimer, juste le service à insérer.
D’accord, merci !
Bonjour,
J’ai utilisé votre script pour afficher la pop-up afin de gérer les cookies sur mon site. J’ai incorporé toutes les lignes de code dans le fichier fonctions.php du thème enfant de Divi.
Cela fonctionne très bien sur les tablettes et téléphones mais sur l’ordinateur la pop-up ne s’affiche pas.
Dans le footer j’ai ajouté la Gestion des Cookies qui fonctionne parfaitement sur les 3 supports.
J’ai regardé en mode console sans résultat.
Je vous remercie de votre aide.
Sincères salutations.
Luc Brochain
Bonjour Luc, si tu as utilisé exactement notre script il ne s’affiche que si tu es NON-connecté au site (les membres ont normalement déjà accepté les conditions). Du coup essaye en navigation privée et ça devrait marcher.
Bonne journée
Julien bonjour,
Je te remercie. je vais essayer.
Joyeux Noël.
Luc
Bonjour,
J’ai bien installé tarteaucitron et je vous en remercie !! Le bandeau s’affiche bien au bas de l’écran.
Toutefois, en cliquant sur Personnaliser, le panneau de gestion des cookies s’ouvre bien, … mais en cliquant sur “En savoir plus ” pour une catégorie de cookies, je ne vais pas sur le site “https://opt-out.ferank.eu/fr/service/”, pour avoir l’affichage détaillée des cookies de ce service, … comme<vous le faites.
Que faut-il faire ?
Merci de vos précisions !!!
Bonne journée.
Gérard
Bonjour Gérard, tu as bien modifié les liens de tes pages de confidentialité dans le script?
Bonsoir Julien,
Il me semble que je fais le nécessaire :
“privacyUrl”: “https://gerardmartinez-photographe.com/mentions-legales/”, /* Privacy policy url */
“hashtag”: “#tarteaucitron”, /* Open the panel with this hashtag */
“cookieName”: “tarteaucitron”, /* Cookie name */
“orientation”: “bottom”, /* Banner position (top – bottom) */
“showAlertSmall”: false, /* Show the small banner on bottom right */
“cookieslist”: true, /* Show the cookie list */
“adblocker”: false, /* Show a Warning if an adblocker is detected */
“AcceptAllCta” : true, /* Show the accept all button when highPrivacy on */
“highPrivacy”: true, /* 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 */
“readmoreLink”: “https://gerardmartinez-photographe.com/mentions-legales/” /* Change the default readmore link */
}),
tarteaucitron.user.gtagUa = ‘UA-117373213-1’;
(tarteaucitron.job = tarteaucitron.job || []).push(‘gtag’);
(tarteaucitron.job = tarteaucitron.job || []).push(‘twitter’);
(tarteaucitron.job = tarteaucitron.job || []).push(‘facebook’);
Je redirige le tout vers la page mentions légales, …. alors que sur votre site vous allez sur la page, … https://opt-out.ferank.eu/fr/service/gtag par exemple !!! , la page du service, ..
Merci, encore et bon week-end !!
Gérard
Bonjour Gérard,
je t’avoue que la je ne sais pas car notre config est identique à la tienne :-/
Bonjour, je cherche à modifier la phrase qui est dans le bandeau : “Ce site utilise des cookies…..”.
Comment faire ?
Je pense que le plus simple est de faire ça en JS.
Ajoute les lignes suivantes dans les options de Divi -> Intégration -> Ajouter ligne de code à la <head>… :
jQuery(document).ready(function($){
$(“#tarteaucitronDisclaimerAlert”).text(“Ici ton nouveau texte”);
});
Pense à englober ce code entre des balises <script> et à remplacer “Ici ton nouveau texte”.
Et fait attention aux guillemets qui risquent de poser souci lors du copier/coller (il te faudra peut-être les resaisir).
Bonjour Julien,
Merci pour ce tuto. L’installation s’est deroulé sans problèmes.
Cependant à l’ajout du lien de “Gestion des cookies” rien ne se passe en cliquant dessus, le pop-up de gestion ne s’affiche pas (sur ce site également).
Pour faire marcher le lien il suffit d’ajouter l’id “tarteaucitronOpenPanel” au lien. Ce qui nous donne :
Gestion des cookies
Voilà j’éspère que ça pourra aider ce qui rencontrent ce problème !
Bonjour,
J’ai réussi à mettre le pop-up cookies. Mais maintenant je n’arrive pas à mettre du css additionnel pour changer la pop-up. (Que ce soit sur wordpress ou sur mon thème enfant)
La méthode indiquée pour afficher la modale de gestion des cookies est tout à fait fonctionnelle.
C’était le lien de notre footer qui avait un souci… 🙃
Qu’entends-tu par “je n’arrive pas à mettre du CSS additionnel” ? Si tu ne sais pas où placer le code, tu peux lire notre article 7 manières d’ajouter des CSS à Divi.
Bonjour,
Merci pour ce tuto.
Quelle est l’url que vous copier/coller dans WP Rocket dans “Fichiers JS exclus” pour que le script soit exclu tout en laissant activé “Charger le JS en différé” ?
Merci
C’est l’URL du JS de Tarteaucitron :
cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.4/tarteaucitron.min.jsBonjour Pierre,
Merci pour le lien.
Je l’ai ajouté dans les js à exclure mais lorsque je le colle et que j’active charger le js en différé. Le bandeau de gestion des cookies disparaît?
Consulte cette page de la documentation de WP Rocket sur laquelle il y a un lien vers un mini plugin gratuit qui permet de corriger ça.
Remplace l’URL ligne 33 par celle du CDN de Tarteaucitron.
Merci pour cet article.
Je ne suis pas arrivé à masquer le gestionnaire de service.
Quelle est la procédure à suivre ?
Merci bien.
Il faut que tu définisses
showAlertSmalletshowAlertBigsurfalse.Merci pour le tuto… mise en place le 1 février 2020 à 21h06, … je n’avais pas répondu à la réponse de Julien… tout est parfait !!
Merci l’équipe.
Gérard
Bonjour Pierre, pour google le code de suivi n’est plus en UA-XXXX mais uniquement un ID avec une succession de chiffres !
Peut-on mettre ces chiffres directement à la place du code UA ? et cela va-t-il fonctionner de la même manière ?
Merci pour ta réponse
Bonjour,
Lorsque j’active le plugin, dans WordPress, ça me met :
“Cette extension a généré 3 caractères de sortie inattendus lors de son activation. Si vous remarquez des messages « headers already sent », des problèmes avec vos flux de syndication ou d’autres soucis, essayez de désactiver ou de supprimer cette extension.”
J’ai fait une bêtise en recopiant le code ??
Bonjour, il n’y a pas besoin d’une extension ici.