discreto

une popup de consentement pour tous les services tiers et trackers
qui respecte la vie privée et le droit à l'anonymat des internautes

discreto est un outil libre et gratuit qui vous aide à vous mettre en conformité avec la réglementation

discreto a été pensé pour les éditeurs de site et pour les internautes, afin de concilier leurs intérêts

si vous le souhaitez, discreto peut aussi se souvenir de vos choix sur les sites que vous consultez

Vous êtes éditeur d'un site ou webmaster ?
Essayez discreto ou retrouvez-nous sur Github

Vous êtes tombé sur un site avec une fenêtre qui vous semble trompeuse ?
Contactez son webmaster et parlez-lui de discreto !

RGPD mon amour

  • Vous aussi en avez ras le chapeau de toutes ces popups de consentement ?
  • Vous aussi vous êtes résigné-e à Tout accepter, juste pour qu'elles disparaissent ?
  • Saviez-vous que la plupart de ces popups vous trompent ou ne sont pas conformes ?

La Réglementation générale sur la protection des données (RGPD), entrée en vigueur en 2018, devait offrir à chaque citoyen européen un meilleur contrôle de ses données et un plus grand respect de sa vie privée numérique.

Elle précise que le consentement éclairé et non ambigü d'un internaute est requis avant toute collecte de données personnelles (comme votre adresse IP ou votre géolocalisation), ou tout dépôt de cookie destiné à vous identifier (avec quelques exceptions).

Dans les faits... on en est (très) loin !

des popups « prêtes à l'emploi »... mais abusives

De nombreux éditeurs de sites et webmasters ont choisi la simplicité, en utilisant des services « gratuits » de mise en conformité, comme celui que propose Quantcast (qui fait l'object depuis 2019 d'une investigation en Irelande , où elle a installé son siège européen).

Or la plupart de ces solutions prêtes à l'emploi... sont éditées par des sociétés spécialisées dans l'analyse d'audience et le profilage ! Accepter ou refuser n'a dans la plupart des cas aucun effet sur les trackers, les services de profilage ou de ciblage publicitaire utilisés sur le site consulté (souvent chargés avant même que la popup s'affiche).

En réalité, ces popups vous demandent en premier lieu votre consentement pour que leurs sociétés éditrices puissent exploiter votre historique de visite sur le site, les informations de votre navigateur, mais aussi votre votre adresse IP (et donc votre géolocalisation) afin de mieux vous connaître, et d'en faire profiter leurs (très nombreux) partenaires. Faites le test vous-mêmes !

Il en va souvent ainsi sur Internet, si c'est gratuit, c'est vous le produit !

des bannières de consentement sans possibilité de refuser

Par souci de simplcité toujours (ou par méconnaissane de la règlementation), d'autres sites préfèrent afficher une petite bannière pour vous prévenir que des cookies viennent d'être déposés et que des données personnelles ont déjà été collectées.

La plupart du temps seul un gros bouton Tout accepter ou J'ai compris vous est proposé, sans possibilité de refuser, ni de savoir quels outils sont chargés et quelles données sont collectées. Un peu facile...

L'information étant reine, il serait en effet bête de passer à côté de quelques statistiques supplémentaires, quelques revenus publicitaires, ou quelques occasions de vous retargeter, histoire de vous faire acheter ce foutu canapé Ikerama.

voire aucune bannière ni popup, pourquoi se compliquer la vie ?

Là on ne parle plus de simplicité, mais de manque d'information ou de mépris pur et simple de la vie privée des internautes. Pas de bannière ni de fenêtre, mais une pléthore d'outils de statistiques et de profilage chargés sans votre consentement, et évidemment sans possibilité de s'y opposer.

Alors pourquoi diable si peu de considération ? Mais voyons, parce que Ikerama n'a toujours pas réussi à vous vendre son canapé, alors au grand mot les grands remèdes, mettons tous les réseaux sociaux au courant, comme ça on pourra aussi vous glisser une jolie pub pour le fameux canapé dans votre fil Facedebouc ou Amchatgram :)

Parce que peut mieux faire

Il existe déjà de nombreuses solutions éditées par des sociétés qui ne vivent pas de vos données personnelles (comme CookieBot), et même quelques alternatives libres (comme Tarte au citron).

Pourtant mêmes libres, la plupart de ces solutions :

  • nécessitent un abonnement... payant
  • requièrent des connaissances en développement web
  • ne sont pas compatibles avec Google Tag Manager, pourtant devenu incontournable
  • privent inutilement les éditeurs d'une partie de leurs statistiques de visites
  • surgissent de façon invasive, sans vraiment laisser le choix
  • et d'un site à l'autre... revoilà la popup

Pour toi public

Sinon il y a discreto !

Parce qu'il est possible de concilier les attentes des internautes, avec le droit à l'anonymat et le refus d'être « tracké », et celles des éditeurs, avec la possibilité de collecter des statistiques nécessaires pour améliorer la qualité de leurs services.

  • sous licence libre, gratuit, léger et sans dépendance (35k)
  • existe (bientôt) en plugin WordPress... gratuit !
  • est discret et configurable simplement depuis l'assistant
  • supporte de nombreux services et gestionnaires dont GTM
  • n'autorise par défaut que les statistiques anonymisées
  • respecte l'option Do Not Track en refusant d'emblée tous les services
  • permet de faire un choix éclairé des services autorisés
  • et peut s'en souvenir d'un site à l'autre

Mes préférences

Balance ta popup

Pour se convaincre qu'une fenêtre de consentement fait réellement son travail et respecte vos droits, suivez les étapes.

  1. Ouvrez le site à vérifier dans un onglet de navigation privée
  2. Attendez que s'affiche la popup de consentement
  3. Seulement si la popup vous masque le contenu du site, cliquez sur Tout refuser

Voyez-vous déjà :

  • des encadrés publicitaires qui vous connaissent bien (ou annonces personnalisées) ?
  • des boutons de partage (J'aime) ou des lecteurs de vidéo intégrés (YouTube) ?

Si vous êtes familier de l'inspecteur, ouvrez-le et sélectionnez l'onglet Réseau, puis rafraichissez la page. Observez-vous des requêtes vers :

  • Google Analytics sans anonymisation (ie. sans l'option &aip=1 dans l'URL) ?
  • des services de ciblage publicitaire (comme AdWords, DoubleClick ou Microsft Ads) ?
  • des réseaux sociaux (Facebook, Twitter ou LinkedIn) ?

Si vous avez répondu oui à l'une des questions précédentes, la popup n'est que de l'esbrouffe... Parlez de discreto à son webmaster !

Un site vous semble utiliser discreto d'une façon douteuse ? Dites-le nous.

Retour à la configuration

Installation

Dernière version

Vous souhaitez disposer de la dernière mise à jour ?

Passez directement à l'étape de configuration et cochez l'option Charger depuis repo.discre.to, vous n'avez rien à télécharger.

La dernière version stable est toujours disponible à l'adresse : //repo.discre.to/latest/

WordPress

Votre site tourne sous Wordpress ?

En attendant l'arrivée du plugin (c'est pratique un plugin), passez à l'étape de configuration, choisissez également l'option Charger depuis repo.discre.to, et collez le code HTML généré dans un widget HTML personnalisé présent sur toutes les pages du site.

Attention : n'oubliez pas de désactiver les plugins des services définis dans la configuration de discreto (Google Analytics, boutons de partage, réseaux sociaux...).

Téléchargement

Vous préférez la bonne vieille méthode de l'installation manuelle ?

Commencez par télécharger la dernière version de discreto (v1.3.0 - 16k).
Décompressez l'archive et téléversez le répertoire discreto/ à la racine de votre site web (ou tout autre emplacement de votre choix).

Si vous souhaitez vérifier la signature de l'archive, voici donc :
MD5 : 176c26814affe009533b7313368f6765
SHA1 : 5f25d140d92ef83197452c86492ea544fde6a24e

Vous pouvez utilisez un autre nom ou emplacement pour le répertoire discreto/ mais ne renommez pas les fichiers discreto.min.js et discreto.min.css. Pensez dans ce cas à adapter le chemin du script dans le code HTML généré à l'étape suivante.

Rejoignez la communauté

Vous préférez voir un peu le code qu'il y a derrière et faire votre propre build ?

Retrouvez discreto sur Github, et participez à rendre l'Internet plus respectueux.

Configuration

Personnalisez l'interface et choisissez les paramètres du cookie, puis définissez les services que vous utilisez (ou souhaitez utiliser) et terminez en cliquant sur Générer le code.

Le code HTML généré contient la configuration et le chargement de discreto qui, en respectant les choix de l'internaute, chargera les services, trackers et autres outils de collecte de données ou de ciblage, ou autorisera ou non l'affichage des fenêtres et widgets associés.

Cet unique code remplace tous ceux que vous avez sans doute déjà copiés/collés sur votre site (pour Google Tag Manager, Analytics, Facebook Pixel...), mais vous pourrez toujours utiliser leurs APIs (gtag(), ga(), fbq...).

Personnalisation de l'interface

Personnalisez la fenêtre de consentement :

Ajoutez une image au-dessus des textes de la fenêtre

Avec fond transparent et d'une hauteur au moins égale à 72px

Un masque obligera l'internaute à répondre pour continuer sa navigation

Uniquement pour les services non encore acceptés ou refusés

Attention, il sera nécessaire de prévoir un bouton ou lien pour afficher les préférences: discreto.prefs()

La fenêtre apparaît sinon à l'ouverture de la page (comme sur ce site)

Nombre de secondes (2 pour 2 secondes) ou valeur en pixels (50px) pour un défilement

Le style par défaut sera sinon utilisé (comme sur ce site)

Reportez-vous à la documentation pour créer votre propre style

Définissez les paramètres et options du cookie de consentement :

Options de chargement

Choisissez comment charger le script et ses options :

Si vous utilisez une URL d'un autre domaine, vérifiez bien qu'elle peut être chargée depuis le site

Reportez-vous à la section Google Tag Manager pour créer un déclencheur spécifique à l'envoi de la configuration

Pour toujours utiliser la dernière version de l'outil

Si vous ne comptez pas éditer manuellement la configuration

Tadam !

Insérez le code ci-dessous directement dans le HTML de votre page, juste avant la femerture de la balise </body> (si vous utilisez WordPress, collez ce code dans un widget HTML personnalisé) :

<!-- cookie & privacy consent - https://discre.to -->
<script>
window.discretoConf={};
(function(d,i,s,c,o){c=d.getElementsByTagName(i)[0];o=d.createElement(i);o.async=true;o.src=s;c.parentNode.insertBefore(o,c)})(document,'script','')
</script>

Dans la balise HTML personnalisé de votre compte Google Tag Manager, collez le code HTML suivant :

<script>
discreto.start({})
</script>

Collez la configuration suivante dans le fichier JSON (ou téléchargez-le) :

Attention : si vous aviez déjà inséré les codes HTML fournis par les services eux-mêmes, pensez à les supprimer pour éviter qu'ils ne fassent double emploi.

Vous utilisez Google Tag Manager pour au moins un service, il vous faut créer les déclencheurs adaptés et les attacher à vos services (balises). Pour cela suivez le tutoriel.

API

L'API vous permet d'écouter les changements apportés aux préférences, via des événements ou des promesses. Il est également possible d'indiquer dans le DOM les éléments qui nécessitent un consentement préalable en leur ajoutant un attribut data-discreto.

Pour les balises HTML comme pour les promesses, il est possible d'utiliser un wilcard (*) pour faire référence à un service ou l'une de ses variantes : service* vaut ainsi pour service ou service-variante.

Balises HTML

Pour tout objet du DOM autre qu'un <script> ou une <iframe>, définissez dans l'attribut data-discreto le code du service requis, et dans l'attribut data-class la classe CSS qui sera ajoutée une fois le consentement obtenu, ou retirée sinon.

Exemple :

Pour afficher un message en cas de refus (en réalité pour le masquer, hidden, une fois accepté) :

<div data-discreto="facebookComments" data-class="hidden">
  <p>Vous n'avez pas accepté le service <strong>Facebook
  Comments</strong>, les commentaires de cet article ne seront pas
  visibles.</p>
  <nav class="left btns">
    <button onclick="discreto.prefs()"
            type="button">Préférences</button>
    <button onclick="discreto.update('facebookComments', true)"
            type="button" class="ok">Accepter</button>
  </nav>
</p>

Résultat :

Vous n'avez pas accepté le service Facebook Comments, les commentaires de cet article ne seront pas visibles.

Bonjour les commentaires Facebook ! 😁

Vidéos intégrées et liseuses

Pour une <iframe>, ajoutez le code du service requis dans l'attribut data-discreto, et renommez l'attribut src contenant l'URL en data-src. Le chargement aura lieu une fois le consentement de l'internaute obtenu.

Tant que l'internaute n'a pas accepté, ou s'il refuse, les contenus des <iframe> sont remplacés par un court message explicatif avec un bouton pour éditer les préférences ou pour activer le service (sur cette page ou pour tout le site).

L'exemple qui suit tire profit du wildcard (*), ainsi youtube* vaut pour youtube (vidéo embedded) et youtube-api (l'API YouTube).

Exemple :

Pour n'afficher une vidéo YouTube qu'après consentement de l'internaute, adaptez comme suit le code fourni par YouTube :

<iframe src="https://www.youtube.com/embed/S-u6qdeaPoE?autoplay=1"
        frameborder="0" allowfullscreen></iframe>

Devient :

<iframe data-discreto="youtube*"
        data-src="https://www.youtube.com/embed/S-u6qdeaPoE?autoplay=1"
        frameborder="0" allowfullscreen></iframe>

Résultat :

Si le service youtube n'a pas été inclus dans la configuration :

🤕

Aucun consentement n'est prévu pour YouTube (embed), cette fenêtre a été bloquée :
https://www.youtube.com/embed/ID

Afficher tout de même | Préférences

Si les conditions du service n'ont pas encore été acceptées :

🤔

Acceptez les conditions du service YouTube (embed) pour afficher cette fenêtre :
https://www.youtube.com/embed/ID

Accepter | Toujours accepter pour ce site | Préférences

Si le service a été refusé :

🤫

Vous avez choisi de bloquer les fenêtres YouTube (embed)

Accepter | Toujours accepter pour ce site | Préférences

Attention : si l'internaute retire son consentement par la suite, la fenêtre restera chargée et ne sera pas masquée.

Chargement de scripts

Certains services nécessitent de placer une balise <script> à un (ou plusieurs) endroit(s) de la page. Procédez comme pour une <iframe> en ajoutant l'identifiant du service associé dans l'attribut data-discreto, et en renommant l'attribut src en data-src.

Contrairement à l'iframe, aucun message ne sera affiché avant le consentement de l'internaute, mais vous pouvez ajouter vous-même un message dans un élément HTML voisin.

Exemple :

Pour appeler un script qui nécessite d'accepter au préalable le service _chatbot, et prévoir un message en cas de refus :

<!-- Script chargé une fois le service accepté -->
<script data-discreto="_chatbot" data-src="/chat/bot.js"></script>

<!-- Paragraphe masqué une fois le service accepté -->
<div data-discreto="_chatbot" data-class="hidden" class="warning">
  <p>Veuillez accepter les conditions d'utilisation de notre
  <strong>Chatbot</strong> pour démarrer une discussion avec un
  conseiller.</p>
  <nav class="left btns">
    <button onclick="discreto.prefs()"
        type="button">Préférences</button>
    <button onclick="discreto.update('_chatbot', true)"
                type="button" class="ok">Accepter</button>
  </nav>
</div>

Résultat :

Veuillez accepter les conditions d'utilisation de notre Chatbot pour démarrer une discussion avec un conseiller.

Bonjour, comment puis-je vous aider aujourd'hui ?

Attention : comme pour les <iframe>, si l'internaute retire son consentement par la suite, le script ne pourra être déchargé et sera toujours actif sur la page.

Méthodes

Les méthodes suivantes sont supportées :

start(conf)
Lancer discreto avec une configuration personnalisée conf
update(name, on, store)
Met à jour la préférence pour le service name
prefs(showHide)
Affiche/masque les préférences
popup(showHide)
Affiche/masque la fenêtre
clean()
Ferme et détruit la fenêtre

Exemples :

  • discreto.update('youtube', true)
    Autorise les iframes YouTube pour cette page
  • discreto.update('soundcloud', true, true)
    Autorise toutes les iframes SoundCloud
  • discreto.prefs()
    Affiche les préférences

Événements

Vous pouvez écouter les événements discreto et discreto-service au niveau du document pour être informé des choix de l'internaute.

Ces événements sont déclenchés dès que l'internaute enregistre ses choix, puis immédiatement sur les pages suivantes.

Contrairement aux balises HTML et aux promesses, il n'est pas possible d'utiliser d'astérisque (*) pour les noms des événements.

// Écouter un service en particulier
document.addEventListener('discreto-matomo', (event) => {

  // event.detail contient le statut (booléen) pour ce service
  let status = event.detail
  console.info('matomo', status ? 'accepté' : 'refusé')

})

// Écouter tous les services
document.addEventListener('discreto', (event) => {

  // event.detail contient le nom (name) et le statut (on) du service
  let service = event.detail.name,
      status  = event.detail.on
  console.info(service, status ? 'accepté' : 'refusé')

})

Attention : à partir du moment où l'internaute a défini ses préférences, les événements seront déclenchés dès la fin de chargement du DOM. Assurez-vous d'écouter suffisamment tôt, sinon utilisez plutôt les promesses.

Promesses

Les promesses (Promise) offrent plus de souplesse, et permettent de vérifier qu'un service est activé ou d'en être informé lorsqu'il le devient, et ce même après le chargement du DOM.

Si l'un des services est déjà activé, la promesse est immédiatement résolue. Si aucun service n'est actif et que l'internaute a déjà enregistré ses choix, la promesse est immédiatement rejetée. Sinon la promesse est résolue ou rejetée à l'enregistrement des préférences.

discreto.when('youtube-api').then(() => {

  // Résolu immédiatement (si le service est activé)
  // ou dès l'accord de l'internaute
  player.playVideo()

}, () => {

  // Rejeté immédiatement (si le service est refusé)
  // ou dès le refus de l'internaute
  alert("Vous avez refusé le service YouTube :(")

})

Comme pour les balises HTML, on peut tirer parti du wildcard pour autoriser un service ou ses variantes. Dans ce cas la promesse est résolue avec le code du premier service accepté.

Exemple :

Pour attendre que l'internaute ait accepté Google Analytics (analytics) ou sa variante anonymisée (analytics-anon), on utilisera discreto.when('analytics*') :

button.addEventListener('click', (event) => {

  // Analytics disponible ?
  discreto.when('analytics*').then((service) => {
    console.info('Le service', service, 'est actif')
    gtag('event', 'click', button.getAttribute('data-click'))
  }, () => {
    // Il est toujours bon de traiter les promesses rejetées
  })

})

Documentation

Vous voulez en savoir plus sur la configuration des services ? Vous souhaitez ajouter des services personnalisés ? La documentation est là pour ça.

Services supportés

Analyse d'audience

Les outils d'analyse d'audience qui supporte l'anonymisation des données (et qui de fait peuvent être déclenchées sans le consentement préalable de l'internaute) sont indiqués par l'icone .

Google Analytics
analytics
analytics-anon
analyticsGA
analyticsGA-anon

Analyse d'audience (gtag ou ga)

Anonymisation possible sous conditions
analytics.google.com

Matomo
matomo
matomo-anon

Analyse d'audience (anciennement Piwik)

Anonymisation à configurer côté serveur
fr.matomo.org

HotJar
hotjar

Analyse d'audience

Anonymisation systématique
help.hotjar.com

Mautic
mautic

Marketing automation

www.mautic.org

Facebook Pixel
facebookPixel

Analyse d'audience et ciblage publicitaire (indissociables)

www.facebook.com/business/learn/facebook-ads-pixel

Twitter Analytics
twitterPixel

Analyse d'audience (avec ciblage publicitaire possible via Twitter Ads)

analytics.twitter.com/about

Xiti
xiti
xiti-anon

Analyse d'audience

Anonymisation possible
www.xiti.com

Partage et réseaux sociaux

Facebook
facebook

Compteur de likes et de partages

developers.facebook.com/docs/plugins/

LinkedIn
linkedin

Compteur de partages

docs.microsoft.com/fr-fr/linkedin/consumer/integrations/self-serve/share-on-linkedin

Pinterest
pinterest

Partage d'image sur Pinterest

developers.pinterest.com/docs/widgets/save/

Twitter
twitter

Compteur de partages

developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview

AddThis
addthis

Partage de liens multi-réseaux

www.addthis.com

AddToAny
addtoany

Partage de liens multi-réseaux

www.addtoany.com

ShareThis
sharethis

Partage de liens multi-réseaux

sharethis.com/fr/

Lecteurs multimédias

DailyMotion
dailymotion
dailymotion-api

API et vidéos intégrées

developer.dailymotion.com

Vimeo
vimeo
vimeo-api

API et vidéos intégrées

developer.vimeo.com/fr/

YouTube
youtube
youtube-api

API, vidéos intégrées et statistiques

www.youtube.com/intl/fr/yt/dev/api-resources/

SoundCloud
soundcloud
soundcloud-api

API et lecteur audio

developers.soundcloud.com/docs/api/html5-widget

Lecteurs de documents

Calaméo
calameo

Magazines et PDF à feuilleter en ligne

support.calameo.com/hc/fr/sections/201008608-API

Issuu
issuu

PDF à feuilleter en ligne

developer.issuu.com

Prezi
prezi

Présentations interactives en ligne

prezi.github.io/prezi-player

SlideShare
slideshare

Présentations en ligne

fr.slideshare.net/developers

Ciblage publicitaire

discreto n'est pas un bloqueur de publicités, et n'a aucune vocation à le devenir. Seul le ciblage (qui donne lieu à des « annonces personnalisées ») est réglementé.

Si vous n'affichez sur votre site que des annonces non personnalisées, vous n'avez pas à demander le consentement de l'internaute, et n'êtes pas obliger de déclarer le service dans discreto.

Les services permettant de désactiver les annonces personnalisées au niveau du compte pour tous les internautes sont indiqués par l'icone . Pour les autres, l'adresse d'opt-out est indiquée par l'icone (elle est également présente dans la description du service lorsque l'internaute clique sur en savoir plus).

AdSense
adsense
adsense-optout

Diffusion de contenus publicitaires avec ciblage

Possibilité de désactiver le ciblage global
adssettings.google.com
developers.google.com/adsense

AdWords
adwords

Ciblage publicitaire et remarketing

adssettings.google.com
developers.google.com/adwords/api/docs

Amazon Advertising
amazonAds

Diffusion de contenus publicitaires et ciblage sur Amazon

www.amazon.com/adprefs
advertising.amazon.com/about-api

Criteo
criteo

Diffusion de contenus publicitaires et ciblage

www.criteo.com/fr/privacy/
support.criteo.com/s/article/360001223829-Introduction-to-the-Criteo-Marketing-API

Facebook Pixel
facebookPixel

Analyse d'audience et ciblage publicitaire (indissociables)

www.facebook.com/help/568137493302217
www.facebook.com/business/learn/facebook-ads-pixel

Microsft Advertising
microsoftAds

Diffusion de contenus publicitaires et ciblage (anciennement Bing Ads)

choice.microsoft.com
docs.microsoft.com/fr-fr/advertising/guides/reference

Twitter Ads
twitterAds

Diffusion de contenus publicitaires et ciblage sur Twitter

twitter.com/settings/account/personalization
developer.twitter.com/en/docs/ads/general/overview

Commentaires

Disqus
disqus

Fils de commentaires pour utilisateurs Disqus

disqus.com/api/docs/

Facebook Comments
facebookComments

Fils de commentaires pour utilisateurs Facebook

developers.facebook.com/docs/plugins/comments/

Divers

Google Maps
googleMaps
googleMapsAPI

API Google Maps et cartes intégrées

cloud.google.com/maps-platform/maps/

Google ReCaptcha
recaptcha
recaptchaV2

Validation des formulaire anti-robots

www.google.com/recaptcha/intro/v3.html

Google Fonts
googleFonts

Utilisation de polices web

developers.google.com/fonts

Adobe TypeKit
adobeTypekit

Utilisation de polices web

fonts.adobe.com/docs/api

Personnalisé

Si vous utilisez un tracker ou un service qui n'est pas (encore) supporté, il est toujours possible de le charger via l'une des méthodes ci-dessous :

Balise GTM
gtm

Déclenchement d'une balise Google Tag Manager

Fenêtre intégrée
iframe

Chargement d'une iframe cachée

Script
script

Chargement d'un script Javascript

HTML
html

Injection d'un code HTML personnalisé (qui peut inclure du code Javascript)

Configuration avancée

La configuration peut être passée de deux façons :

  • dans une variable globale discretoConf qui doit être disponible avant le chargement du script ;
  • via la méthode discreto.start
// Chargement automatique au DOM Ready
window.discretoConf = { CONFIG }
// Ou déclenchement manuel (à appeler après le chargement du script)
discreto.start({ CONFIG })

La configuration peut être :

  • un objet Javascript contenant 4 sections (toutes optionnelles) :
    gui
    les préférences de l'interface
    cookie
    les paramètres du cookie
    ids
    les identifiants ou paramètres des comptes
    services
    les services soumis au consentement
  • une URL vers un fichier JSON décrivant l'objet de configuration :
    URL absolue
    "/conf/discreto.json"
    URL relative
    "./discreto.json"
    site tiers
    "https://domain.tld/discreto.json"
  • un pointeur vers une balise GTM contenant la configuration :
    Compte GTM
    GTM-XXXXXXX
    Identifiant déclencheur
    config
    Résultat
    "gtm://GTM-XXXXXXX/config"

Personnalisation de l'interface

Tous les paramètres de l'interface (gui) sont optionnels :

gui: {
  // Langue par défaut si celle de l'internaute n'est pas supportée
  // pour l'instant uniquement français ou anglais
  lang:  'fr' | 'en',
  // Position de la fenêtre (par défaut en bas à gauche)
  pos:   'left' | 'right' | 'center' | 'bottom' | 'banner',
  // URL du logo à afficher
  logo:  false | '/img/logo-discreto.png',
  // Obliger l'internaute à répondre
  block: false | true,
  // Masque complètement à la sauvegarde
  hide:  false | true,
  // Précoche les services à l'affichage des préférences
  urge:  false | true,
  // Affiche après un temps (en secondes) ou un scroll (en pixels)
  wait:  false | 2 | '100px',
  // URL de la feuille de style (par défaut 'auto')
  css:   'auto' | '/discreto/discreto.min.css'
}

Tous les paramètres du cookie (cookie) sont également optionnels :

cookie: {
  // Nom du cookie utilisé (optionnel, par défaut 'discreto')
  name:  'discreto',
  // Nombre de jours de validité du cookie (par défaut 365)
  days:  365,
  // Répertoire racine du cookie (par défaut la racine du site, '/')
  path:  '/',
  // Nom du service à utiliser pour les événements (choix, boutons)
  // de préférence anonymisé pour être actif par défaut
  track: false | 'analytics-anon' | 'matomo-anon',
  // Liste des sous-domaines sur lesquels discreto est installé
  // et qui partagent les mêmes préférences
  wild:  [ 'sub1.domain.ltd', 'sub2.domain.ltd' ],
  // Activation du point de partage (par défaut non)
  share: false,
  // URL du point de partage (si le partage est activé)
  url:   '//cookie.discre.to'
}

Identifiants des services et gestionnaires

Viennent ensuite les identifiants ou paramètres des comptes ou gestionnaires de tags utilisés (pour les services qui le requièrent). Seul Matomo nécessite de passer 2 arguments en paramètres : l'URL et l'ID du site.

ids: {
  // ID du compte GTM
  gtm:       'GTM-XXXXXXX',
  // ID de suivi Analytics
  analytics: 'UA-XXXXXXX-Y',
  // Configuration Matomo
  matomo: {
    url:     '//matomo.domain.ltd',
    id:      1
  },
  // ID du conteneur HTML (optionnel)
  html:      'custom-tracker'
}

Liste des services et paramètres

Enfin, la liste des services utilisés sur le site identifiés par leur nom de code. Ce code provient soit des services nativement supportés, soit est choisi de façon unique et préfixé par _.

Seuls les choix relatifs aux services nativement supportés peuvent être enregistrés sur discre.to (et repris sur les sites suivants). Les choix relatifs aux services personnalisés ne sont conservés que dans le cookie du site consulté.

services: {
  'analytics-anon': { OPTS }, // Variante anonymisée d'Analytics
  analytics:        { OPTS }, // Analytics sans anonymisation
  _customTracker:   { OPTS }  // Tracker personnalisé
}

Chaque service est défini par :

une ou plusieurs catégories
types
Analyse d'audience (audience), partage et réseaux (social), ciblage publicitaire (ads), vidéos intégrées (media), lecteurs de documents (reader), fils de commentaires (comments) ou autres (misc)
un drapeau indiquant le respect de l'anonymat
anon
Pour indiquer que les données collectées sont anonymisées ou ne contiennent aucune information personnelle
un drapeau pour les cookies indispensables
force
Pour indiquer que certains services sont indispensables au bon fonctionnement du site
une méthode de chargement
tag
Le nom de code de l'API du service ou gtm pour une balise GTM

D'autres paramètres optionnels peuvent aussi être définis :

un argument pour l'activation du service
load
La liste des arguments à passer au chargement : événements (pour l'audience), ID du déclencheur GTM (pour la méthode gtm), URL du script ou de l'<iframe>, etc.
un argument pour la sauvegarde des préférences
save
La liste des arguments à passer lors de la première activation (et à chaque mise à jour des préférences)
une liste d'exclusion optionnelle
excl
La liste des autres services rendus obsolètes (ou en doublon) en cas d'activation
analytics: {
  // Types de service
  types: [ 'audience' ],
  // Statistiques anonymisée et pas de ciblage
  anon:  false,
  // Cookie indispensable
  force: false,
  // Identifiant du loader
  tag:   'gtm',
  // Ici pour GTM, identifiant du déclencheur
  load:  'analytics',
  // Déclencheur différent lors de la sauvegarde des préférences
  save:  'analytics-ip',
  // Liste d'exclusion (Analytics rend Analytics anonymisé obsolète)
  excl:  [ 'analytics-anonymous' ]
}

Vidéos et médias intégrés

Pour les vidéos ou lecteurs de documents intégrées (embed, par exemple youtube), l'ajout du service ne suffit pas et il est nécessaire d'adapter les codes HTML fournis par les plateformes. Voir la section précédente Balises HTML.

Services personnalisés

Vous pouvez ajouter vos propres services en utilisant l'une des 4 méthodes fournies : gtm, iframe, script et html.

Un service personnalisé doit posséder un identifiant unique commençant par le caractère _, et disposer d'un titre (name) et d'un texte de description (about, affiché au clic sur le bouton en savoir plus) :

_customTracker: {
  // Titre du service
  name:  "My Custom Tracker",
  // Description détaillée du service
  about: "Description du service (finalité, durée de conservation, \
noms des cookies déposés et durée de validité)"
  types: [ 'media', 'audience' ],
  tag:   'script',
  load:  'https://track.domain.ltd/'
}

Il est possible de définir des variantes par langue pour le nom et la description :

_customTracker: {
  // Titre du service
  name:  { en: "My Custom Tracker", fr: "Mon traceur perso" },
  // Description détaillée du service
  about: { en: "Yeah yeah", fr: "Oui Oui" },
  types: [ 'media', 'audience' ],
  tag:   'script',
  load:  'https://track.domain.ltd/'
}

Traductions et messages

Si vous souhaitez modifier les textes affichés dans la fenêtre de consentement, vous pouvez définir un objet global discretoLocale qui surchargera les traductions par défaut.

Référez-vous au code source sur Github pour connaître l'ensemble des messages, boutons et titres qu'il est possible de modifier.

window.discretoLocale = {
  fr: {
    msg: {
      first: "Nous respectons votre vie privée, aussi seuls les \
services de statistiques anonymisés ainsi que ceux indispensables \
au bon fonctionnement du site ont été chargés. Vous pouvez Tout \
accepter ou Paramétrer vos choix."
      dnt:   "Damned, vous avez activer l'option Do Not Track ! \
Nous respectons votre choix et aucun service collectant des données \
n'a encore été activé. Choisissez de naviguer Discreto, cela nous \
permettra d'avoir tout de même des statistiques anonymisées de \
votre visite !"
      // Les textes des autres messages sont inchangés
    },
    btns: {
      discreto: "Va pour discreto",
      prefs:    "Fais voir les choix",
      cognito:  "Yes, j'accepte tout !"
      // Les intitulés des autres boutons sont inchangés
    }
  }
}

Thème personnalisé

Si vous souhaitez modifier l'apparence de la popup, vous pouvez utiliser votre propre feuille de style CSS (en indiquant son chemin dans l'option gui.css).

Référez-vous au thème par défaut (en Sass) sur Github pour créer le vôtre.

Google Tag Manager

discreto et GTM peuvent dialoguer via leurs APIs respectives. Les consignes sont envoyées à GTM via des événements personnalisés, en retour GTM peut envoyer des instructions ou une configuration à discreto.

Création de la variable service

Les informations à transmettre à GTM sont stockées dans une variable nommée service des événements, qu'il faut déclarer au préalable. Commencez donc par créer une Nouvelle Variable :

Titre
Service
Type
Variable de la couche de données
Nom de la variable
service
Version
2
Valeur par défaut
Ne pas définir

Création des déclencheurs

Pour chaque service/balise, créez ensuite un Nouveau déclencheur, en lui attribuant un identifiant unique :

Titre
Nom du service
Type
Événement personnalisé
Nom de l'événement
discreto
Conditions d'exécution
Certains événements personnalisés
Exécuter lorsque
Service contient |identifiant-du-service|
(notez les symboles | de part et d'autre de l'identifiant)

Terminez en attachant cette balise à son déclencheur.

Attention : si la balise dispose déjà d'un déclencheur DOM Ready, supprimez-le, sinon elle sera chargée systématiquement (et potentiellement deux fois) !

Exemple

Pour ajouter une balise Google Analytics avec anonymisation, cela donne :

  1. Créez un déclencheur avec un identifiant unique, par exemple analytics-anonymous :

    Type
    Événement personnalisé
    Nom de l'événement
    discreto
    Conditions d'exécution
    Certains événements personnalisés
    Exécuter lorsque
    Service contient |analytics-anonymous|
  2. Créez une balise Google Analytics :

    Type de balise
    Google Analytics
    Type de suivi
    Page vue
    Autoriser le remplacement
    Oui
    Paramètre Google Analytics
    {{UA}} (si votre ID de suivi est déjà défini dans une variable)
    ID de suivi
    UA-XXXXXXX-Y (sinon)
  3. Ajoutez un champ personnalisé anonymizeIp pour anonymiser les adresses IP :

    Nom du champ
    anonymizeIp
    Valeur
    true
  4. Ajoutez à cette balise le déclencheur créé précédement, puis cliquez sur Enregistrer.

Il ne vous reste plus qu'à Publier les changements ou tester avec le Mode aperçu de GTM.

L'anonymat selon Google peut être discutable, aussi le compte Analytics associé doit-il respecter certaines conditions, à retrouver dans à propos de l'anonymisation.

Configuration

Vous avez la possibilité de stocker la configuration de discreto directement dans une balise HTML personnalisé. Ainsi aucune intervention sur votre site ne sera requise lorsque vous aurez besoin d'ajouter ou de supprimer un service (une balise).

  1. Commencez par créer un déclencheur personnalisé en lui donnant un identifiant unique (par exemple config) :

    Type
    Événement personnalisé
    Nom de l'événement
    discreto
    Conditions d'exécution
    Certains événements personnalisés
    Exécuter lorsque
    Service contient |config|
  2. Créez ensuite une balise HTML personnalisé dans laquelle vous placerez le code HTML obtenu via l'assistant de configuration, et ajoutez lui le déclencheur créé précédemment :

    <script>
    discreto.start({ CONFIG })
    </script>

À propos de l'anonymisation

Les données collectées par les services installés sur les sites (qu'on appelle couramment des trackers ou traceurs) peuvent inclure :

  • des informations techniques (votre navigateur, votre OS, la taille de votre écran ou encore la langue de votre système) ;
  • des données en rapport avec votre historique et votre activité sur le site (temps passé, nombre de pages vues, boutons cliqués) ;
  • et des informations plus personnelles (votre adresse IP et donc votre position approximative, voire votre identifiant Google, si vous êtes connecté-e à Gmail ou Chrome, ou votre adresse postale si vous passez une commande en ligne).

Anonymise-moi !

Le droit à l'anonymat consiste à se limiter aux deux premières catégories, et à ne les traiter que de façon statistiques (le mode Discreto), et l'option de retrait (opt-out) consiste à pouvoir s'opposer même à ce traitement statistiques (et donc être Invisible).

Pour garantir cet anonymat, les fournisseurs de services doivent montrer patte blanche, et mettre en place des mécanismes d'anonymisation pour supprimer ou tronquer toutes les données personnelles (dont l'adresse IP ou la position) qui pourrait permettre d'identifier une personne.

Elles ne doivent par ailleurs pas partager ces informations anonymisées avec des services qui eux font du ciblage publicitaire, sinon à quoi bon...

Anonymisation des adresses IP

L'adresse IP est considérée à juste titre comme une donnée personnelle : c'est un numéro qui identifie uniquement votre logement ou votre bureau, et il donne une indication géographique qui peut être assez précise. Pourtant c'est l'une des informations les plus simples à collecter sur Internet (et elle l'est presque tout le temps).

La réglementation précise qu'une anonymisation des IP est suffisante si elle ne permet pas une localisation plus fine que l'échelle d'une ville. Cela correspondrait à supprimer la moitié de l'adresse IPv4 (2 octets sur les 4), et plus encore pour l'IPv6 (12 octets sur les 16).

Matomo est un des rares services à proposer cela, les autres, comme Google Analytics, en garde un peu plus (ou garde tout...).

La méthode d'anonymisation des adresses IPv6 n'est pas encore encadrée, en revanche pour les adresses IPv4, la position de la CNIL a évolué avec la RGPD, et la suppression du dernier octet suffit (contre 2 octets auparavant).

Respect du calendrier

Outre la finalité envisagée et les partenaires éventuels avec qui elles sont susceptibles d'être échangées ou cédées, la réglementation impose aux fournisseurs de fixer une durée maximale de conservation des données personnelles, et celle-ci ne peut légalement dépasser 13 mois.

Les données statistiques anonymisées tirées de ces données peuvent en revanche être conservées plus longtemps.

Une fois encore, Matomo joue pleinement le jeu quand d'autres, devinez lesquels, la joue borderline.

Google Analytics

Google Analytics supporte (dans toutes ses versions) une option d'anonymisation des adresses IP (anonymizeIp ou anonymize_ip depuis gtag). Elle consiste à supprimer le dernier octet de votre adresse IPv4 (et les 10 derniers de votre adresse IPv6), ce qui est conforme avec la réglementation.

On continue avec la durée de conservation (disponible dans Admin > Propriété > ID de suivi > Durée de rétention). La réglementation fixe un maximum de 13 mois, allons bon ! Google vous propose un minimum de... 14 mois. Caramba !

Allez on termine, soyez humbles dans les données que vous souhaitez collecter, et ne cédez pas à la tentation. Google vous propose de cliquer ici pour obtenir des données démographiques et les centres d'intérêts de vos visiteurs ? Et tout ça gratuitement ?!

Refusez, cela implique un recoupement des données d'Analytics avec ses services de ciblage publicitaire (dont DoubleClick)... avec mon anonymisation j'avais l'air d'un c**, ma mèreuh.

En résumé : pour que Google Analytics puisse prétendre au titre d'outil de statistiques anonymisées il faut a minima :

  • Activer l'option d'anonymisation des adresses (discreto le fait pour vous) ;
  • Fixer la durée de rétention à 14 mois (c'est presque 13 et ça porte moins malheur).

La CNIL ne considère pas (encore) que cela suffit à ce que Google Analytics soit exempté du consentement préalable : outre la durée de vie, c'est surtout le recoupement avec d'autres traitements qui pose problème.

Matomo

On passe au bon élève, Matomo ! Quand il y a moins d'enjeux financiers, il y a un plus grand respect des libertés individuelles... Ils ont même un tutoriel pour expliquer la marche à suivre : fr.matomo.org/gdpr/

En résumé : suivez le guide de Matomo, et si vous avez activé l'anonymisation des adresses IP à 2 octets ou plus, vous êtes irréprochables !

Xiti & HotJar

Xiti et HotJar supportent également l'anonymisation des adresses IP, mais comme pour Analytics elle se limite à tronquer le dernier octet. Chez Xiti, les durées de conservation sont courtes (6 mois) et la géolocalisation est limitée à la ville ou la région (selon le pays).

En résumé : suivez le guide de AT Internet, activez l'anonymisation des adresses IP, et vous êtes déjà bien.

Google AdSense

Google AdSense est un des rares diffuseurs de contenus publicitaires à proposer une option globale d'opt-out. Il est possible depuis le back-office de votre compte de désactiver le ciblage publicitaire. Les internautes verront tous des annonces non personnalisées (et c'est tant mieux).

Si vous ne désactivez pas le ciblage, les encarts publicitaires ne seront affichés qu'une fois le consentement obtenu. Les emplacements réservés aux encarts publicitaires doivent toujours être présents dans le code HTML de la page, mais vous devez retirer les balises <script> pour ne laisser que la balise <ins> :

<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"></ins>

Vous pouvez omettre l'attribut data-ad-client, qui sera défini globalement par discreto pour tous les emplacements de la page.

Si vous désactivez le ciblage, vous n'avez pas à demander de consentement, et vous n'avez pas besoin de déclarer AdSense dans discreto. Vous pouvez dans ce cas utiliser le code tel qu'il vous a été fourni par Google.

En résumé : désactiver le ciblage publicitaire par défaut, et vous pourrez continuer à diffuser des publicités sur votre site en accord avec la règlementation (et votre conscience).

À propos du partage

L'option de partage vous permet d'appliquer vos préférences par défaut lorsque vous naviguez pour la première fois sur un site également équipé de discreto. Cette option n'est pas activée par défaut et ne requiert qu'une fois votre consentement par navigateur.

Comment ça marche ?

Lorsque vous naviguez sur un nouveau site et que vous définissez vos préférences, un cookie de consentement est déposé dans votre navigateur afin de s'en souvenir sur les autres pages, et lors de vos prochaines visites (jusqu'à 13 mois).

Lorsque vous activez l'option Enregistrer mes choix sur discre.to, un second cookie est déposé (ou mis à jour) dans votre navigateur, associé au domaine discre.to. Ainsi vos choix seront automatiquement appliqués sur les sites suivants, et il ne vous sera demandé votre consentement que pour les services que vous n'aviez pas encore rencontrés, ou pour ceux propres au site consulté.

Pas de traces

Ces cookies ne contiennent aucune information personnelle vous concernant, ni même votre adresse IP tronquée, uniquement la liste de vos choix (oui à tel service, non à tel autre). Les serveurs de discre.to ne conservent aucun enregistrement de vos choix (ils n'existent que dans le cookie de votre navigateur), et il n'en est fait aucun traitement.

Des statistiques anonymisées sont en revanche réalisées pour mesurer l'utilisation du service et référencer les sites qui l'ont activé. Votre adresse IP est conservée avec la date et l'heure dans les logs de connexion d'OVH pendant 1 an (obligation imposée aux hébergeurs).

La charte d'OVH relative aux données personelles est disponible à l'adresse suivante :
www.ovh.com/fr/protection-donnees-personnelles/

Charte d'utilisation

Le service de partage des préférences discreto ainsi que l'hébergement de ses sources sont mis à disposition de tous les éditeurs et webmasters de sites Internet qui le désirent, à condition de respecter les règles suivantes :

  • ne pas porter atteinte, intentionnellement ou non, à l'infrastructure et aux serveurs qui hébergent le site discre.to et ses services (repo.discre.to et cookie.discre.to) ;
  • ne pas tromper les internautes en activant des services qui ne respectent pas leurs choix, en associant des services à des catégories trompeuses ou en indiquant comme anonymes des services qui ne le sont pas ;
  • en distribuant des copies ou des versions modifiées du logiciel sans conserver la licence MIT qui l'accompagne ;
  • en participant directement ou indirectement à toute action qui contreviendrait aux règles précédentes.

En cas de manquements à la présente charte, nous nous réservons le droit de désactiver l'option de partage pour votre site.

Allez, vous n'allez rien faire de mal du tout, et on a tous à y gagner !

Merci qui ?

Vous pouvez m'envoyer des mots doux ou des mercis, ça fait toujours plaisir : merci@discre.to. Mais vous pouvez aussi :

Contribuer au projet

À nouveaux acteurs, nouveaux trackers, et à nouvelles versions des navigateurs... nouveaux bugs.
Rejoignez la communauté de développeurs, de testeurs et de traducteurs sur Github.

Louer mes services

Besoin d'aide pour déployer discreto ? Des conseils pour comprendre la RGPD et mettre en œuvre les moyens pour s'y conformer ? Je peux vous aider.

Faire un don !

Ça fait toujours plaisir aussi, et en plus la maison accepte toutes les devises !

Tipeee
tipeee.com/gregd
Patreon
patreon.com/gregdeback
PayPal
https://www.paypal.me/gregdeback
Bitcoin
1FTgsZHRFVwBroH45JHSvH9EYVGXB1dmbN
ou bc1qcurqksz4cnmudezfpe3ekv7dq7g5vc4wc4hw6u
Bitcoin Cash
qr3munag9mmx8y29kd9m849e9gdncr0lz5yraa3drv
Ethereum/Tether
0x3270a52F8c51c0723D73a833d0E17DDF78D92d6a
Litecoin
LKd9HtxM6BdAN5JpkNvJxVDRhkipCH3vXc
XRP
rUdrfCLLYvZFWhKCLHvH26WUgjSmXd3jZ9

Don avec facture

Vous êtes une entreprise ou une association ? Vous pouvez recevoir une facture avec TVA pour tout don libre versé à notre sponsor eko &co au titre de l'utilisation du service discreto.

Indiquez simplement votre email de contact dans l'intitulé du virement, et demandez votre facture :

eko &co
eko &co SARL
24, rue Louis Blanc - 75010 Paris
RCS Paris
509 452 108
Banque
CCM Paris République
8, boulevard Voltaire - 75011 Paris
IBAN
FR76 1027 8060 5900 0201 5870 171
BIC
CMCIFR2A
Intitulé
Utilisation du service discreto + adresse email de contact

Et j'en profite

Moi aussi j'ai des merci ! À Thomas pour le logo, à tous ceux ont (ou vont) m'aider à tester, et aux auteurs des outils libre utilisées, notamment :

Sass
le préprocesseur CSS (Licence MIT)
Webpack
le compilateur JS (Licence MIT)
Mocha
les tests JS/Node (Licence MIT)
Solarized
la palette solarisée (Licence MIT)
Line Awesome
les icones (Licence « Good Boy »)
highlight.js
les lignes de codes en couleur (Licence BSD 3-Clause)
et Tarte au citron
pour l'inspiration (Licence MIT)