TutorielsBandeau d’information cookies dans WebAcappella Responsive

Le monde du web est de plus en plus encadré par la loi. Bon nombre de règles doivent être respectées pour que votre présence sur internet soit pérenne. Il est entre autre important d’intégrer un bandeau d’information cookies sur votre site, afin de prévenir vos visiteurs. Mais reprenons depuis le début.

Tout d’abord, que dit la loi exactement à ce sujet ?

 

“En modifiant l’article 5(3) de la directive 2002/58/CE par l’adoption de la directive 2009/136/CE, le législateur européen a posé le principe :

  • d’un consentement préalable de l’utilisateur avant le stockage d’informations sur l’équipement d’un utilisateur ou l’accès à des informations déjà stockées.
  • sauf, si ces actions sont strictement nécessaires pour la délivrance d’un service de la société de l’information expressément demandé par l’abonné ou l’utilisateur.

L’article 32-II de la loi du 6 janvier 1978, modifié par l’ordonnance n°2011-1012 du 24 août 2011 qui a transposé la directive 2009/136/CE reprend ce principe.
En application de la loi informatique et libertés, les traceurs (cookies ou autres) nécessitant un recueil du consentement ne peuvent donc être déposés ou lus sur son terminal, tant que la personne n’a pas donné son consentement.
Les éditeurs ont donc l’obligation de solliciter au préalable le consentement des utilisateurs. Ce consentement est valable 13 mois maximum. Certains traceurs sont cependant dispensés du recueil de ce consentement.”

 

Voilà, encore un magnifique texte de loi pondu à la va-vite. Par des gens qui n’ont pas la moindre idée de ce dont ils parlent, mais qui doivent bien justifier leur salaire d’une façon ou d’une autre.
“Ce consentement est valable 13 mois maximum.” Donc pour pouvoir appliquer correctement ce point, il faut tracer les visiteurs. On est d’accord que sans un tracking, impossible de savoir depuis combien de temps le visiteur a donné son consentement. Du coup on a d’un coté, un texte de loi qui nous dit que traquer c’est mal et qu’il faut en informer les visiteurs. Et d’un autre coté, ce même texte de loi qui nous dit de traquer les visiteurs !

La quasi totalité des gens ne savent pas ce qu’est réellement un cookie. Quand on pose la question, on a généralement le droit à ce genre de réponse :

  • Je ne sais pas et je m’en fous complètement
  • Ha oui, les cookies c’est des virus ?
  • C’est dégueulasse il faudrait interdire les cookies !
  • Pas grave, je n’ai rien à me reprocher

Je crois que ceux qui me font le plus rigoler sont ceux qui disent que les cookies c’est mal (sans vraiment savoir ce que c’est) . Et qui passent la journée sur Facebook. Non mais sérieusement ?! Chez Facebook c’est pas des cookies, c’est tout le rayon gâteaux et biscuits secs que tu te prends dans la tronche Régis !!!

BREF ! C’était le moment coup de gueule. Vous l’aurez compris, je pense que ce type de règlementation ne sert personne. Ni les éditeurs de site, ni les internautes qui doivent encore cliquer sur un énième interstitiel avant d’accéder au contenu de la page.

 

Passons maintenant à la partie qui vous intéresse. Et comme je viens de vous pourrir la vie avec une intro beaucoup trop longue, vous n’aurez pas 1, mais 2 tutos pour Intégrer un bandeau d’information cookies dans WebAcappella Responsive !

 

Technique n°1

Rendez vous sur ce site et remplissez les informations voulues : toutlemondemeritesonsite.com

Ce bandeau permet d’afficher un bouton “j’accepte” et un bouton “en savoir plus”

Bandeau d’information cookies dans WebAcappella Responsive

  • Commencez par choisir si vous souhaitez votre bandeau en haut ou en bas. Puis sélectionnez une durée avant que le bandeau réapparaisse. Je vous conseille de choisir “1 jour”
  • Sélectionnez ensuite vos couleurs de texte et de bandeau. Vous pouvez également modifier le texte par défaut ou le laisser.
  • Enfin renseignez l’url de votre site et celle de votre page de mentions légales, puis validez.

Lorsque vous aurez validé, le site vous proposera de télécharger un petit script. C’est celui-ci : cookiechoices.js
Il vous faudra donc déposer ce script sur votre serveur à l’aide de votre client FTP préféré. Puis copiez coller le code html fourni et le placer dans le code html des paramètres du site.

 

Technique n°2

Beaucoup plus simple mais ne propose qu’un bouton “en savoir plus”. Pour fermer le bandeau il faut cliquer sur une petite croix.

Vous n’avez rien d’autre à faire qu’à copier ce code et le placer dans le code html des paramètres du site.

<script type="text/javascript" id="cookiebanner" src="https://cdnjs.cloudflare.com/ajax/libs/cookie-banner/1.0.0/cookiebanner.min.js" data-position="top" data-fg="#ffffff" data-bg="#3c546b" data-link="#99011e" data-moreinfo="http://www.votresite.fr/mentions-legales" data-message="Les cookies assurent le bon fonctionnement de notre site Internet. En utilisant ce dernier, vous acceptez leur utilisation." data-linkmsg="En savoir plus"></script>

Pour le personnaliser :

  • data-position : top ou bottom pour placer le bandeau en haut ou en bas
  • data-fg : la couleur du texte
  • data-bg : la couleur du bandeau
  • data-link : la couleur du lien
  • data-moreinfo : remplacer l’url par celle de vos mentions légales
  • data-message : le texte qui apparait sur le bandeau
  • data-linkmsg : le texte du lien cliquable

Une fois personnalisé, placez ce code dans la section HTML des paramètres du site.

Voila c’est fini, vous savez enfin comment Intégrer un bandeau d’information cookies dans WebAcappella Responsive !

Bisous les neveux 😉

25 commentaires

  1. bonjour,
    justement, j’étais dessus pour mon nouveau site : gsmotard.fr
    mais ça ne marche pas… j’ai essayé la solution 2
    QQ peut-il zieuter sur mon code source pour me dire ce qui ne va pas ?
    Merci,

      • Bonsoir Tonton,
        Oui, oui, c’est bien là que je le mets mlais rien ne se passe. est-ce que le fait que le script cohabite avec celui d egoogle analytics peut -il avoir une influence ? Autre point, sur votre propre site, je ne l’ai pas votre bandeau, serait-ce un début de piste pour vous.
        Pascal, Neveu du Lot et Garonne

  2. Bonjour
    Très bien, ça faisait quelques mois que j’avais demandé ça.
    Pour moi la mise en place de la première solution fonctionne très bien.
    Merci beaucoup pour votre aide une fois de plus très utile.
    J’espère par contre que ce js ne bloque pas le https côté hébergement comme certaines js comme “modernizr.js” sur vos “templates”. Faire attention à cela,svp.
    Cordialement
    Jean Luc Ernoult

  3. Bonjour,

    merci pour ce bandeau, la première technique fonctionne parfaitement, la seconde faisant référence à un site en http ne fonctionne pas avec mon site en https, sécurité du certificat SSL ?

  4. Bonjour les tontons!
    Tout d’abord merci pour votre humour dans ce monde de brutes!

    idem! même problème avec un site en https quand je publie le site , seul apparait le pied de page :((.
    Vous parlez d’un autre code mais il n’apparait pas dans votre réponse.
    Merci

  5. salut tonton , j’ai utilisé la solution 2
    mais le lien de pointage n’est pas pris en compte, (j’ai insérer celui de la cil) mais il reste toujours figer sur un autre site
    et mon bouton en savoir plus est en anglais je ne sais pas d’ou cela vient

  6. Bonjour à vous,
    Moi j’ai essayé les 2 méthodes, et aucune ne fonctionne avec un site en https. Aucun bandeau n’apparait.
    Script placé dans wa_js et même essayé de le placer à la racine. Le code html copié dans les paramètres du site dans la rubique “html personnalisé” et rien à faire.
    Si vous avez des pistes je suis preneur.
    Merci

  7. Je dois être bête mais je n’y arrive pas. Le bandeau de mon site créé avec Web Accappella sur 1&1 n’apparaît pas. Ai je commis une erreur ? Besoin de vos lumières !!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Poster commentaire