Cookies CNIL banner : la classe qui gère la bannière imposée

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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-cnil-banner.min.js dans votre page, soit en le téléchargeant, soit en utilisant bower : bower install cookies-cnil-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 CookiesCnilBanner(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-cnil-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-cnil-more">En savoir plus</a>
    <button id="cookies-cnil-reject">Je refuse</button>
    <button id="cookies-cnil-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 :)

Édité par Alex-D

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte