Chez Kozman nous aimons faire en sorte que nos clients comprennent ce que nous faisons lorsque nous créons un site internet. Parmi les obligations légales en France et en Europe figurent le consentement de l’utilisateur pour l’utilisation de cookies. Mais alors, que sont les « cookies » utilisés par la plupart des sites internet ? Pourquoi devons-nous prévenir l’utilisateur de leur utilisation ? Comment s’y prendre seul, avec son site WordPress (fonctionne aussi pour les autres sites si vous connaissez un tout petit peu l’ajout d’un script en JS à votre « footer », soit le pied de page) pour avoir une interface facile, fiable et efficace pour le recueil de consentement et donner le choix aux utilisateurs ? Rapide tutoriel avec des explications simples pour y arriver !
Cookies et RGPD sur un site internet
Des cookies sur un site internet : mais à quoi ça sert ?
Les cookies ne sont pas seulement de délicieux gâteaux, sur le web ce sont également de petits fichiers avec une utilité peu connues : enregistrer sur l’ordinateur de l’internaute ses préférences lors de sa visite sur votre site. Ils sont nécessaire pour connaître les préférences, enregistrer la visite d’un internaute sur votre site internet et permettre de ce fait le suivi (publicitaire, ses connexions notamment).
Ces petits fichiers textes sont automatiquement enregistrés par le navigateur internet pour se rappeler d’un internaute, et jusque là, à son insu. La réglementation Française et Européenne permettent aux utilisateurs de savoir ce qu’il est déposé sur son ordinateur, le type de données collectés et ce qu’il en est fait. Tout cela pour protéger les données personnelles. Si vous avez suivi nos formations ou avez déjà créé un site internet avec nos services, vous en savez quelque chose ! Sinon, vous êtes au bon endroit pour en connaître les grandes lignes et comment se conformer à la réglementation européenne RGPD.
On vous en dit plus sur la réglementation RGPD juste après. Pour des informations plus complètes, la meilleure source en France reste le site de la CNILCNIL.
La réglementation RGPD : qu’est-ce que c’est ?
RGPD veut dire Réglementation Générale sur la Protection des Données. C’est un texte adopté par le Parlement Européen le 14 avril 2016 qui vient renforcer la protection des données des internautes. Cette réglementation s’applique aux sites internet, aux applications et à toute sorte d’utilisation de services sur le web nécessitant le traitement de données , le suivi et l’utilisation.
Jusque là en France, c’était une déclaration auprès de la CNIL qui était nécessaire. Cela prenait la forme d’un enregistrement auprès de la CNIL que l’on devait mentionner sur nos services web. Cela comprenait les mails par exemple : vous avez probablement reçu des e-mails de société vous demandant de confirmer votre inscription à des newsletter. A cheval sur les données utilisées, nous avions déjà mis en place pour nos clients des validations en double opt-in (vous confirmez deux fois que vous souhaitez recevoir une newsletter). La mise en place du RGPD n’était alors qu’une simple procédure !
Plutôt que d’exposer entièrement les obligations et les sanctions, il est plus simple de vous renvoyer vers cette page de la CNILcette page de la CNIL. La consulter est primordiale si vous évoluer sur le web et souhaitez rester en conformité avec la réglementation en vigueur.
Se conformer à la réglementation RGPD : comment faire ?
Dans le cas où vous avez fait créer votre site par un professionnel le plus simple reste de vous rapprocher de lui. Sinon vous pouvez toujours faire appel à nos services ! Enfin, si vous préférez comprendre et le faire vous-même, nous vous proposons un petit tutoriel adapté aux sites sous WordPress (le CMS) avec deux choix : utiliser les services Tarte au citron 🍋 ou les services d’Axeptio.
Vous rendre directement à la partie qui vous intéresse :
- Tarte au citron : cliquer ici
- Axeptio : cliquer ici
Option 1 : Tarte au citron
Tarte au citron est de loin un des services le plus simple à mettre en place lorsque vous gérez un site internet. Son utilisation implique de créer un compte à cette adresse : https://tarteaucitron.io/fr/pro/ et de renseigner les informations de base. Ce service est gratuit dans la limite d’utilisation des options simples : une centaine de services prises en charge et le respect des réglementations RGPD. L’option payante permet de garder l’intégration toujours à jour selon vos services présents sur le site ainsi que la personnalisation de l’interface (couleurs, textes etc.).
Après vous être inscrit.e. et une fois connecté.e avec vos identifiants, rendez-vous dans la partie du site « Mes sites » puis cliquez sur le bouton « Ajouter un site » et renseigner l’URL de votre site internet. Prenez soin de l’écrire correctement. Par exemple https://www.kozman.fr si je souhaite configurer le service pour le site Kozman. Étant votre premier site internet, vous pouvez ignorer l’option « cloner les paramètres » qui peut vous être utile si vous gérez plusieurs sites ou blogs avec les mêmes caractéristiques.
Normalement vous arriverez sur cette page. Elle vous permet en un rapide coup d’œil de consulter la liste des sites référencés sur vote compte, configurer les installations et ajouter le service Tarte au citron sur votre site internet.
Avant de passer à l’installation de votre site, peaufinons votre service pour qu’il soit conforme et personnalisé un minimum. Sur la page où sont listés vos sites internet, cliquez sur « options », puis ajouter les éléments pertinents ou modifiez les textes selon votre convenance. Attention là nous vous recommandons très fortement d’avoir une page « Mentions légales » et « Politique de confidentialité » sur votre site internet. Si vous les connaissez : renseignez donc l’adresse de la page de politique de confidentialité. Cette page sert notamment à informer l’utilisateur (l’internaute) de ce que vous faites de ses données et comment vous vous engagez à les protéger.
Vous pouvez notamment configurer les boutons qui apparaissent, les liens de redirection et si vous vous y connaissez bien, le design via un fichier css spécial qui changera la mise en forme du service Tarte au Citron sur votre site internet. Une fois cette étape complète et correspondant à vos besoins, rendez-vous à l’étape d’intégration sur votre site internet.
Attention à bien cliquer sur le bouton « Mettre à jour » en haut à droite de la page pour enregistrer vos modifications. Puis le bouton retour pour revenir à la page de configuration de vos sites internet.
Intégration sur votre site internet
Passons à l’intégration sur votre site internet. Une étape un peu plus technique mais rapide et plutôt facile !
De retour sur la page des sites internet, en bas à gauche de la ligne indiquant votre nom de domaine, cliquez sur le bouton « Installer ». La page suivante vous propose deux options :
- Tous les sites : pour une utilisation sur n’importe quel type de site internet. A utiliser si vous êtes à l’aise avec l’ajout de lignes de codes sur votre site internet
- WordPress : dans le cas où votre site utilise WordPress comme CMS pour fonctionner. Si vous ne savez pas quoi choisir, il est préférable de vous rapprocher de la personne qui a créé le site internet
Ici nous partirons du principe que votre site tourne sous WordPress. En cliquant vous êtes redirigé.e sur la page du plugin. Au choix :
- Vous téléchargez le fichier ZIP sur votre appareil et savez l’intégrer en sur votre site manuellement (en passant par le FTP – si vous ne savez pas de quoi il s’agit ne le faite pas) – OU vous vous connectez à l’administration de votre site (si installation courante : https://Monsite.fr/wp-admin – remplacez mon site par l’adresse de votre site internet) puis upload es le fichier dans le menu « Extensions » puis « Ajouter un plugin »
- Vous utilisez directement l’interface de l’administration de WordPress pour l’installer. C’est le cas que nous couvrirons ici
Connectez-vous à votre interface WordPress (wp-admin) puis rendez-vous dans « Extensions » via la colonne de gauche.
Une fois sur la page des extensions, en haut de celle-ci se trouve le bouton « Ajouter ». Cliquez pour atterrir sur la page ci-après.
Puis cliquez sur dans la barre de recherche en haut à droite et renseigner «tarteaucitron.js ». La page se charge et fait apparaître un certains nombre d’extensions (2 lors de la publication de cet article). Celui que vous intéresse est celui qui correspond au nom copié-collé et arborant le logo présent sur le site de Tarte au Citron. Cliquez sur « Installer maintenant », cela va installer le plugin. Au bout de quelques secondes le bouton devient « Activer ». Cliquez une nouvelle fois pour lancer le plugin !
La page se charge de nouveau et vous ramène à la liste des extensions présents sur votre site. Rendez-vous ensuite dans la colonne de gauche : passez votre souris sur « Réglages » puis cliquez sur tarteaucitron. Vous verrez une page vous invitant à vous connecter en renseignant ID et Token (que vous trouverez en suivant le lien « View m’y account » en haut de la page).
En cliquant cela vous ouvre une fenêtre qui vous montre l’administration de tarte au citron, de nouveau sur ce site il suffit de cliquer sur « Mon compte » et de copier-coller les infos ID et Token dans votre administration WordPress.
Enfin, une ultime page se charge une fois que vous êtes identifier sur votre administration WordPress, et que vous avez choisit votre site dans la liste déroulante proposée. (Si vous n’avez pas cette étape, ce n’est pas grave, c’est que vous n’avez qu’un site dans votre compte Tarte au Citron).
Ici vous cliquez sur les services qui suivent les internautes sur votre site par exemple Google Analytics (Gtag) ou Facebook avec le pixel Facebook.
Il ne vous reste qu’à renseigner les infos demandées (le numéro de suivi Google par exemple, présent dans votre interface Google Analytics) et à cliquer sur « Activer » à chaque ajout d’un code ou d’un service.
Vous y êtes ! Vous avez installez l’extension Tarte au citron et configuré les bases pour être en règle avec la RGPD. Attention à bien renseigner les différents services pour rester dans le cadre légal.
Pour voir les modifications, vous pouvez recharger votre site sur un autre ordinateur, ou ouvrir une fenêtre de navigation privée pour voir le bandeau surgir au chargement du site !
Option 2 : Axeptio
Axeptio c’est une solution plus esthétique que le choix précédent. Un peu plus technique à mettre en place, il affiche de grandes références (Flunch, Carrefour, Engie, Cuisinella…). On y va pour la mise en place de ce service (que vous pouvez voir fonctionner sur le site Kozman au moment ou ses lignes sont écrites).
Dans un premier temps, se rendre sur le site https://www.axeptio.eu/fr/home et créer un compte gratuitement en cliquant sur « Tester gratuitement » en haut à droite de l’écran. La procédure est assez simple et sommaire, les infos demandées : adresse mail, nom d’affichage, mot de passe et pays de résidence. (1ère image de la galerie).
Après validation de formulaire vous arrivez directement sur le tableau de bord vide, avec un bouton « Créer un nouveau projet » (2ème image dans la galerie).
A cette étape (3ème image dans la galerie), il faut remplir toutes les infos demandées :
- L’adresse internet du site sur lequel devra fonctionner le bandeau des cookies
- Le nom de votre projet (nous utilisons le nom du client ou du site internet par exemple)
- Si le projet appartient à une organisation. Vous pouvez ignorer cette étape, elle s’adresse aux comptes avec une organisation définie – Dans votre cas le projet sera « indépendant » (pas d’incidence sur la suite)
Maintenant nous passons à la configuration du contenu du pop-up des cookies : c’est à partir de cette interface que vous pourrez configurer le texte, les images et autres (si vous souhaitez aller plus loin dans la personnalisation). On commence : 2ème bloc en haut à droite de la page intitulé « Écran de bienvenue ».
Ici vous pouvez (image 1 de la galerie) :
- Modifier le texte de l’écran de bienvenue (c’est ce qui apparaitra lorsque vos visiteurs entreront sur votre site). Le texte est personnalisable, une qui peut avoir son importance pour rendre l’expérience utilisateur plus sympathique (ou pour amener de la pédagogie et faire accepter les cookies aux visiteurs)
- Modifier le style des boutons pour accepter et refuser (choisir de laisser accepter en évidence ou même style que les autres)
- Changer l’illustration qui accompagne le bandeau
- Renseigner le lien vers la politique de confidentialité (ce que nous conseillons vivement)
Enfin, en défilant tout en bas de cette page un dernier bouton vous attend « Modifier les textes de cette étape » (à ne pas confondre avec le bouton bleu « Enregistrer ») : une fenêtre pour personnaliser le ton employé dans les phrases et sur les boutons d’action, et la possibilité de modifier bouton par bouton, phrase par phrase du processus comme vous le souhaitez (image 2 de la galerie).
Une fois ces étapes complétées, vous pouvez cliquer sur le bouton « Enregistrer et quitter » jusqu’à revenir sur la page « Étapes » (image suivante).
Maintenant nous passons à la configuration du contenu du pop-up des cookies : c’est à partir de cette interface que vous pourrez configurer le texte, les images et autres (si vous souhaitez aller plus loin dans la personnalisation). On commence : 2ème bloc en haut à droite de la page intitulé « Écran de bienvenue ».
Ici vous pouvez (image 1 de la galerie) :
- Modifier le texte de l’écran de bienvenue (c’est ce qui apparaitra lorsque vos visiteurs entreront sur votre site). Le texte est personnalisable, une qui peut avoir son importance pour rendre l’expérience utilisateur plus sympathique (ou pour amener de la pédagogie et faire accepter les cookies aux visiteurs)
- Modifier le style des boutons pour accepter et refuser (choisir de laisser accepter en évidence ou même style que les autres)
- Changer l’illustration qui accompagne le bandeau
- Renseigner le lien vers la politique de confidentialité (ce que nous conseillons vivement)
Enfin, en défilant tout en bas de cette page un dernier bouton vous attend « Modifier les textes de cette étape » (à ne pas confondre avec le bouton bleu « Enregistrer ») : une fenêtre pour personnaliser le ton employé dans les phrases et sur les boutons d’action, et la possibilité de modifier bouton par bouton, phrase par phrase du processus comme vous le souhaitez (image 2 de la galerie).
Une fois ces étapes complétées, vous pouvez cliquer sur le bouton « Enregistrer et quitter » jusqu’à revenir sur la page « Étapes » (image suivante).
Étape suivante : le bouton « On vous présente nos cookies! ». C’est ici que vous configurerez les services utilisant des cookies et présents sur votre site (image 1). Ici nous nous arrêterons sur Facebook (image 2) et Google Analytics (image 3) (vous pouvez en ajouter d’autres à cette étape, à vous de déterminer vos besoins).
Cette étape permet simplement, en cliquant sur le nom du service, de nommer, décrire et renvoyer vers la/les pages pertinentes de ces services. C’est le moment notamment d’expliquer pour ce service collecte des informations (le moment d’être pédagogue ?).
Enfin, cliquer sur « Enregistrer et quitter » pour revenir sur l’écran des « Étapes ». Ici vous pouvez au choix : changer les textes de toutes les fenêtres (les modifier, les personnalisées) ou passer à l’intégration sur votre site.
Intégration sur votre site internet
On y est, le bandeau est paramétré et prêt à être diffusé.
On va commencer à l’intégrer à votre site internet (ici nous partons sur l’hypothèse d’un WordPress). Tout en bas de la fenêtre « Étapes » (celle ou vous accédez à toutes les options depuis le début), en scrollant, dans la section « Configuration avancée » vous trouverez le bouton « Intégration des cookies sur votre site ». La partie technique commence.
Image 1(de la galerie) :
- Cliquer sur Intégration des cookies sur votre site
Image 2 :
- Copier le code affichée dans la fenêtre sur fond noir. Rendez-vous dans votre administration WordPress, placer votre souris sur « Apparence » puis dans le sous menu sélectionner « Widget ». Ici, repéré le footer (de préférence, le placer ailleurs peut fonctionner).
- Ajouter un widget « HTML personnalisé » (dans la dernière version de WordPress, vous pouvez rechercher le Widget en haut à gauche, en cliquant sur le + pour faire apparaitre la colonne, puis dans le champs recherche qui se situera tout en haut du menu qui vient d’apparaitre).
- La destination du Widget doit être « Footer » ou « Pied de page ». Tout autre endroit fonctionne normalement, cette procédure permet de ne charger le script qu’après le reste de la page.
- Il est temps de coller le code que vous aviez copié sur le site de Apexio, dans l’espace HTML que vous venez de créer. Puis cliquez sur « Sauvegarder ».
Sinon, si vous ne trouvez pas comment coller ce code dans le footer (pied de page) de votre site, voici la solution alternative.
L’étape suivante consiste à mettre en place le dernier morceau de code, pour se faire nous avons choisit d’ajouter un plugin à WordPress : cliquez ici pour le télécharger ou utilisez le plugin officiel de Axeptio (nous ne l’avons pas essayé).
Une fois le plugin installé et activé, dans la colonne de gauche de l’administration vous trouverez le menu « CSS et JS personnalisés » :
- Un clic sur « Ajouter du code JS
- Choisissez un titre (le nommer explicitement, pour vous y retrouvez si vous ajoutez d’autres codes dans le futur)
- Coller le code que vous aurez sur votre écran dans Axeptio
- Sauvegarder puis quitter
C’est fait ! Vous devriez voir votre pop up cookies s’afficher lors d’une 1ère visite sur le site !
Il ne reste plus qu’à dire à Axeptio que tout est en ordre et qu’on peut faire apparaitre notre bandeau sur notre site : en haut à droite de la fenêtre Axeptio (lorsque vous êtes à la page « Étapes ») il y a un bouton « Publier ». Après avoir cliqué dessus des petits messages s’affichent le temps que le site travail…
Le tour est joué, vous devriez voir le pop up avec les cookies s’afficher sur votre site dès la 1ère visite !
Et si nous nous en occupions pour vous ?
Il n’est pas facile d’être au four et au moulin : de gérer son activité et de faire de la technique. Ces quelques étapes, nous pouvons nous en occuper pour vous ! Pour en savoir plus, il suffit de prendre contact avec nous, qui sait, cela pourrait être une belle rencontre ? Cliquez ici pour nous contacter.
