Bonsoir, bonjour, bonne après-midi.
Qui suis-je et dans quelle étagère ?
Je suis Alex-D, aussi appelé Alexandre Demode dans la vraie vie. Vous m’avez certainement déjà croisé ici et par le passé sur le Site du Zéro. J’ai également un petit peu d’activité sur Grafikart.fr.
Mais aussi, je crée/participe parfois à des petits/moyens/gros projets open source, parce que j’aime bien partager. J’ai notamment contribué au code de Zeste de Savoir, et c’est justement là que j’ai étudié pour la première fois la problématique de la fameuse bannière qui vous demande un peu sur tous les sites si vous souhaitez ou non accepter les cookies de tracking.
Pourquoi avoir créé cette classe ?
Cette bannière a une gestion relativement complexe et se retrouve sur beaucoup de sites. Malheureusement la plupart des sites en ont une mauvaise implémentation qui soit ne fonctionne pas du tout, soit triche, soit entrave le SEO en mettant le message d’avertissement en guise de contenu principal de la page sur les moteurs de recherche.
J’ai donc entrepris la création d’une petite classe JavaScript qui gère cela tout bien, histoire qu’il ne reste plus qu’à lui appliquer le style que l’on souhaite et c’est gagné.
Pourquoi c’est bien ?
Je me suis farcis les différents textes de la CNIL et a priori j’ai du coder la chose de façon réglementaire. Ca prend notamment en compte DoNotTrack, la bonne gestion de la page "En savoir plus", le non affichage de cette bannière lorsque ce sont des bots qui viennent visiter le site, …
Pour plus de détails, je vous invite à visiter le dépôt Github du projet qui, bien que tout jeune, me semble suffisamment complet pour être clair et simple à utiliser.
En résumé, comment ça marche ?
Vous importez le fichier cookies-eu-banner.min.js dans votre page, soit en le téléchargeant, soit en utilisant bower : bower install cookies-eu-banner --save.
Ensuite, en bas de votre page, là où vous avez actuellement votre code fourni par Google Analytics ou autre service de ce genre (publicité ciblée, etc.) vous transformez la chose comme suit :
Avant :
1 2 3 4 5 6 7 8 9 | <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-X', 'auto'); ga('send', 'pageview'); </script> |
Après :
1 2 3 4 5 6 7 8 9 10 11 | <script> new CookiesEuBanner(function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-X', 'auto'); ga('send', 'pageview'); }); </script> |
Et bien sûr, à intégrer la bannière en première position de votre <body> en respectant les IDs imposés :
1 2 3 4 5 6 | <div id="cookies-eu-banner" style="display: none;"> En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies par Google Analytics pour réaliser des statistiques de visites. <a href="./en-savoir-plus.html" id="cookies-eu-more">En savoir plus</a> <button id="cookies-eu-reject">Je refuse</button> <button id="cookies-eu-accept">J'accepte</button> </div> |
Il ne vous reste plus qu’à designer la bannière comme bon vous semble en utilisant des classes CSS et non les IDs car c’est une mauvaise pratique et qu’en cas de changement du côté de ce petit script, ça n’aura pas d’impact sur votre style.
Pour plus d’informations, rendez-vous sur le dépôt Github, sur lequel je vous invite à cliquer sur la petite étoile pour l’avoir dans vos favoris Github 
Promis si je fais un site prochainement j'utilise ta bannière