Catégories
AdSense Tuto Wordpress

Créer un bandeau cookies (CMP) conforme CNIL en 2021 sur WordPress

Depuis le 1er avril 2021 (ce n’est pas un poisson ;-)), tous les éditeurs de sites Web ont l’obligation en France de collecter le consentement de leurs visiteurs de façon explicite (avec des boutons accepter / refuser au même niveau) avant de déposer des cookies publicitaires ou statistiques sur leur site.

Dans ce tuto, je vais t’expliquer comment j’ai configuré la CMP Complianz (plugin WordPress) pour proposer à mes visiteurs un bandeau de consentements cookies honnête, conforme avec les nouvelles directives de la CNIL d’octobre 2020 et qui minimise les refus.

Au sommaire :

  1. Directives de la CNIL 2020 : Google Analytics et AdSense ne peuvent plus être chargés sans consentement explicite
  2. Complianz : une CMP WordPress gratuite pour donner plus de contrôle à ses visiteurs
  3. Assistant pour configurer le blocage des cookies Google Analytics, AdSense, Facebook, Twitter,…
  4. Limiter la durée du cookies Google Analytics à 13 mois
  5. Créer une bannière de cookies conforme et optimisé pour le consentement
  6. Ajouter un lien vers le bandeau cookies en bas de page
  7. Masquer le bandeau dans la page mention Cookies
  8. Comment vérifier que son bandeau est conforme ?

Recos CNIL 2020 : Google Analytics et AdSense ne peuvent plus être chargés sans consentement explicite

En octobre 2020, la CNIL a mis à jour ses directives et recommandations, voici des éléments structurant à retenir :

  • La simple poursuite de la navigation sur un site ne peut plus être considérée comme une expression valide du consentement de l’internaute ;
  • Les personnes doivent consentir au dépôt de traceurs par un acte positif clair (comme le fait de cliquer sur « j’accepte » dans une bannière cookie). Si elles ne le font pas, aucun traceur non essentiel au fonctionnement du service ne pourra être déposé sur leur appareil.
  • Les utilisateurs devront être en mesure de retirer leur consentement, facilement, et à tout moment.
  • Refuser les traceurs doit être aussi aisé que de les accepter.
  • Concernant l’information des personnes : elles doivent clairement être informées des finalités des traceurs avant de consentir, ainsi que des conséquences qui s’attachent à une acceptation ou un refus de traceurs.

Pour tout comprendre, je t’invite à regarder les 30 premières minutes de ce webinaire officiel de la CNIL où interviennent Benjamin Polivé (expert technique) et Nacera Bekhat (expert juridique)

La CNIL ajoute également dans ses FAQs, que seul l’outil Analytics Suite Delta de AT Internet (un outil stats payant) est exempté de consentements et que même pour de la publicité contextuelle (non personnalisée) on doit recueillir le consentement dès lors qu’un cookie de capping est déposé (question 28).

NB : la CNIL charge sur son site un cookie Piwik/Matomo sans consentements. J’imagine donc que cet outil de Web Analytics doit être aussi autorisé (il l’était avant).

En résumé, si on veut afficher des publicités Google AdSense (mêmes non personnalisées) ou mesurer le trafic de son site avec Google Analytics, il faut au préalable charger un bandeau de consentements qui ressemble à ça et n’appeler les 2 solutions qu’en cas de Oui explicite.

Maquettes extraites des recommandations de la CNIL

Voilà, ça pique un peu les yeux 😉 Tu comprends maintenant pourquoi tu as vu fleurir des tas de bandeaux de consentements bloquant depuis fin mars / début avril. Heureusement, je suis là pour t’aider à créer ce genre de bandeaux pour ton site WordPress.

Complianz : une CMP WordPress gratuite pour donner plus de contrôle à ses visiteurs

Tu l’auras compris un simple petit bandeau d’informations cookies ne suffit plus à pouvoir mesurer et monétiser son audience sur le Web. Il faut dorénavant s’adjoindre les services d’une CMP (Consent Management Platform).

Tant que je n’ai pas dis oui, Google Analytics et AdSense ne sont pas chargés au niveau du code source de ma page et au niveau des cookies

La CMP va permettre de faire le lien entre tes visiteurs et les codes javascript AdSense, Analytics, Facebook, Twitter,… chargés sur tes pages et qui déposent des cookies.

J’ai dit Oui aux stats et à la pub, les javascript AdSense et Google Analytics peuvent être chargés sur mon site et les cookies _gads (AdSense) et _ga (Google Analytics) peuvent être déposés sur le navigateur de mon visiteur

J’ai trouvé Complianz, un plugin WordPress gratuit qui permet de faire le job que demande la CNIL. Pour l’ajouter, va sur ton WordPress / extension / ajouter et cherche-le comme suit :

Si tu es développeur, tu as également un répertoire Git qui te permet de lire le contenu du plugin et de le customiser pour tes propres besoins.

Assistant pour configurer le blocage des cookies Google Analytics, AdSense, Facebook, Twitter,…

Une fois la CMP Complianz installée sur ton WordPress, il faut l’aider à trouver les javascript et cookies des solutions que tu as installées sur ton site.

Va pour cela dans Complianz > Assistant et répond à toutes les questions

Assistant de Complianz

Dans les premières questions coche « GDPR » et fais en sorte que la politique de cookies soit généré par Complianz. Lie la déclaration de confidentialité à ta page « Politique de confidentialité » native à WordPress.

Indique ensuite les coordonnées du responsable de traitement (toi-même) et passe la partie sécurité et consentement (option premium non vitale). A l’étape suivante, Complianz va faire l’inventaire des cookies chargés sur ton WordPress.

On retrouvera dedans des cookies fonctionnels exemptés de consentements (complianz pour la CMP, wordpress_ pour l’accès au site) et des cookies stats (_ga), pub (_gads) et de réseaux sociaux / sites tiers (twitter, facebook, youtube).

Passe à l’étape suivante pour configurer les statistiques.

Voici ce j’ai configuré de mon côté :

J’ai installé pour ma part Google Analytics via le plugin officiel « Google Site Kit ». C’est bien, Complianz l’a détecté. Dans son aide en ligne, Complianz propose 3 méthodes pour conditionner le chargement de Google Analytics.

La méthode 1 est la plus sûre d’un point de vue respect CNIL . C’est Complianz qui ajoutera le code de suivi Google Analytics à la place de Google Site Kit.

Pour ce faire, il faut donc désactiver le chargement de Google Analytics via Google Site Kit comme ceci :

Et dans l’assistant de Complianz, cochez ceci

Même si je n’ai pas autorisé Google à utiliser les données de Google Analytics (GA) pour d’autres services, j’ai décoché la case volontairement car Complianz considère sinon Google Analytics comme exempté de consentements et la CNIL n’est pas d’accord avec ça. On peut ensuite cliquer sur suivant.

J’ai la confirmation que Complianz conditionnera la chargement de GA à l’acceptation de mon bandeau. Il faut un peu que je l’aide en indiquant le code UA de ma vue Google Analytics (on trouve ça sur son compte GA). Avec ceci, il pourra charger le code de suivi javascript GA qui va bien après consentement.

Dans intégrations, je coche a peu près tout à oui :

J’ai bien des cookies réseaux sociaux, bientôt de la publicité AdSense. NB : jeanviet.fr qui va remplacer à termes jeanviet.info est en cours de validation chez AdSense.

Bien sûr, vous adaptez les réponses en fonction de la situation de votre site 😉 Dans l’étape d’après, Complianz va faire le lien avec cookiedatabase.org pour vous générer un registre des cookies (info demandée par la CNIL et la GDPR)

Complianz va ensuite vous créer une belle page d’infos cookies automatique avec tous ces cookies.

Accessible via cette URL pour moi : https://jeanviet.fr/politique-de-cookies-ue/

Page de politique de cookies générée automatiquement 😉

C’est magique, pas besoin d’embaucher un avocat pour rédiger vos mentions cookies !

Liez ensuite cette page à un de vos menus, comme suit

Bravo ! On va pouvoir bientôt personnaliser l’interface graphique de votre bandeau de consentements.

Comment limiter la durée du cookies Google Analytics à 13 mois ?

Encore un réglage CNIL pas prévu nativement dans Complianz 😉 Le cookie statistique ne doit pas rester plus de 13 mois dans le navigateur et GA l’active par défaut pour 24 mois 🙁

Extrait CNIL recommandation durée traceur stats

Connectez-vous via FTP à votre site WordPress et modifiez le fichier suivant google-analytics.js dans wp-content/plugins/complianz-gdpr/templates

Il faut en faite remplacer cette ligne

ga('create', '{UA_code}', 'auto');

par cette ligne

ga('create', '{UA_code}', {'cookieExpires': 34128000});

On indique à GA qu’on souhaite que le cookie expire au bout de 13 mois. Il faut en fait exprimer (365 jours + 30 jours) en secondes (1 jour = 24 h x 3600 secondes) , soit : 395 * 24 * 3600 = 34 128 000 secondes

Comment créer une bannière de cookies conforme et optimisée pour le consentement ?

On va maintenant pouvoir créer et personnaliser sa bannière de consentement en allant sur Complianz > Bannière de cookies

Je vais vous donner les réglages pour afficher ce type de popin bloquante conforme d’un point de vue CNIL et qui maximise les taux de consentements.

Popin de consentements validé par la CNIL

Dans sa grande mansuétude, la CNIL permet en effet de remplacer le bouton « Tout Refuser » de premier niveau par une croix de fermeture (x) ou un lien fléché « Continuer sans accepter » en haut à droite.

Regardez bien mon bandeau ! On peut bien « tout refuser » au 1er niveau en cliquant sur « Continuer sans accepter » mais le design donne plus envie de « tout accepter ».

Popin de consentement Jeanviet.fr

Voici mes réglages de base pour avoir une popin bloquante

C’est important de mettre la bannière au centre et de cocher la case modale pour avoir l’effet popin bloquante.

Allez ensuite dans l’onglet « Accord » et configurer les textes comme suit :

Les réglages importants :

  • Accord total + voir les préférences
  • Mettre le texte « Continuer sans accepter ➔ » à la place de « refuser » dans cookies fonctionnels
  • « Tout accepter » à la place d’ « accepter »
  • J’ai remplacé « Marketing » par « Publicité personnalisée », autant être honnête ! La CNIL rappelle que la finalité ne doit pas être équivoque.
  • « Cookies » comme texte de lien vers la Politique de cookies qu’on a créé avant

Il reste ensuite à définir le texte + bas, faites preuve d’humour et d’originalité pour expliquer concrètement pourquoi vous voulez le consentement de vos visiteurs.

On peut utiliser du HTML et des émojis. Parlez bien des finalités que vous collectez et pourquoi.

Ajouter à la fin ce texte :

« Tu peux modifier tes préférences à tout moment en cliquant en bas de page sur »

… qui fera le lien avec votre politique de cookie et un lien spécial cookies qu’on rajoutera + tard pour permettre à vos utilisateurs de changer leurs consentements à tout moment (obligation CNIL / RGPD).

Il ne reste plus maintenant qu’à faire un peu de customisation CSS dans l’onglet général, tout en bas pour faire remonter le bouton « continuer sans accepter » tout en haut. J’ai repris le code préconisé par Complianz.

Continuer sans accepter remonte !

Voici le CSS à copier-coller / adapter

/* moving the dismiss button */
#cc-window .cc-compliance .cc-btn.cc-dismiss {
            position: absolute;
            top: -15px;
            right: 15px;
            text-align: right;
            margin-right: 20px;
            background-color: initial !important;
            border: 0;
            text-decoration: none;
        }
        
/* filling the gap */
#cc-window .cc-save {
	width:100%!important;
}


.cc-message{position: relative;
            top: 15px; line-height:1.2em;} /* styles for the message box */

.cc-dismiss{font-weight:normal;font-size:12px} /* styles for the dismiss button */

Et voilà, on est bon en termes de design 😉

Comment ajouter un lien vers le bandeau cookies en bas de page ?

Encore un réglage pas trop plug and play. J’ai encore une fois trouvé la solution dans la doc de Complianz.

Il va falloir ajouter ces lignes de code dans functions.php de votre thème WordPress. Apparence > Editeur de thème > functions.php

function cmplz_show_banner_on_click() {
	?>
	<script>
        jQuery(document).ready(function ($) {
            $(document).on('click', '.cmplz-show-banner', function(){
                $('.cc-revoke').click();
                $('.cc-revoke').fadeOut();
            });
        });
	</script>
	<?php
}
add_action( 'wp_footer', 'cmplz_show_banner_on_click' );

Et ensuite ajouter ce lien dans votre menu / pied de page :

<a class="cmplz-show-banner" href="#"> Cookies</a>

Masquer le bandeau dans la page mention Cookies

Avec la popin bloquante, on n’arrive pas à lire le texte « politique de cookies » qui s’affiche dans votre bannière.

Pour résoudre ce problème, éditez votre page « politique de cookies » et cochez l’option « masquer la bannière » dans la vue page à droite, tout en bas.

Comment vérifier que son bandeau est conforme ?

Maintenant que votre bandeau est prêt, il va falloir le tester comme le ferait la CNIL en cas d’audit (cf la vidéo du webinaire et les conseils de Benjamin Polivé) en basculant en mode développeur sur votre navigateur Web (touche F12) et en vérifiant les cookies déposés et les appels réseaux avant et après consentement.

On voit beaucoup trop de sites avec des CMP ou des bandeaux cookies classiques déposer des cookies GA, ou pire encore des cookies publicitaires avant de recevoir le consentement de l’internaute.

La CNIL ne pardonne pas ça ! Amazon, Google et Carrefour ont pris très chers l’année dernière côté amende et côté image.

Les contrôles à faire avant Consentement

1- Vérifiez qu’il n’y a aucun appel vers google-analytics.com ou doubleclick.net (l’adserver de Google) depuis la vue réseau de Chrome (F12 > Réseau)

On est bon, aucune url google ou doubleclick

2- Vérifiez qu’il n’y a aucun cookie stats ou pub créé avant consentement dans la vue application de Chrome (F12 > Application)

Seul un cookie complianz est appelé, on est bon pas de cookie _ga ou _gads

Les contrôles à faire après Consentement

Faites exactement les mêmes contrôles que précédemment en fonction des consentements donnés.

Par exemple ci-dessus j’ai dis oui aux stats et non à la pub ciblée, les cookies affichées sont totalement cohérents :

  • en rouge, mon cookie cmplz_marketing est à deny (refuser), je vois que l’embed YouTube n’est pas chargé et que je n’ai pas de cookie _gads (adsense) appelé .
  • en vert, mon cookie cmplz_stats est à allow (accepter), je vois que mon cookie _ga (Google Analytics) est bien créé avec une durée de vie de 13 mois que j’ai configuré plus haut. Et mes appels réseaux (ci-dessous) intègrent bien du google-analytics.com/?collect=

On est donc tout bon partout !!!!

J’espère que grâce à ce tuto, vous aurez tous des sites WordPress avec des bandeaux cookies conformes aux nouvelles directives de la CNIL !

Si ce tuto vous a été utile, je compte sur vous pour le partager sur Twitter, Facebook ou sur votre blog et à réagir en commentaire.

2 réponses sur « Créer un bandeau cookies (CMP) conforme CNIL en 2021 sur WordPress »

Bonjour,

Depuis la dernière mise à jour de Complianz, le CSS pour le lien “Continuer sans accepter” en haut à droite est à revoir. Nous avons échangé le support du plugin, voici le nouveau CSS (à mettre dans « CSS personnalisé ») :

.cmplz-cookiebanner .cmplz-message, .cmplz-message a {
font-size: 0.8em;
line-height : 25 px;
align-content : center;
}

.cmplz-cookiebanner .cmplz-links {
display: none;
}
.cmplz-cookiebanner .cmplz-close {
margin-right:-20px;
}

.cmplz-cookiebanner {
padding: 15px 25px 15px 25px ;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-deny {
font-weight : 300;

}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
min-width: 150px;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences {
border: 0px;
}

.cmplz-cookiebanner .cmplz-buttons {
flex-wrap: wrap;
}

.cmplz-cookiebanner .cmplz-close:hover {
line-height:unset!important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
flex:1;
}

.cmplz-cookiebanner .cmplz-title{
font-weight : 100 !important;
}

Puis dans le CSS de votre thème :

/* Complianz : Continue without Consent */

.cmplz-cookiebanner .cmplz-close:before {
content: « Continuer sans accepter »!important;
margin-left: -122px;
font-size: 12px;
}

.cmplz-cookiebanner .cmplz-header {
overflow:hidden!important;
}

Bien à vous

Les commentaires sont fermés.