Item 4 de l’épisode 4
PrestaShop Gestionnaire de cookies : Cet épisode fait partie de l’épisode 4 de la série PrestaShop.
Mais afin de ne pas avoir un épisode/tutoriel de plusieurs heures, je l’ai donc partitionné.
Voici les différentes parties de l’épisode 4 :
- Épisode 4.1 : Intégration de Google Tag Manager dans PrestaShop et configuration avec Analytics.
- Épisode 4.2 : Intégration d’un bouton J’aime de Facebook sur la boutique PrestaShop.
- Épisode 4.3 : Intégration d’une vidéo YouTube sur la boutique PrestaShop.
- Épisode 4.4 : Intégration du gestionnaire de cookies selon RGPD sur la boutique PrestaShop et paramétrages des services.
- Épisode 4.5 : Réglages et personnalisation du gestionnaire de cookies.
PrestaShop Gestionnaire de Cookies : Préambule
Nouvel épisode de la série consacrée à PrestaShop, ou j’ai décidé de vous dévoiler ma façon de faire pour la mise en place d’un système de gestion des cookies.
Pour débuter, je rappellerai rapidement ce qu’est un cookie et à quoi correspond le sigle RGPD.
Ensuite, je vous montrerai ce qu’il était possible de faire avant de façon simple. Mais ça, c’était avant… Maintenant, cela est un peu plus compliqué et je vous explique pourquoi dans le déroulé de ce tutoriel.
Lorsque je dis un peu plus compliqué, ce n’est pas tant au niveau du code.
Ce qui demande des efforts et du temps, dans la mise en place de la gestion des cookies, c’est surtout de gérer les choses telles que le demande le RGPD.
Nous verrons ensuite comment mettre en place notre gestionnaire de cookies en utilisant un outil nommé “tarteaucitron”, et que la CNIL elle-même utilise.
Rappel sur les services implémentés
Afin de paramétrer les différents services sur notre nouveau gestionnaire, je me servirai des services que nous avons mis en place dans les épisodes précédents. En effet, nous avons vu que les conséquences, lors de l’implémentation du bouton J’aime de Facebook et de la vidéo YouTube, étaient la délivrance de nombreux cookies de la part de ces services. Mais nous verrons que nous pouvons paramétrer également d’autres services, et nous ajouterons d’ailleurs Google Tag Manager à la liste de ces services.
Suivez moi ! Encouragez moi !
Produire du contenu comme ce tutoriel me prend pas mal de temps. Pensez à la rédaction du tutoriel pas à pas, le tutoriel vidéo, la préparation, les tests, les captures d’images, l’enregistrement, le montage, le code, et vous comprendrez rapidement que cela est chronophage.
Si cette série ou cet épisode vous sont plaisants et vous intéresses, merci de prendre quelques secondes ou minutes pour me suivre et m’aider dans mon référencement :
- S’abonner à ma chaîne YouTube.
- S’abonner à ma page Facebook.
- S’abonner à ma page Instagram.
- S’inscrire sur le site.
Merci sincèrement de me soutenir et m’encourager !!
Le choix du roi
Comme toujours sur le blog Activateur Web, vous le savez, vous avez le choix entre suivre ce tutoriel par le biais du tutoriel vidéo, ou vous pouvez également suivre ce tutoriel à lire où je vous guide pas à pas dans la mise en place des différentes étapes.
A vous de voir, mais vous êtes libres de faire les 2 à la fois, bien entendu.
Bon visionnage ou bonne lecture.
Tutoriel Vidéo : PrestaShop Gestionnaire de cookies
Tutoriel à lire et à suivre pas à pas
Cliquez sur la double flèche de la table des matières pour ouvrir ou fermer celle-ci.
Table des matières - Sommaire
Prérequis
Boutique sur environnement local
Comme toujours, je développerai sur ma boutique située sur mon serveur local, et depuis mon thème enfant. Je pourrai ainsi faire mes tests sans devoir mettre ma boutique réelle en ligne en mode maintenance. Lorsque mes tests seront faits et validés, je pourrai alors pousser le code sur ma boutique en ligne située sur mon serveur distant.
Bien entendu, vous pouvez choisir de modifier directement votre boutique de production (en ligne), sans passer par le développement en local, mais c’est un risque que personnellement, je ne préfère pas prendre.
Pour la configuration de la boutique PrestaShop, je vous invite à lire l’article consacré aux réglages de la boutique, intitulé “mode Développement VS mode Production”. Vous pouvez aussi télécharger le guide des différents réglages que j’ai créé pour l’occasion.
Éditeur de code
Nous aurons besoin d’un éditeur de code. Pour ma part, j’utilise VSCode, mais libre à vous d’utiliser votre éditeur préféré. Si vous n’avez pas encore d’éditeur de code, vous pouvez installer Visual Studio Code (gratuit) en suivant l’article de blog que j’ai rédigé.
Services utilisant des cookies
Je vous l’ai dit en introduction, je me servirai des services implémentés dans les épisodes précédents pour configurer le gestionnaire de cookies que nous allons mettre en place.
Obligations PrestaShop Gestionnaire ce cookies ?
Cependant, sachez que même si vous n’avez pas mis en place ces services, vous devez mettre en place un gestionnaire de cookies sur votre boutique PrestaShop. Même si les seuls cookies sont ceux délivrés par PrestaShop et par la session des utilisateurs, vous devez les avertir de la délivrance de ces cookies. Être transparent avec nos clients, c’est la règle.
Un cookie : qu'est-ce que c'est ?
Un cookie est un petit fichier informatique, un traceur, déposé et lu par exemple lors de la consultation d’un site internet, de la lecture d’un courrier électronique, de l’installation ou de l’utilisation d’un logiciel ou d’une application mobile, et ce, quel que soit le type de terminal utilisé (ordinateur, smartphone, liseuse numérique, console de jeux vidéo connectée à Internet, etc.).
Créer un système de gestion des cookies
Ce qui était permis avant :
Voici ce que j’aurai mis en place, il y a encore quelques années. Cette façon de faire était relativement simple à coder.
À noter que cette façon de faire est encore possible dans certains pays ne faisant pas partie de l’Union européenne, et surtout qui ne vendent pas aux internautes européens.
Nous avions à l’époque, uniquement à informer nos utilisateurs que lorsqu’ils naviguent sur notre site, ils acceptent la mise en place des cookies.
Bien évidemment, plusieurs manières plus ou moins sophistiquées permettent de mettre en place un bandeau, ou une bannière d’avertissement de ce type.
Le code d'antan
Voici en gros ce que je faisais avant pour mettre en place un tel bandeau :
- Je commence par ajouter le code de la bannière dans le template “both-layout-columns.tpl”. A l’époque, je codai déjà en modifiant tous mes fichiers depuis un thème enfant, bien entendu. Dans cet élément, je mets un lien renvoyant sur une page comme les mentions légales par exemple.
- Je crée ensuite une session utilisateur afin que la bannière ne s’affiche plus dès la seconde page visitée par mon utilisateur. Cette session doit être initialisée dans un contrôleur. Et comme il est hors de question de toucher aux fichiers du cœur de PrestaShop, on fait alors un override, ou en français une surcharge du contrôleur nommé “FrontController.php”.
- On commence toujours par tester si la session est active, et on ajoute ensuite une condition dans notre fichier tpl.
- Le bandeau disparaît dès que l’utilisateur commence à naviguer. Mais donnons lui aussi la possibilité de fermer la bannière en cliquant sur un bouton.
- On ajoute donc une fonction JavaScript pour permettre de fermer la bannière lors du clic sur l’icône du bouton (qui peut aussi être une image). Bien sûr, nous faisons cela depuis le fichier custom.js du thème enfant. (classic_child/assets/js/custom.js)
- Reste à mettre en style cette bannière avec là aussi la mise en place des règles CSS depuis le fichier custom.css de notre thème enfant.
Remerciements
J’en profite pour remercier Webbax qui à l’époque avait publié un tutoriel sur cette façon de faire. Et à l’époque, cela m’avait grandement aidé à mettre en place ce type de bandeau.
Affichage du bandeau
Le code d’antan donné ceci à l’affichage :
Interdiction
ATTENTION, surtout ne pas coder un tel bandeau sur votre boutique ou votre site.
Ceci est obsolète et interdit depuis l’entrée en vigueur du RGPD.
Si vous le faites ainsi, vous vous exposez à des amendes, voire à la fermeture de votre site.
La CNIL veille et peut vous sanctionner !!
C'était mieux avant ?
Voilà comment était gérée auparavant la gestion des cookies. Mais ça, c’était avant !!
Pourquoi faire simple lorsqu’on peut faire compliquer, me direz vous ?
Alors, on peut voir les choses sous cet angle effectivement. Mais après tout, n’est ce pas pour notre bien que le RGPD a été mis en place. Nous parlons tout de même de la gestion des données personnelles des utilisateurs. Et nos propres données sont également concernées lorsque nous naviguons à notre tour sur d’autres sites.
RGPD : Qu’est ce que c’est exactement ?
Le sigle RGPD signifie « Règlement Général sur la Protection des Données ».
En anglais, ça donne « General Data Protection Regulation » ou GDPR.
Le règlement général de protection des données (RGPD) est un texte réglementaire européen qui encadre le traitement des données de manière égalitaire sur tout le territoire de l’Union européenne (UE).
Vous l’aurez compris, le RGPD définit les normes, dès lors que nous traitons des données personnelles, c’est à dire des informations qui concernent nos clients ou nos utilisateurs.
Le meilleur moyen de connaître toutes les informations et outils à mettre en place dans le cadre du RGPD est de se rendre directement sur le site de la CNIL (commission nationale de l’informatique et des libertés).
Je vous parlerai de certains d’entre eux dans ce tutoriel, mais celui-ci est surtout destiné à mettre en œuvre un système de gestion des cookies pour vos utilisateurs.
Futur tutoriel
Il y a malheureusement beaucoup d’autres choses à gérer dans le cadre du RGPD.
Je rédigerai un futur article concernant les outils à mettre en place lorsqu’on gère une entreprise de commerce ou de service (gestionnaire de cookies, registre obligatoire, référent dans l’entreprise, déclaration à la CNIL, etc.).
Quel système de gestion des cookies doit on mettre en place ?
Pour un site internet, plusieurs choses doivent être mises en place, à commencer par le système de gestion des cookies.
Un tel système consiste à donner la possibilité à l’utilisateur d’accepter ou de refuser la mise en place des cookies, ou encore de pouvoir changer d’avis. Et pour cette dernière, nous permettrons aux utilisateurs d’accéder rapidement au tableau de choix des cookies.
Bien entendu, selon les cookies de suivis que vous mettrez en place sur votre site, les scripts seront différents.
Si par exemple, vous utilisez un outil comme Google Tag Manager et Google Analytics, pour analyser votre audience, les pages les plus consultées, etc., alors vous mettrez en place le script correspondant dans votre gestionnaire de cookies. Si vous mettez un pixel Facebook, vous en ferez autant pour ce dernier, etc. Bref, vous m’avez compris, et je pense que vous êtes impatient de savoir comment je m’y prends pour mettre en place ce gestionnaire.
Alors c’est parti, voyons cela tout de suite.
Cookies obligatoires
À préciser toute de même que la CNIL, informe :
L’utilisation de ces outils est soumise à votre consentement dès lors qu’ils ne sont pas strictement nécessaires au fonctionnement du site concerné.
Ce qui, en bref, signifie que pour les cookies obligatoires pour le fonctionnement de notre boutique PrestaShop, nous n’avons pas besoin de demander l’accord de nos utilisateurs et clients. Mais la bonne pratique consiste tout de même à les informer de la délivrance de ces cookies. Question de transparence et d’honnêteté vis-à-vis de nos clients.
Module PrestaShop RGPD Officiel
Vous le savez peut-être où vous l’avez déjà vu, PrestaShop met à votre disposition un module nommé RGPD Officiel. Celui-ci, est-il suffisant à mettre en place ? Non !
Je vous conseille bien évidemment de l’utiliser et de le paramétrer sur votre boutique.
Celui-ci vous permet :
- De vérifier que les modules que vous utilisez sont bien en règle avec le RGPD.
- Posséder un listing des données collectées sur vos utilisateurs.
- Pouvoir envoyer les données collectées d’un utilisateur s’il en fait la demande.
- Supprimer les données collectées d’un utilisateur s’il en fait la demande.
- Configurer les cases à cocher d’obtention de consentement affichées lors de la création d’un compte client, et dans l’onglet informations du compte client. Vous pourrez indiquer le message que vous souhaitez afficher pour chaque case à cocher.
- Suivre les actions des clients en relation avec leurs données personnelles.
C’est pourquoi ce module doit être installé et configuré. Il vous sera d’une grande aide notamment lors de la rédaction de votre registre RGPD obligatoire. Vous aurez ainsi obtenu une partie de la norme !
Mais ne le confondez pas avec un gestionnaire de cookies !
PrestaShop Gestionnaire de cookies selon RGPD
Mise en place du gestionnaire de cookies
Puisque la CNIL régit tout ce qui concerne le RGPD, autant suivre leurs recommandations, vous ne croyez pas ? Et ça tombe plutôt bien, car la CNIL a longtemps promu un outil qui est un script, comme étant en adéquation avec le règlement sur la protection des données. D’ailleurs, ils l’utilisent eux-mêmes. Ce script s’appelle “tarteaucitron”.
Je vais donc vous expliquez comment installer et paramétrer ce script “tarteaucitron” sur votre site PrestaShop.
Comme précédemment, je vous ai expliqué comment mettre en place un thème enfant, je ferai donc les changements nécessaires dans ce thème enfant (nommé “classic_child” dans mon cas), qui nous permet de ne faire aucune modification de fichiers dans le thème parent. Si vous n’avez pas mis en place de thème enfant, vous pouvez faire les modifications dans votre thème directement.
Allez, continuons sur notre tarte aux citrons aux saveurs de cookies ! 😂😉
Mise en place de "tarteaucitron"
Vous aurez la possibilité de récupérer le code que nous allons écrire comme d’habitude sur cet article de blog, ou vous pouvez vous rendre sur le site tarteaucitron.io également.
Sur ce site, vous avez la possibilité d’utiliser une version open-source et gratuite comme nous allons le faire, mais sachez également qu’une version pro est également proposée pour 15€/mois. Cette version payante vous permettra de bénéficier d’une version toujours à jour du script, de la détection automatique des services que vous mettez en place, et pour ceux qui possèdent un site WordPress, un plugin WordPress est également fourni.
Téléchargement du script
Lorsque vous êtes sur la page d’accueil de “tarteaucitron.io”, vous cliquez sur le lien Guide d’installation, et ensuite sur installation manuelle gratuite :
On vous propose 2 choix pour récupérer le script :
- Avec le gestionnaire de package Npm (Node).
- En vous rendant sur GitHub.
Pour l’usage de Npm, si vous utilisez Node sur votre projet, vous pouvez l’utiliser.
En ce qui nous concerne, nous allons utiliser GitHub, et je clique donc sur ce lien.
Une fois sur la page GitHub, sélectionnez le lien de la dernière version, en fonction de votre système (soit le zip, ou soit le .tar.gz). Je suis sous Windows, je prends donc le zip en cliquant dessus, et je l’enregistre sur mon ordinateur.
Les versions évoluent sans cesse. Vous n’aurez donc pas forcément la même version que celle sur l’image ci-dessous. Prenez la dernière version publiée.
Extraire le fichier téléchargé
Comme ce dossier zip est une archive, nous devons bien entendu l’extraire.
Sur Windows, je fais donc un clic droit sur mon dossier téléchargé et je sélectionne ensuite “Extraire tout”. Pour le moment, je l’extrais où j’ai enregistré mon dossier, mais nous le déplacerons ensuite. Laissez donc votre explorateur ouvert.
Contenu du dossier tarteaucitron.js-1.16.1extrait :
Installation du dossier tarteaucitron sur la boutique
Création du dossier tarteaucitron de notre site PrestaShop
Nous pouvons maintenant ouvrir notre éditeur de code, et ouvrir le dossier qui contient notre boutique PrestaShop.
Je me rends ensuite dans le dossier “themes“, puis j’ouvre mon dossier du thème enfant, “classic_child” en ce qui me concerne. Bien entendu selon votre cas, vous ouvrez le dossier du thème qui est actif sur votre site.
À l’intérieur de mon thème enfant, je créais un nouveau dossier que je vais nommer, par exemple, “tarteaucitron”… Oui, je sais, je suis toujours inspiré pour nommer les choses… 🧑💻😂
Copie/Colle des dossiers et fichiers
Maintenant, que ce dossier est créé pour notre site, nous allons copier tous les dossiers et fichiers du dossier téléchargé “tarteaucitron.js-1.14.0“ et les coller à l’intérieur de notre nouveau dossier. Je fais donc un “Ctrl+a“ pour sélectionner tous les dossiers et fichiers, puis depuis mon explorateur de fichiers, je les fais glisser dans mon dossier “tarteaucitron” dans VsCode.
Mes éléments sont maintenant présents dans le dossier “tarteaucitron” de mon thème enfant :
ATTENTION : dans ce dossier, certaines choses pourraient être supprimées. Je vous conseille néanmoins de laisser les éléments sans rien modifier. Vous remarquerez également un dossier “css“, et on pourrait être tenté de regrouper ce dossier avec le dossier “css”(dans “assets”) du thème. Mieux vaut éviter, car le script comprend des chemins jusqu’à ces fichiers, et si vous les déplacez, le script émettra des erreurs et ne retrouvera pas les fichiers déplacés.
Connaître les cookies présents sur le site
Afin de connaître les scripts que nous devons mettre en place pour demander le consentement de nos utilisateurs, il nous faut tout d’abord connaître les cookies présents sur notre site.
Pour cela, nous utilisons les outils de navigateur. Taper donc sur la touche F12 lorsque vous êtes sur la page d’accueil de votre boutique. Sur le navigateur Chrome, rendez-vous dans l’onglet “Appli”, puis à gauche sur Cookies. Sur Firefox, ça doit être l’onglet “Stockage”.
En cliquant sur Cookies, vous pouvez voir tous les cookies présents sur votre site.
Liste des services délivrant des cookies
De mon côté, dans cette liste, je peux voir :
- Premièrement, un service avec l’URL localhost : étant donné que je développe en local, l’URL localhost correspond au nom de domaine de ma boutique. Sur la boutique en production (sur serveur distant), votre nom de domaine sera affiché à la place. La liste des cookies délivrés par ce service est indispensable au bon fonctionnement de votre boutique. Nous n’avons donc pas à demander le consentement aux utilisateurs. On pourra tout de même leur en faire part dans les mentions légales ou autres par exemple. À noter toutefois, que notre balise Google Tag Manager fait partie de cette liste.
- Un second service avec l’URL Facebook : ces cookies sont la conséquence de l’implémentation du bouton J’aime de Facebook. Et il y en aura davantage si on affiche d’autres choses provenant de Facebook.
- Un troisième service avec l’URL YouTube : ces cookies sont la conséquence de la mise en place de la vidéo YouTube dans le pied de page(footer).
Mise en place du code depuis le thème enfant
Pour mettre en place le code de notre gestionnaire de cookies, nous devons modifier les balises de notre site. En effet, afin que notre gestionnaire de cookies se charge au lancement de notre page, il faut le mettre dans ces balises.
Mais comme nous avons un thème enfant, nous allons plutôt modifier le fichier du thème enfant.
Pour ceux qui ont suivi la série et les épisodes précédents :
Si vous avez suivi la série, et donc, l’épisode consacré à l’implémentation de Google Tag Manager, vous le savez, nous avons déjà mis en place son code d’intégration dans la balise de la page. Pour faire cela, nous avions créé le fichier “head.tpl“ dans le thème enfant, et avons modifié le block nommé “hook_extra“.
C’est donc dans ce fichier “head.tpl“ et dans ce block “hook_extra“ que nous allons mettre le code d’intégration de tarteaucitron.
Pour ceux qui n’ont pas suivi la série et les épisodes précédents :
Si vous avez mis en place un thème enfant, vous le savez pour modifier les templates depuis le thème enfant, vous devez recréer la même structure de dossiers et de fichiers que dans le thème parent, et nommé ces dossiers et fichiers avec la même orthographe. Il faut ensuite étendre votre fichier “parent” depuis le fichier “enfant”, et enfin copier la balise block dans lequel vous allez apporter des modifications ou ajouter le code et la coller dans le fichier enfant.
Pour ajouter le code d’intégration, vous devrez donc dans votre thème enfant recréer la structure ainsi : créer le dossier “templates“, à l’intérieur créer le dossier “_partials“, et enfin créer le fichier “head.tpl“.
La première ligne du fichier “head.tpl“ du thème enfant devra étendre le fichier parent, et sera donc celle-ci :
{extends file='parent:_partials/head.tpl'}
Enfin, vous copier le block “hook_extra” depuis le fichier parent, et le coller dans le fichier enfant :
{block name='hook_extra'}
<!--Vous mettrez le code ici -->
{/block}
Pour ceux qui n’ont pas de thème enfant :
Vous pouvez dans votre cas mettre en place le code directement dans le fichier “head.tpl“ du thème parent (thème nommé “classic“ par défaut), et dans le block “hook_extra“.
Mais je ne le rappellerai jamais assez : tout votre code sera perdu lorsqu’une mise à jour de la version de PrestaShop sera faite ! Ce qui ne sera pas le cas si vous mettez en place un thème enfant.
Mise en place du script d'initialisation de "tarteaucitron"
Maintenant, nous pouvons à l’intérieur du block, mettre notre code :
Vous pouvez soit copier le code depuis la page du site “tarteaucitron.io“ ou copier le code ci-dessous.
Vous noterez que, ci-dessous, les commentaires du code ci-dessous ont été traduits.
<script src="/tarteaucitron/tarteaucitron.js"></script>
<script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "", /* URL de la page de la politique de vie privée */
"bodyPosition": "bottom", /* ou en haut pour l'amener comme premier élément d'accessibilité */
"hashtag": "#tarteaucitron", /* Ouvrir le panneau contenant ce hashtag */
"cookieName": "tarteaucitron", /* Nom du Cookie */
"orientation": "middle", /* Position de la bannière (top - bottom) */
"groupServices": false, /* Regrouper les services par catégorie */
"showDetailsOnClick": true, /* Cliquez pour agrandir la description*/
"serviceDefaultState": "wait", /* État par défaut (vrai - attendre - faux) */
"showAlertSmall": false, /* /* Voir la bannière réduite en bas à droite */ */
"cookieslist": false, /* Voir la liste des cookies */
"closePopup": false, /* Afficher le X de fermeture sur la bannière */
"showIcon": true, /* Afficher l'icône de cookie pour gérer les cookies */
//"iconSrc": "", /* Facultatif : URL ou image encodée en base64 */
"iconPosition": "BottomRight", /* BottomRight, BottomLeft, TopRight and TopLeft */
"adblocker": false, /* Voir une alerte si un bloqueur de publicités est détecté */
"DenyAllCta" : true, /* Voir le bouton Refuser tout */
"AcceptAllCta" : true, /* Voir le bouton Accepter tout (quand highPrivacy est à true) */
"highPrivacy": true, /* Désactiver le consentement automatique */
"handleBrowserDNTRequest": false, /* Si la protection du suivi du navigateur est activée, tout interdire */
"removeCredit": false, /* Retirer le lien vers tarteaucitron.js */
"moreInfoLink": true, /* Afficher le lien "voir plus d'infos" */
"useExternalCss": false, /* Si false, tarteaucitron.css sera chargé */
"useExternalJs": false, /* Si false, tarteaucitron.js sera chargé */
//"cookieDomain": ".my-multisite-domaine.fr", /* Cookie partagé sur multisite (pour les sous domaine) */
"readmoreLink": "", /* Lien vers la page "Lire plus" */
"mandatory": true, /* true - false - Afficher un message sur les cookies obligatoires */
"mandatoryCta": true, /* Afficher le bouton d'acceptation désactivé lorsqu'il est obligatoire */
//"customCloserId": "" /* Facultatif: ID d'élément personnalisé utilisé pour ouvrir le panneau */
});
</script>
Explications du code
Attardons nous un peu sur ce code, et voyons ce que nous devrons modifier :
La première balise appelle le script, mais nous devons indiquer le chemin exact pour cet appel :
Étant donné que nous sommes dans le “head.tpl”, je modifie le chemin de cette manière :
<script src="../../tarteaucitron/tarteaucitron.js"></script>
Je remonte dans les différents dossiers, et vais chercher le fichier tarteaucitron.js qui se trouve dans le dossier tarteaucitron.
Ensuite nous avons l’initialisation du script avec :
<script type="text/javascript">
tarteaucitron.init({
// les différents items de configuration...
})
</script>
Configuration de tarteaucitron
À l’intérieur du script d’initialisation, nous avons différents éléments (items) pour la configuration du script.
Nous verrons cela, plus en détails, dans l’épisode suivant, qui sera consacré à la personnalisation du gestionnaire cookie (épisode 4.5). Notez que les commentaires traduits en français à côté de ces items, vous donne déjà de bonnes indications sur leurs utilités.
Lorsque vous avez des cookies sur votre site, vous devez, toujours selon le RGPD, avoir une page traitant de ce sujet. Sur cette page, vous allez devoir indiquer à vos utilisateurs, pourquoi vous mettez en place les différents cookies, et quelles sont les données qui seront récupérées sur eux. Comment les utilisateurs peuvent demander de supprimer les données que vous détenez sur eux, etc.
Vous mettrez donc le lien vers la page traitant de ce sujet ici.
“bodyPosition”: “bottom” :
Peut être réglé sur “top” pour l’amener comme premier élément d’accessibilité. Autrement dit pour lecteur d’écrans et autres outils utilisés pour les personnes souffrant de handicaps.
“hashtag”: “#tarteaucitron”
Ceci, comme vous le voyez, indique un ID nommé tarteaucitron. Cela correspond à l’ID que nous donnerons à la popup de notre système de gestion de cookies que nous créerons par la suite.
“cookieName”: “tarteaucitron” :
Vous pouvez ici donner un nom au cookie qui sera laissé par ce script.
“orientation”: “middle” :
Ici nous pouvons indiquer la position où se positionne notre popup.
“groupServices”: false :
Indique si nous voulons regrouper les services par catégorie. Nous verrons cela lors de la personnalisation.
“showDetailsOnClick”: true :
Indique si nous voulons voir les détails, la description lorsque nous cliquons dessus.
“serviceDefaultState”: “wait”. Indique l’état par défaut. peut être réglé à true, “wait”, ou false.
“showAlertSmall”: false
Ici cela indique si nous souhaitons ensuite que la popup soit réduite en bas à droite de notre site. Réglé à true pour la réduire.
“cookieslist”: true
On indiquera ici si on veut voir la liste des cookies.
“closePopup”: false : Afficher le X de fermeture sur la bannière si true.
“showIcon”: true : Affiche l’icône de cookie pour gérer ceux-ci.
“iconPosition”: “BottomRight” :
L’endroit où nous voulons que l’icône s’affiche. Réglages possibles : BottomRight, BottomLeft, TopRight and TopLeft.
“adblocker”: false
Voir une alerte si un bloqueur de publicités est détecté sur le navigateur de l’utilisateur. Celui-ci reçoit alors une alerte pour le prévenir que son bloqueur est actif.
“DenyAllCta” : true
Ceci va permettre d’ajouter un bouton afin que l’utilisateur refuse tous les cookies d’un coup, plus que de les accepter un par un. Si la balise suivante est définie à true.
“AcceptAllCta”: true
Ceci va permettre d’ajouter un bouton afin que l’utilisateur accepte tous les cookies d’un coup, plus que de les accepter un par un. Si la balise suivante est définie à true.
“highPrivacy”: true :
Désactive le consentement automatique. ATTENTION la valeur true est OBLIGATOIRE pour les entreprises qui ciblent des utilisateurs résidants de l’ union européenne.
“handleBrowserDNTRequest” :
Ici on indiquera pour les utilisateurs ayant configuré leur navigateur pour qu’il refuse les cookies automatiquement, si on souhaite que les cookies de notre site soient bloqués automatiquement (on passera la valeur à true), si false on demandera à l’utilisateur de confirmer son choix.
“removeCredit”: false
Ici, nous avons la possibilité d’enlever le lien vers tarteaucitron qui s’affiche sur la popup. Pour ma part, j’aime plutôt rendre à César ce qui appartient à César, et donc je le laisse. Et vu le travail fournit par les développeurs , laissons leurs au moins le crédit de leur travail, et laissons le lien pour les remercier de proposer une version gratuite.
“moreInfoLink”: true
Ici, nous pouvons mettre un lien sur le texte “Voir plus d’infos”.
“useExternalCss”: false
Ici nous pouvons utiliser un lien vers notre propre CSS, ou laisser le fichier tarteaucitron.css faire le travail.
“useExternalJs”: false :
Ici nous pouvons utiliser un lien vers notre propre code JavaScript, ou laisser le fichier tarteaucitron.js faire le travail.
“cookieDomain”: “.my-multisite-domaine.fr”
Celui-ci, je l’ai mis en commentaire, mais sachez que vous avez la possibilité de l’activer si vous possédez un nom de domaine utilisant des sous-domaines, et que vous souhaitez activer le système de gestion de cookies pour le domaine et les sous-domaines.
“readmoreLink”: ” “
C’est ici que vous mettrez le lien sur le texte “Voir plus d’infos” cité dans l’item n°12.
“mandatory”: true : Affichera un message sur les cookies obligatoires.
“mandatoryCta”: true : Afficher le bouton d’acceptation désactivé lorsqu’il est obligatoire.
“customCloserId“: “” Facultatif: ID d’élément personnalisé utilisé pour ouvrir le panneau
Si nous allons sur notre page d’accueil, pour l’instant, rien de plus ne s’y passe.
Normal, car pour l’instant, tout ce que nous avons fait est d’installer et de configurer “tarteaucitron”.
Remplacement des balises officielles
Maintenant que notre script est configuré, nous devons récupérer le code sur le site de “tarteaucitron.io” suivant les cookies que nous avons.
Je reprends mon exemple avec mon bouton J’aime Facebook.
Je me rends donc sur cette page de “tarteaucitron.io” (à l’étape 3) et dans la barre de recherche, je tape le nom de mon service, donc ici je vais taper Facebook.
On va ensuite chercher le service exact qu’on a mis en place. Ici, ce sera donc le bouton J’aime, et par conséquent, Facebook Réseaux sociaux :
Après avoir cliqué sur le bouton “Installer”, cela nous donne 3 étapes :
- Coller le script : ici, nous n’aurons besoin que du code qui est à l’intérieur du script puisque nos balises “script” sont déjà créées.
- Copier le code en fonction du style que nous voulons donner à notre bouton.
- Retirer le code que nous avions mis pour le bouton J’aime Facebook.
Notre fichier “head.tpl” du thème enfant ressemble donc à celui-là :
Nous devons maintenant réaliser l’étape 2 qui consiste à coller le code d’intégration pour l’affichage donné par “tarteaucitron.io“, à la place de celui que nous avez donné Facebook.
Si vous vous rappelez, ce code pour l’affichage a été mis dans le fichier “layout-both-columns.tpl“.
Dans un premier temps, je vais me contenter de mettre le code donné par Facebook en commentaire. Et je vais donc coller le code donné par “tarteaucitron.io“ à la place.
Et notre fichier “layout-both-columns.tpl“ du thème enfant est celui-ci :
Désactivation du SDK JavaScript de Facebook
Il faut également penser à supprimer, ou mettre en commentaire dans un premier temps, le SDK JavaScript que nous avions mis en place tout de suite après l’ouverture de la balise <body> de notre page. Je le mets donc en commentaire pour l’instant.
Affichage du gestionnaire de cookies
Après avoir mis le code en place, actualisons notre page d’accueil, et voyons ce qui s’y passe.
Erreur… Rien de nouveau ne s’affiche ?
C’est parfois le cas lorsque l’on développe ! Les choses ne se passent pas comme elles devraient. Alors je ne vais pas vous laisser chercher, mais en faisant un débogage, je me suis rendu compte que mon script “tarteaucitron.js” ne se chargeait pas et que son adresse n’était pas la bonne !
Nous allons donc lors de l’appel du script, indiquer l’URL en entier comme ceci :
<script src="/AwPrestaTutosEnDirect_v811/themes/classic_child/tarteaucitron/tarteaucitron.js">
</script>
ATTENTION, bien entendu, vous remplacerez “AwPrestaTutos_v811” par le nom du dossier contenant votre boutique. Et éventuellement le nom du thème si vous n’avez pas le même que moi(“classic_child”).
Nouvel Essai : PrestaShop Gestionnaire de cookies
Nous allons de nouveau actualiser la page de notre boutique, pour voir si il y a un changement :
Eurêka !
Notre gestionnaire de cookies s’affiche maintenant correctement ! Nous avons réussi les amis, et ça, c’est quand même chouette non ?
Vous le voyez, avec les boutons de notre nouveau gestionnaire de cookies, nous avons 3 choix possibles :
- Tout accepter : plutôt que de parcourir la liste des services délivrant des cookies, un par un, on donne le choix à nos utilisateurs de tout accepter en une seule fois.
- Tout refuser : de la même manière, ils peuvent choisir de tout refuser.
- Personnaliser : ils peuvent aussi choisir d’accepter certains services et d’en refuser d’autres. Ils ont maintenant le choix et ça, c’est bien !
Remarquez également que tant que nous n’acceptons pas les cookies délivrés par Facebook, notre bouton J’aime ne s’affichera pas. À la place, il y a une alerte indiquant que le service Facebook est désactivé, et on met un bouton à disposition pour autoriser et donc activé le service.
Quelques astuces :
Lors du paramétrage de nos services, vous aurez peut-être besoin de réactualiser le gestionnaire. Nous pouvons afficher de nouveau le gestionnaire, lorsqu’il est masqué, en cliquant sur l’icône en forme de “tarte au citron” qui s’affiche en bas à droite de l’écran.
Si vous avez besoin de réinitialiser le gestionnaire, rendez-vous dans l’onglet “Appli“ des outils de navigateur, et dans la liste des cookies du service du nom de domaine, supprimer le cookie qui se nomme “tarteaucitron“. Vous faites un clic droit dessus, et ensuite, vous sélectionnez l’option “supprimer“. Réactualisez votre page, et le gestionnaire s’affiche de nouveau et est réinitialisé.
La vidéo YouTube s’affiche encore pour le moment !
Si vous avez suivi la série, et comme moi implémenté la vidéo YouTube dans votre pied de page, ou ailleurs, vous remarquez que celle-ci s’affiche encore.
Et c’est bien normal puisque nous n’avons pas lié le service YouTube à notre nouveau gestionnaire de cookies.
PrestaShop Gestionnaire de cookies : Bouton Personnaliser
Si à l’heure actuelle, je clique sur le bouton Personnaliser de mon gestionnaire de cookies, nous pouvons voir que seul le service Facebook apparaît.
Enfin, pas tout à fait ! Il y a aussi un message concernant les cookies obligatoires pour le bon fonctionnement du site. Mais à cet endroit, nos utilisateurs n’ont pas de choix possibles. Et pour rappel, la CNIL autorise cela.
Nous avons vu que le bouton J’aime est désactivé pour le moment.
Cliquez sur le bouton Autoriser pour le service Facebook, afin d’être sûr que le script fonctionne.
Dès le clic sur Autoriser, on aperçoit, de nouveau s’afficher le bouton J’aime.
Ajout du service YouTube
Vous l’aurez compris, afin que tous les services délivrant des cookies sur notre boutique s’affichent pour notre gestionnaire de cookies, il va falloir les configurer. Et cela se fera comme nous venons de le faire pour le service Facebook.
Faisons-le donc maintenant pour le service YouTube.
Copie du code d’intégration YouTube
Je retourne donc sur “tarteaucitron.io“ à l’étape 3 du guide d’installation, et cette fois, je tape YouTube dans la barre de recherche des services :
Après avoir cliquer sur le bouton “Installer”, cela nous donne 3 étapes :
- Coller le script : ici nous n’aurons besoin que du code qui est à l’intérieur du script puisque nos balises <script> sont déjà créées.
- Copier le code d’intégration de la vidéo à l’endroit où on veut l’afficher.
- Retirer le code que nous avions mis pour la vidéo YouTube.
Étape 1 : Code d’intégration JavaScript de YouTube
Premièrement, je copie le code JavaScript de la première étape, et je vais le coller dans mon script tarteaucitron qui se situe dans mon fichier “head.tpl” du thème enfant.
Je le place sous le code du service Facebook.
Étape 2 : Code d’affichage de la vidéo YouTube
Nous avons placé la vidéo YouTube dans le pied de page de notre boutique. Nous ouvrons donc le fichier “footer.tpl“ de notre thème enfant, et y ajoutons le code que nous avons copié sur “tarteaucitron.io”.
ATTENTION, ne supprimez pas tout de suite votre ancien code, car nous avons besoin de lui pour paramétrer le nouveau code donné par “tarteaucitron.io”.
Configuration du code de la vidéo
Lorsque nous récupérons le code de la vidéo YouTube sur tarteaucitron.io, il est semblable à celui-ci :
<div
class="youtube_player"
videoID="video_id"
width="width"
height="height"
theme="theme (dark | light)"
rel="rel (1 | 0)"
controls="controls (1 | 0)"
showinfo="showinfo (1 | 0)"
autoplay="autoplay (0 | 1)"
mute="mute (0 | 1)"
srcdoc="srcdoc"
loop="loop (0 | 1)"
loading="loading (0 | 1)"
data-start="start"
data-end="end"
>
</div>
Au minimum, il faudra renseigner les valeurs de :
- VideoID: celui-ci correspond à la fin de l’URL de l’ancien code. (situé après embed/)
- width : correspond à la width de l’ancien code (la largeur du lecteur vidéo)
- height : correspond à la height de l’ancien code (la hauteur du lecteur)
Ensuite, pour les autres paramètres, les choix possibles de paramétrage sont donnés entre parenthèses. Par exemple, on mettra :
<div
class="youtube_player"
videoID="b0DUZLbKnWg?si=Seo8qnVt_LpPLZ9J"
width="450"
height="250"
theme="dark"
rel="1"
controls="1"
showinfo="1"
autoplay="0"
mute="0"
srcdoc=""
loop="0"
loading="1"
data-start="start"
data-end="end"
>
</div>
Si vous souhaitez en savoir plus sur ces différents paramétrages, n’hésitez pas à aller faire un tour sur la documentation des développeurs de Google, et sur les paramètres du lecteur.
Affichage de la vidéo après l'ajout du service YouTube
Ceci étant, actualisons notre page et voyons comment cela s’affiche maintenant.
PrestaShop Gestionnaire de cookies : Personnaliser
Cliquons de nouveau sur le bouton Personnaliser afin de voir tous nos services.
Ensuite, cliquons sur le bouton “Autoriser” de YouTube. Dès l’exécution du clic, la vidéo s’affiche instantanément.
Parfait !
Nos utilisateurs ont maintenant le choix en ce qui concerne la délivrance des cookies sur leurs appareils.
Vous êtes maintenant en possession d’un gestionnaire de cookies sur votre boutique PrestaShop !
Vous avez franchi une première étape dans la mise en conformité avec le RGPD !
Félicitations à vous ! 👏🧑💻
Et Google Tag Manager dans tout ça ?
Vous le savez sans doute, mais lorsque nous faisons de l’analytiques, nous utilisons également les cookies.
C’est pourquoi, je n’oublie pas Google Tag Manager. Nous l’avons vu lors du premier item de cet épisode 4, Google Tag Manager est un gestionnaire de balises. Cela nous permet d’implémenter d’autres balises comme Google Analytics, Pixel Facebook et bien d’autres, directement depuis Google Tag Manager.
Il nous reste donc à configurer ce service dans notre nouveau gestionnaire de cookies.
Ajout du service Google Tag Manager à notre gestionnaire
Récupération du code pour implémenter le service
De retour à l’étape 3 du guide d’installation de “tarteaucitron.io”, je tape Google Tag Manager dans la barre de recherche des services.
Récupération du code JavaScript
Je copie le code donné par “tarteaucitron.io”, et je l’ajoute à la liste de mes services dans le script du gestionnaire de cookies, situé dans le fichier “head.tpl“ de mon thème enfant.
ATTENTION, avant de supprimer l’ancien code, je le mets en commentaire dans un premier temps. Je vais devoir récupérer l’ID de mon container GTM pour l’indiquer dans le nouveau code.
Après s’être assuré du fonctionnement du service, je pourrai ensuite supprimer l’ancien code d’intégration.
Astuce : code JavaScript plus simplifié
Nous venons de voir que la procédure d’intégration du code est toujours la même. Nous pouvons remarquer également que pour chaque nouveau service, nous ajoutons pour le JavaScript du code comme celui ci-dessous.
Pour nos 3 services, nous avons donc :
(tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
(tarteaucitron.job = tarteaucitron.job || []).push('facebook');
(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
Ce code JavaScript signifie que l’objet “tarteaucitron.job” est égal à l’objet “tarteaucitron.job” ou alors ( || ) un tableau vide ( [] ). Et nous poussons (envoyons) ensuite chaque service (.push(” “)) à l’intérieur de cet objet.
Code plus concis :
Nous pouvons simplifier le code en écrivant sur une seule ligne :
(tarteaucitron.job = tarteaucitron.job || []).push('gtag','facebook','youtube');
Maintenant à chaque nouveau service, vous ajoutez entre guillemets son libellé à cette liste après avoir ajouter une virgule.
Attention, il faut laisser la ligne ou l’identifiant de Google Tag Manager apparaît :
tarteaucitron.user.googletagmanagerId = 'GTM-XXXXXXXX'; // placer votre ID GTM à la place
PrestaShop Gestionnaire de cookies
Si nous actualisons maintenant notre page d’accueil, et notre gestionnaire de cookies, nous verrons apparaître le service Google Tag Manager dans notre nouveau gestionnaire de cookies.
Liste des cookies sur la boutique PrestaShop
Maintenant, que les services qui délivrent des cookies sont paramétrés dans notre gestionnaire de cookies, retournons voir dans nos outils de navigateur, la liste des cookies et services et faisons quelques tests :
Tout refuser
Lorsque je clique sur le bouton “Tout refuser” du gestionnaire de cookies, et que j’actualise la page, on peut voir que dans la liste des cookies, seul le service du nom de domaine apparaît :
Tout accepter :
À l’inverse, si je clique sur le bouton “Tout autoriser”, les services apparaissent de nouveau dans la liste :
D’autres tests
Vous pouvez bien entendu, faire d’autres tests, en autorisant ou refusant certains services, et vous verrez que cette liste est modifiée en conséquence.
Cookie nommé "tarteaucitron
Vous pouvez également remarquer que dans la liste des cookies délivrés par le service du nom de domaine (localhost lorsqu’on est sur le serveur local), nous avons un cookie nommé “tarteaucitron“. Les valeurs de ce cookie changent en fonction des services qu’il contient. Et la valeur de chaque service varie de false à true, suivant si le service est autorisé (true) ou non (false).
A vous de jouer !
Je vous l’ai dit, vous pouvez configurer de nombreux services dans votre nouveau gestionnaire de cookies.
Je ne vais pas faire d’autres exemples, je pense que vous comprenez comment ce script fonctionne.
A votre service
Toutefois, si votre rôle est chef d’entreprise et que vous n’êtes pas développeur, ou que vous n’avez pas de temps à consacrer à ce travail, vous pouvez faire appel à mes services sans problèmes pour que j’intègre ce gestionnaire sur votre site, et je saurai le personnaliser à votre image et selon votre charte graphique.
N’hésitez pas à faire appel à mes services, si besoin !
- Je développe des sites web sur mesure (sites E-commerce, sites Vitrine), en utilisant les langages et technologies les mieux adaptés selon votre entreprise et activité.
- Je mets en place et personnalise des boutiques PrestaShop, ou autres CMS (WooCommerce, Shopify, etc.).
- J’implémente pour vous les suivis analytiques et établit avec vous une stratégie marketing pour votre entreprise.
- Je développe et mets en place également des modules afin de personnaliser vos boutiques en ligne.
Parce qu'un commerçant doit vendre, et qu'un développeur doit coder, créons un partenariat gagnant-gagnant !
Pour aller plus loin
Pour aller plus loin, vous pouvez continuer à me suivre, et le prochain tutoriel sera consacré à la personnalisation et à la mise en style de ce gestionnaire.
Conclusion
Nous venons de voir comment mettre en place un gestionnaire de cookies permettant de laisser clairement le choix à nos utilisateurs d’accepter ou de refuser les différents cookies, et même de pouvoir modifier leur choix à tout moment.
J’espère que ce tutoriel pourra vous être utile.
Si c’est le cas, n’hésitez pas
- à me laisser vos commentaires pour me dire ce que vous en pensez.
- N’hésitez pas à vous inscrire sur activateurweb.com,
- à vous abonnez à ma page Facebook,
- ou à ma chaîne YouTube.
N’hésitez pas à faire tout cela à la fois et que cela m’encourage à continuer de produire de tels contenus.
Je vous remercie d’avoir suivi ce tutoriel et vous donne rendez-vous très rapidement sur Activateur Web.
En attendant, prenez soin de vous, et surtout restez curieux !
