Cmp, bandeau de cookie consent, cnil & cie measure camp nantes 2018

Aristide Riou
17 novembre 2018
CMP, bandeaux de cookie consent & cie
Qu’est ce qu’on peut / doit / ne peut pas faire?
Comment ça marche techniquement?
Retour d’expérience et présentation d’une solution open source

Hey you
2010 à 2012 : E-commerce (Cdiscount, My M&M’s)
2013 à 2016 : Agences digitales (Wunderman, Proximity BBDO)
Depuis 2015 : Intervenant à Sup de Pub Paris
Depuis 2016 : Expert webanalytics / Tag Management chez Ouest France
Conférences diverses : MeasureCamp, SEOCamp, AADF…

Vis ma vie en 2018
Il faut mettre une
CMP sur tous les
sites
GA, ça passe, il faut
juste anonymiser l’IP
La CMP QuantCast
est RGPDcompliantGA est devenu illégal
avec la RGPD. Par
contre AT internet,
ça passe crème
Les tags peuvent être
envoyés seulement
s’ils posent des
cookies 1st part

23 mai 2018 : kikoo
Source : http://bit.ly/2DFb7ed
Consent
Management
Platform
(on en avait marre de dire
“bandeaux de cookie consent”)

Ce que j’ai fait
● Discuter avec la CNIL
● Échanger avec des avocats / juristes
● Comprendre les contraintes de l’IAB
● Batailler avec mon DPO
● Discuter avec Google
● Éplucher (un peu) la RGPD
● Avoir un super dev JS à dispo

Disclaimers
● Je ne suis pas juriste #swearJar
● Ma préco est assez orienté publisher, peut-être trop lourde pour d’autres sites
(ex : e-commercants)
● Si vous parlez à la CNIL, dites que vous venez de ma part on ne s’est jamais
parlé / vu / ce samedi j’étais avec les gilets jaunes et pas au MeasureCamp.
● On ne se parle pas de rendre tout votre site RGPD compliant (rapport plutôt
lointain)
● De toute façon, tout ça va devoir être mis à la poubelle avec ePrivacy #dézo

Ce que dit la CNIL
En substance :
● Cookies exemptés :
○ Cookies techniques (ex : load balancing)
○ Certains cookies d’analytics (more on that later)
○ Cookies de personnalisation (login, panier, langue, interface...)
● Local storage = cookies
● Acceptation : l’utilisateur doit “poursuivre sa navigation” (flou : 10% de scroll?).
● Gestion de l’acceptation par familles : là aussi, flou.
● Durée des cookies : 13 mois max non roulants
● Wording du bandeau : exemple donné sur le site de la CNIL
● Le bandeau doit pouvoir être ré-affiché à tout moment
● La navigation sur la page de mentions légales / cookies ne compte pas pour acceptation
Source : http://bit.ly/2RUla1O

Ce que dit la CNIL : exemption des outils d’analytics
Conditions d’exemption :
1/ L'éditeur du site doit délivrer une information claire et complète ;
2/ Un mécanisme d’opposition doit être accessible simplement et doit pouvoir être utilisable sur tous les
navigateurs, et tous les types de terminaux (y compris les smartphones et tablettes).
3/ Les données collectées ne doivent pas être recoupées avec d’autres traitements (fichiers clients ou
statistiques de fréquentation d'autres sites par exemple).
4/ Le cookie déposé doit servir uniquement à la production de statistiques anonymes ;
5/ Le cookie ne doit pas permettre de suivre la navigation de l’internaute sur d’autres sites.
6/ L’adresse IP permettant de géolocaliser l’internaute ne doit pas être plus précise que l’échelle de la ville.
Concrètement les deux derniers octets de l’adresse IP doivent être supprimés.
7/ Les cookies permettant la traçabilité des internautes et les adresses IP ne doivent pas être conservés
au-delà de 13 mois à compter de la première visite ;
les données de fréquentation brutes associant un identifiant ne doivent pas non plus être conservées plus
de 13 mois.
Source : http://bit.ly/2tu0J20

Conditions d’exemption :
1/ Expliquer l’utilisation de l’outil dans les CGU
2/ Géré via mon bandeau
3/ Opt in spécifique si l’utilisateur se loggue et que je remonte son ID client dans l’outil
4/ Pas de PII + attention au cookie DoubleClick
5/ Cookie 1st Party.
6/ Cryptage des derniers digits de l’IP
7/ Forçage des cookies à 13 mois non glissants + conservation des données à 13 mois dans l’admin GA

Pourquoi ça ne colle pas avec GA :
Source : https://support.google.com/analytics/answer/6004245?hl=fr
Échange avec la CNIL :
De façon plus générale, nous vous rappelons que Google indique
explicitement sur cette page que « Quels que soient les paramètres de
partage définis par le client, ses données peuvent également
servir, en cas de nécessité, à améliorer et à protéger le service
Analytics ». Cela signifie donc que même si vous n’effectuez pas de
recoupement avec les données collectées par le service, Google se
réserve la possibilité de le faire, ce qui signifie donc que le critère de
l’absence de recoupement avec d’autres traitements n’est pas respecté et
que donc Google Analytics ne peut pas bénéficier de l’exemption de
recueil du consentement.

Ce que dit la CNIL : outils d’analytics et exemption
Ce que dit Google :
Après consultation avec notre département juridique, voici leur
réponse :
Dans nos contrats avec les publishers, il est indiqué qu'ils sont
responsables de recueillir le consentement des end users pour les
cookies sur leurs sites. Je ne peux donc pas donner d'avis juridique
sur cette question, cela relève du juridique du publisher.
Toutefois, nous avons mis au point un site sur la question des
bannières de consentement cookies pour aider nos publishers à
mettre en place ces derniers.
https://www.cookiechoices.org/

Ce que dit l’IAB (International Advertising Bureau)

L’esprit : mettre en place une norme d’acceptation pub
Normalisation :
● D’une liste de partenaires agréés (Vendor list) ⇒ Processus d’enregistrement
● D’une liste de finalités publicitaires (Purposes) :
○ Information storage and access
○ Personalisation
○ Ad selection, delivery, reporting
○ Content selection, delivery, reporting
○ Measurement
● D’une liste de CMP permettant de mettre en place ce framework ⇒ Processus
d’enregistrement et pointage d’un sous-domaine sur mgr.consensu.org

Comment ça se passe concrètement en JS
Framework IAB = Méthodes JS exposées et sur lesquelles les régies publicitaires
peuvent se baser pour faire des trucs
⇒ Totalement décorrélé de l’aspect fonctionnel

Le processus technique
1/ Le site appelle la librairie / tag JS du partenaire X
2/ Le partenaire X est enregistré à l’IAB sous l’ID “123”
3/ Le partenaire X interroge les méthodes JS pour savoir, pour le partenaire 123,
quelles sont les purposes acceptés.
4/ Le partenaire X affiche la pub appropriée selon les purposes.

Les dilemmes IAB / CNIL
● Est ce que je dois faire confiance aux vendors? Ou vérifier en amont?
● Comment gérer les vendors non IAB compliant?
● Comment gérer le piggybacking (appels en cascade)?
● Expliquer les contraintes CNIL aux vendors (pas de cookie, pas de chocolat),
qui travaillent souvent dans plusieurs pays où les contraintes peuvent être
différentes.

Les CMP du marché
Les plus courantes : AppNexus / Quantcast
+ : faciles à installer (à peu près)
- : un enfer à customiser
- : lourds, moches. Bref, une tannée
La plus “CNIL compliant” : tarteaucitron.js
+ : CNIL compiant
- : Souvent, perte des tags sur la 1ère page

Faire une CMP maison selon l’internet
Source : http://bit.ly/2DHmToc
“Nous avons mobilisé une trentaine
de collaborateurs issus de
départements techniques et
juridique pendant trois à quatre
mois”

Faire une CMP maison dans la vraie vie
Les ressources :
● 10% : Créa / UX
● 15% : Juridique
● 75% : Dev front, surtout JS
● + Gestion de projet
● + QA
Temps nécessaire : environ 40 jours / homme au total pour toute la conception, +
un peu de temps pour l’intégration sur chaque site / applicatif.
La difficulté majeure : bien gérer l’interrogation du framework IAB (mécanique de
cache de la liste des vendors, consent string…)

Installer la CMP en 4 étapes simples
Lien vers la doc (WiP) :
https://sipaof.mgr.consensu.org/sipacmp/
Étape 1 : Insérer le snippet dans le <head>
Étape 2 : Insérer un lien pour ré afficher le
bandeau dans le footer
Étape 3 : Insérer la condition sur les pages
“spéciales”
Étape 4 : encapsuler d’éventuels tags de
pub en dur pour qu’ils “attendent” la
validation

“spéciales”
validation
<script>!function(e,a,c,n,t){if(a.__cmp=function(){v
ar
e=[],n=function(a,c,t){"ping"===a?t&&t({gdprAppliesG
lobally:!!(n&&n.config&&n.config.storeConsentGloball
y),cmpLoaded:!1}):e.push({command:a,parameter:c,call
back:t})};return
n.commandQueue=e,n.config=a.__cmp&&a.__cmp.config?a.
__cmp.config:{},n.receiveMessage=function(a){var
c=a&&a.data&&a.data.__cmpCall;c&&e.push({command:c.c
ommand,parameter:c.parameter,callback:function(e,n){
var
t={__cmpReturn:{returnValue:e,success:n,callId:c.cal
lId}};a.source.postMessage(t,"*")}})},(a.attachEvent
||a.addEventListener)("message",function(e){a.__cmp.
receiveMessage(e)},!1),function
e(){if(!a.frames.__cmpLocator)if(c.body){var
n=c.createElement("iframe");n.style.display="none",n
.name="__cmpLocator",c.body.appendChild(n)}else
setTimeout(e,50)}(),n}(),!c.getElementById(t)){var
o=c.createElement("script"),s=c.getElementsByTagName
("script")[0];o.async=1,o.src="https://sipaof.mgr.co
nsensu.org/sipacmp/js/sipa-cmp.min.js",o.type="text/
javascript",o.id=t,s.parentNode.insertBefore(o,s)}}(
0,window,document,0,"sipacmp_loader");</script>

“spéciales”
validation
<p>Cliquez <a
href="javascript:onclick=__cmp.show()">sur ce lien
pour afficher le bandeau CMP</a>. Enfin après c'est
vous qui voyez.</p>
⇒ Peut aussi être fait via un event listener
classique (plus propre)

“spéciales”
validation
<script>window.sipacmp_gcda = true; //
_global_consent_doesnt_apply</script>

“spéciales”
validation
__cmp('getUserConsent', {}, function(e){
if(e.consent && e.consent.advertising){
!function (e, f, u, i) {
if (!document.getElementById(i)) {
e.async = 1;
e.src = u;
e.id = i;
f.parentNode.insertBefore(e, f);
}
}(
document.createElement("script"),
document.getElementsByTagName("script")[0],
"https://cdn.taboola.com/libtrc/ouest-france-ouest-f
rance/loader.js","tb_loader_script"
);
if(window.performance && typeof
window.performance.mark == "function") {
window.performance.mark("tbl_ic");
}
}
});

Ce que vous pouvez customiser :
● Wording du bandeau
● % de scroll de validation
● Position du bandeau (haut, bas)
● Règles CSS
● Familles
⇒ Est ce que je peux l’intégrer via GTM ?
Pas idéal, mais possible
Lien vers la page de démo : bit.ly/cmpsipa

Interactions CMP et GTM : setup technique
Scroll de 10% ou clic sur “accepter”
+ pose cookie 1st part
sipacmp_consent avec la
valeur suivante :

Interactions CMP et GTM : préparation des variables

Interactions CMP et GTM : préparation des triggers

Interactions CMP et GTM : attachement des triggers aux tags
Page vue et cookies
déjà OK
Acceptation en cours de page
(pas toujours nécessaire)

Interactions CMP et GTM : tag pub
Triggers spécifiques pour les
tags pub

Interactions CMP et GTM : tracker l’acceptation en event
Ne part que lorsque l’utilisateur
accepte la CMP
Remonte les familles acceptées
en event label (en plus de
l’analytics, bien sûr…)

Interactions CMP et GTM
Télécharger le container GTM d’exemple : https://pastebin.com/WsVwSGC3
(enregistrer au format .json, puis importer dans le container de votre choix)

Merci!
Des questions ?
Vous pouvez me contacter
Mail : aristide.riou@gmail.com
Twitter : @aristweet

Cmp, bandeau de cookie consent, cnil & cie measure camp nantes 2018

Recommandé

Recommandé

Contenu connexe

Similaire à Cmp, bandeau de cookie consent, cnil & cie measure camp nantes 2018

Similaire à Cmp, bandeau de cookie consent, cnil & cie measure camp nantes 2018 (20)