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 !

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.

Ouvrez le site à vérifier dans un onglet de navigation privée
Attendez que s'affiche la popup de consentement
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...).

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

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 :

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|
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)
Ajoutez un champ personnalisé anonymizeIp pour anonymiser les adresses IP :

Nom du champ
anonymizeIp

Valeur
true
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).

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|
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...

À lire sur le site de la CNIL :

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 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).

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.com/gregd
: patreon.com/gregdeback
: https://www.paypal.me/gregdeback

: 1FTgsZHRFVwBroH45JHSvH9EYVGXB1dmbN
ou bc1qcurqksz4cnmudezfpe3ekv7dq7g5vc4wc4hw6u
: qr3munag9mmx8y29kd9m849e9gdncr0lz5yraa3drv
: 0x3270a52F8c51c0723D73a833d0E17DDF78D92d6a
: LKd9HtxM6BdAN5JpkNvJxVDRhkipCH3vXc
: 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 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)

Sinon il y a discreto !

Dernière version

WordPress

Téléchargement

Rejoignez la communauté

Personnalisation de l'interface

Configuration du cookie

Options de chargement

Tadam !

Balises HTML

Vidéos intégrées et liseuses

Chargement de scripts

Méthodes

Événements

Promesses

Services supportés

Analyse d'audience

Partage et réseaux sociaux

Lecteurs multimédias

Lecteurs de documents

Ciblage publicitaire

Commentaires

Divers

Personnalisé

Configuration avancée

Personnalisation de l'interface

Configuration du cookie

Identifiants des services et gestionnaires

Liste des services et paramètres

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

Services personnalisés

Traductions et messages

Thème personnalisé

Création de la variable service

Création des déclencheurs

Exemple

Configuration

Anonymise-moi !

Anonymisation des adresses IP

Respect du calendrier

Google Analytics

Matomo

Xiti & HotJar

Google AdSense

Comment ça marche ?

Pas de traces

Charte d'utilisation

Contribuer au projet

Louer mes services

Faire un don !

Don avec facture

Et j'en profite

Création de la variable `service`