Mettre un bandeau d’autorisation d’utiliser des cookies sur son site Internet (tuto)

Posté le 28/04/2015 dans la catégorie Tutoriels | 24 commentaires

Bandeau d'information sur les cookies sur les sites internet

Depuis l’année dernière la loi oblige les éditeurs de sites internet d’informer et de demander l’autorisation à ses visiteurs pour utiliser des cookies sur l’ensemble des pages de leur site internet. Cela peut paraître technique à mettre en place, heureusement certains services nous rendent la tâche facile, notamment Google qui propose un outil simple à utiliser pour mettre en place des messages d’alerte sous différentes formes. Voici dans ce tutoriel toutes les étapes pour afficher facilement un bandeau d’informations sur les cookies de manière élégante afin de mettre en conformité son site web au regard des lois sur la protection des données.

Petit rappel sur ce qu’est un cookie

Un cookie, qu’est-ce c’est ? A part le biscuit aux pépites de chocolat 😉 Il s’agit tout simplement d’un petit fichier que va déposer un site internet sur votre ordinateur pour y stocker des informations qui vous sont propres. Cela peut servir par exemple à analyser l’audience du site, cibler des publicités ou tout simplement mémoriser vos identifiant et mot de passe.

Il n’y a encore pas si longtemps, cela pouvait se faire de manière invisible pour le visiteur. Aujourd’hui, pour les cookies autres que ceux nécessaires au bon fonctionnement du site, il faut lui informer la finalité de leur usage, obtenir son consentement (validité de 13 mois maximum) ainsi que lui donner la possibilité de les refuser.

Les prérequis pour afficher une barre de notification sur les cookies sur son site web

Pour suivre ce didacticiel il vous faut :

  • un navigateur internet pour utiliser le service cookiechoices de Google
  • un éditeur de code HTML: logiciel ou CMS (WordPress)
  • et c’est tout 😉

1 – Récupérer le code javascript du service cookiechoices

/!\ Pour information, le script « cookiechoices.js » n’est plus disponible en téléchargement sur le site cookiechoices.org. Pour contourner ce problème, j’ai développé ce générateur de code cookiechoices.js.

  • Dans un premier temps, il vous faut ouvrir votre navigateur et vous rendre sur le site publié par Google Cookiechoices à l’adresse https://www.cookiechoices.org/

    Page principale du service Cookiechoices

    Site Cookiechoices.org

  • Cliquez sur « Outils » dans le menu ; cela vous fait descendre dans la page au niveau des explications des 2 méthodes proposées
  • Descendez encore un petit peu pour arriver aux 2 exemples de codes de base pour les sites web :
    • L’écran d’accueil : le message s’affiche alors comme une fenêtre en superposition de votre page
    • La barre de notification qui va se placer tout en haut de votre page
  • Choisissez le mode d’affichage souhaité ; vous pouvez tester chacun d’eux en cliquant sur le bouton « Voir un exemple » (en anglais). Personnellement j’ai choisi la barre de notification pour informer des cookies sur mon site et dans ce tutoriel car je trouve cette solution plus élégante et moins intrusive.
  • Cliquez sur le lien pour télécharger le script « Télécharger cookiechoices.zip » ; une fois le fichier téléchargé, il vous faudra le décompresser car celui-ci est au format .zip. Pour se faire, utiliser votre logiciel de décompression ; si vous n’en avez pas, je recommande PeaZip (lien sur Clubic).

2 – Transférer le fichier cookiechoices.js sur votre serveur web

Transfert FTP du script cookiechoices.org

Transfert du script via FTP

Une fois le fichier cookiechoices décompressé au format .js, il vous faut le placer à la racine de votre site internet. Pour cela lancez votre logiciel de transfert de fichiers (FTP). Pour ce faire, vous pouvez utiliser par exemple le logiciel gratuit Filezilla (voir tutoriel) :

  • Connectez-vous à votre serveur web
  • Sélectionnez le dossier racine de votre site web (en général le dossier « www »)
  • Parcourez votre ordinateur (site local dans la partie de gauche)
  • Sélectionnez votre fichier cookiechoices.js glissez-déposez le sur votre site distant (fenêtre de droite ouverte sur votre dossier « www »)

 

3 – Intégrer le code dans vos pages HTML pour faire afficher le bandeau d’informations sur les cookies

Maintenant, il ne vous reste plus qu’à mettre quelques lignes de code  sur vos pages HTML de votre site internet :

  • Toujours sur la page du site cookiechoices.org, copiez le code HTML affiché sur fond noir commençant par « <script », comme dans l’exemple pour la barre de notification :
    Téléchargement et édition du script cookiechoices.org

    Etapes sur le site cookiechoices.org

     <script src="/cookiechoices.js"></script><script>document.addEventListener 
    ('DOMContentLoaded', function(event) { cookieChoices.showCookieConsentBar 
    ('Your message for visitors here',
    'close message', 'learn more', 'http://example.com'); });</script>
  • Collez ce code dans un éditeur type bloc-notes pour procéder à quelques ajustements :
    • Remplacez « Your message for visitors here » par le texte informant de l’utilisation des cookies sur votre site web ainsi que leur usage ; par exemple « Ce site utilise des cookies pour vous offrir le meilleur service. En poursuivant votre navigation, vous acceptez l’utilisation des cookies. »
    • Remplacer « close message » par le libellé que vous souhaitez mettre pour le bouton comme « Fermer », « J’accepte » ou « Je suis d’accord »
    • Remplacez « learn more » par le libellé du lien qui pointera vers la page des mentions légales sur les cookies. « En savoir plus » tout simplement par exemple.
    • Remplacez « http://example.com» par l’adresse de votre page sur laquelle sont renseignées les informations légales de votre site web, notamment celles sur les cookies (si ce n’est pas le cas, consultez cet article pour connaître les mentions légales à mettre sur un site internet professionnel)
    • Faites attention si vous utilisez des apostrophes dans ces différentes phrases, vous devrez mettre un antislash « \ » pour que le script fonctionne. Comme je suis sympa 😉 voici le code pré-saisi avec les phrases du tuto, il ne vous reste plus qu’à changer l’adresse de votre page de vos mentions légales ! :
      <script src="/cookiechoices.js"></script><script>document.addEventListener 
      ('DOMContentLoaded', function(event) { cookieChoices.showCookieConsentBar 
      ('Ce site utilise des cookies pour vous offrir le meilleur service. En 
      poursuivant votre navigation, vous acceptez l\’utilisation des cookies.',
      'J\’accepte', 'En savoir plus', 'http://www.votre-site.com/page-mentions- 
      legales/'); });</script>

    Code HTML cookiechoices dans l'éditeur WordPress

    Edition du code HTML

  • Copiez le code ainsi modifié (entre « <script …» et « </script> »)
  • Parcourez le code HTML de vos pages web jusqu’en bas pour coller le code avant la balise « </body>. Si vous utilisez un CMS comme WordPress, collez le code dans le fichier de pied de page (footer.php) pour appliquer le bandeau d’informations sur les cookies sur l’ensemble de vos pages d’un seul coup !
  • Enregistrez votre fichier pour sauvegarder les modifications

Astuces pour modifier l’emplacement et la couleur du bandeau Cookiechoices

Pour ceux qui souhaiteraient personnaliser quelque peu cette barre de notification des cookies, en modifiant quelques lignes de code du script cookiechoices.js, vous allez pouvoir lui donner du style ! Tout ce passe aux lignes 34 et 35 du fichier :

  • Modifier « top:0 » par « bottom:0 » pour placer la barre de notification en bas plutôt qu’en haut
  • Modifier « #eee » par le code hexadécimal souhaité pour changer la couleur du bandeau (voir le nuancier pour vous guider)
  • Après pour ceux qui maîtrisent les styles CSS, vous faites ce que vous voulez…

Exemple d’intégration d’une barre de notification des cookies dans une page web

Quoi de mieux qu’un exemple concret ! Voici normalement, la barre qui notifie l’utilisation de cookies en bas de cette page. Si vous aviez appuyé sur le bouton « J’accepte » celle-ci est masquée, pour l’afficher à nouveau, videz les cookies de votre navigateur et rafraîchissez la page.

Voilà vous avez tous les éléments pour afficher un bandeau de notifications de l’utilisation des cookies sur l’ensemble des pages de votre site web. Grâce à ce simple tutoriel et le code Cookiechoices.org, c’est à vous de jouer maintenant  pour rendre votre site internet conforme aux législations européennes. Si besoin, postez vos questions ou commentaires ci-dessous pour obtenir de l’aide.

24 commentaires

  1. T.Boon
    27 juillet, 2015

    Bonjour
    Je trouve votre tuto très bien fait.
    Mais la page Cookiechoices.org n’a pas la même apparence que sur votre image, le bouton outil n’apparaît plus et le lien pour télécharger le fichier est introuvable.
    Merci d’avance
    T.Boon

    Répondre
  2. Wolf18
    28 juillet, 2015

    Merci pour ce tuto c’est impeccable ! Je verrai si je trouve quelque chose de plus esthétique graphiquement un peu plus tard, la j’étais pressé de me mettre en conformité.
    Ps: quelle connerie cette norme soit dit en passant…

    Répondre
    • Sébastien
      28 juillet, 2015

      Ravi que le tuto ait pu vous servir. Pour la norme on est contraint de le faire même si effectivement cela ne change pas grand chose…

      Répondre
  3. Jean
    3 août, 2015

    Bonjour,

    Oui, merci pour cet article 😉
    J’ai testé en suivant la procédure sur de simples pages HTML hébergées directement sur Google Drive … et ça marche parfaitement bien !
    Le lien : https://goo.gl/zxW82o
    Bonne continuation
    Cordialement,

    Répondre
  4. Christophe Poizat
    19 septembre, 2015

    Bonjour, quelqu’un sait-il comment s’y prendre pour afficher le bandeau d’autorisation des cookies de cookiechoices.org sur un site géré par Wix.com ? Merci d’avance…

    Répondre
  5. Rico
    11 avril, 2016

    Bonjour Sebastien!
    Tout d’abord, merci pour ton aide concernant l’installation de ce bandeau, j’ai trouve ta page vraiment utile. Cependant, je suis un novice du coding (et encore je suis gentil avec moi-meme!), et j’utilise Shopify pour mon website.
    J’aimerai donc savoir:
    1) Ou dois-je placer le fichier « cookiechoice.js » sur Shopify? (je ne trouve pas le fichier racine…)
    2) Sur quelle partie dois-je coller le code HTML ?

    Un grand merci d’avance pour ton aide!

    Rico

    Répondre
  6. Laure
    11 mai, 2016

    ça fonctionne ! merci à vous !

    Répondre
  7. Blogger
    8 juin, 2016

    Bonjour, j’aimerais savoir si c’est normal que le bandeau de cookie ne s’affiche pas sous internet explorer 7 et 8.
    J’ai un message du type « Cet objet ne gère pas cette propriété ou cette méthode. Ligne : 978 Caractère : 3 Code : 0 »
    (cela correspond au script du bandeau de cookie généré automatiquement par Google, je suis sous blogger)
    Comment remédier à cette erreur si cela est possible ?

    A partir de la version 9 d’IE, pas de soucis d’intégration constaté.
    Bien cordialement.

    Répondre
    • Sébastien
      20 juin, 2016

      Bonjour, avez-vous l’url du site en question pour en savoir plus et tenter de vous aider ?

      Répondre
  8. Philippe Vincent
    11 juin, 2016

    Merci beaucoup, ça fonctionne parfaitement !

    Répondre
  9. Neyra
    14 juillet, 2016

    Bonjour,
    J’ai suivi les différentes étapes indiquées, mais le bandeau ne s’affiche pas. Peut-être y a-t-il des spécificités avec Joomla ? Le fichier .js est à la racine du site et le script dans le fichier index.php de mon template. Je pense avoir fait une erreur sur l’emplacement du fichier, mais je ne trouve pas laquelle malgré en avoir expérimenté plusieurs. Je suis preneuse si vous avez une idée 😉

    Répondre
    • Sébastien
      16 juillet, 2016

      Bonjour Neyra, je viens de consulter votre site et le bandeau s’est bien affiché tant que je n’avais pas cliqué sur OK. Peut-être avez-vous résolu le problème entre temps ? Bien à vous.

      Répondre
  10. Marie-Victorine
    20 décembre, 2016

    Bonjour,

    Je tiens à vous remercier de ce tutoriel gratuit. J’ai eu quelques difficultés à faire afficher le petit bandeau mais l’erreur résidait sur l’emplacement du script ..il fallait le copier avant le. Je n’ai pas fait attention. Merci pour tout

    Répondre
    • Sébastien
      20 décembre, 2016

      Bonjour Marie-Victorine, je vous remercie pour votre retour. Il semble que votre message ne soit pas passé dans son intégralité. En tout cas bravo 😉 A bientôt sur le blog.

      Répondre
  11. Alexis
    21 décembre, 2016

    Un grand merci pour vote travail.
    Je ne suis pas un pro du javascript et cette bannière me faisait galérer !!! J’en avais essayé une autre (Cookie EU banner) qui était très bien mais impossible de supprimer la bannière des pages même après avoir accepter les cookie.

    Merci pour tout

    Répondre
    • Sébastien
      21 décembre, 2016

      Merci Alexis de votre retour. Ravi d’avoir pu vous être utile 😉

      Répondre

Laisser un commentaire