Lecture du statut du consentement

Pour garantir une utilisation conforme à la protection des données des services tiers intégrés, le bloqueur de contenu n’affiche ces contenus qu’après que l’utilisateur a donné son accord. Cette fonctionnalité intégrée nécessite toutefois que les contenus soient intégrés au site web via une iFrame. Pour que les services directement intégrés au site web soient également soumis au consentement du visiteur, conformément à la réglementation sur la protection des données, les informations nécessaires peuvent être lues à partir du DataLayer.

Par exemple, tu ne lances un lecteur vidéo intégré, des widgets de carte ou des outils de chat qu’une fois que tu as obtenu le consentement spécifique pour ça.

Le tracker consent manager etracker peut donc non seulement transmettre les consentements des visiteurs au tracker tag manager etracker, mais aussi à ton propre code JavaScript ou à d’autres systèmes de gestion de balises intégrés à ton site web.

Fonctionnement

Le tracker consent manager ajoute une entrée dans le tableau « window.dataLayer » dans deux cas :

1. À chaque consultation de la page, avec l’état actuellement enregistré.
2. À chaque modification, c’est-à-dire lorsqu’un visiteur change son choix dans la fenêtre de consentement ou autorise l’affichage du Contenu iFrame bloqué via la fenêtre superposée.

L’entrée s’appelle « etConsentStatus ». Le champ « action » t’indique laquelle des deux situations s’applique (onInitialPageLoad / onUpdateServices).

Si le visiteur n’a pas encore pris de décision, l’entrée ne contient au départ que event et action:

{
 "event": "etConsentStatus",
 "action": "onInitialPageLoad" 
}

Pour chaque service faisant l’objet d’une décision, l’entrée contient une clé composée de la catégorie de consentement et de l’identifiant du prestataire (par exemple performance:youtube) avec la valeur true (consentement accordé) ou false (consentement refusé).

Exemple d’entrée lors de l’affichage de la page avec une décision enregistrée :

{
  "event": "etConsentStatus",
  "action": "onInitialPageLoad",
  "statistics:etracker": false,
  "performance:youtube": false,
  "marketing:123456": false
}

Exemple d’affichage après l’enregistrement dans la boîte de dialogue de consentement :

{
  "event": "etConsentStatus",
  "action": "onUpdateServices",
  "statistics:etracker": true,
  "performance:youtube": true,
  "marketing:123456": false
}

Aperçu des domaines

Voici comment trouver les clés de tes services

La catégorie correspond à la catégorie de consentement du service :

• Marketing : marketing
• Côté fonctionnalité : performance
• Statistiques : statistics
• Indispensable : no_consent

Tu trouveras l’identifiant du fournisseur dans l’etracker tag manager, sous « Mes fournisseurs », dans la colonne « ID ». Il peut s’agir d’un nom comme «youtube » (pour les fournisseurs standard prédéfinis) ou d’un numéro (pour tes propres fournisseurs).

Le moyen le plus rapide de voir les clés de ton site web, c’est de consulter l’état enregistré dans la console du navigateur. Pour être sûr que TOUTES les entrées s’affichent, clique d’abord sur le bouton « Tout autoriser » dans la boîte de dialogue de consentement.

localStorage.getItem('et_oi_services');

Cette valeur a les mêmes clés que l’entrée dataLayer. Pour en savoir plus, consulte la section « Cookies utilisés ».

Ajouter un fournisseur en utilisant une pseudo-balise dans l’etracker tag manager

Pour qu’un fournisseur apparaisse dans la boîte de dialogue de consentement, crée une balise « Custom » vide, comme décrit dans la section « Intégration de balises tierces » (nécessite la version Enterprise d’etracker analytics) et attribue à cette balise la catégorie de consentement souhaitée ainsi que le prestataire correspondant. Il suffit que la balise soit publiée ; elle n’a pas besoin d’être déclenchée par un trigger.

Réagir indirectement au statut du consentement avec le tracker tag manager etracker

Tu n’as besoin de l’entrée dataLayer dans l’etracker tag manager que si une balise doit lire le statut de consentement, au lieu d’y être directement liée (comme d’habitude) :

• En cas de refus ou de révocation, il faut prévoir une journée pour, par exemple, retirer un lecteur en cours de lecture ou intégrer un élément de remplacement sur le site web.
• Une journée doit dépendre du statut d’un autre service que celui auquel elle est liée.

Pour ça, fais comme ça :

1. Créez une variable. Créez une variable de type « Variable de couche de données » et saisissez la clé de service (par exemple, « Nom de la variable de couche de données ») dans le champ « Nom de la variable de couche de données ».performance:youtube 1. Activez l’option « Rechercher uniquement l’élément actuel » afin que la variable ne lise que l’entrée déclenchante.
2. Créer un déclencheur. Crée un déclencheur de type «Datalayer Push » avec la condition event Ist gleich etConsentStatus. Sous «Le déclencheur s’applique à (toutes les conditions doivent être remplies) », ajoute comme «Événement personnalisé » la variable de l’étape 1 avec la valeur à laquelle la balise doit réagir, par exemple Ist gleich false.
   Si tu veux que la balise ne réagisse qu’à une modification et non dès le chargement de la page, crée une autre variable etracker pour la variable DataLayer action . Dans le déclencheur, définis ensuite une condition supplémentaire pour cette variable : « Ist gleich onUpdateServices ».
3. Créer une balise. Comme la balise doit fonctionner même si le consentement est refusé, on lui attribue la catégorie de consentement «Aucun ». Grâce à l’attribution du déclencheur de l’étape 2, elle s’exécute dès que le statut du consentement change, comme dans notre exemple : « false ».

Utiliser le statut de consentement pour ton propre JavaScript

Si ton code ne se trouve pas dans l’etracker tag manager, mais directement dans le code du site web, tu peux lire toi-même le dataLayer. Le modèle suivant traite d’abord les entrées de consentement enregistrées avant le lancement de ton script, puis réagit aux nouvelles entrées. Intègre-le après le code etracker.

window.dataLayer = window.dataLayer || [];

(function () {
  var state = null; // null = no status has been read yet
  var lastAction;
  var listeners = [];

  function apply(entry) {

    if (!entry || entry.event !== 'etConsentStatus') return;
    var next = {};

    Object.keys(entry).forEach(function (key) {
      if (key.indexOf(':') > -1) next[key] = entry[key];
    });

    state = next;
    lastAction = entry.action;
    listeners.forEach(function (fn) { fn(state, entry.action); });
  }

  // 1. Entries Already Written
  window.dataLayer.forEach(apply);

  // 2. Later Entries
  var originalPush = window.dataLayer.push;
  window.dataLayer.push = function () {
    var result = originalPush.apply(this, arguments);
    Array.prototype.forEach.call(arguments, apply);
    return result;
  };

  window.etConsent = {
    // true = consent, false = decline, undefined = no decision
    get: function (key) { return state ? state[key] : undefined; },
    onChange: function (fn) {
      listeners.push(fn);
      if (state) fn(state, lastAction);
    }
  };
})();

Voici comment faire pour que le lecteur vidéo ne démarre qu’après le consentement, et une seule fois :

window.initVideoPlayer = window.initVideoPlayer || (function () {
  var started = false;

  return function () {
    if (started) return;
    started = true;
    // Initialize the player here
  };
})();

etConsent.onChange(function (status) {
  if (status['performance:youtube'] === true) {
    window.initVideoPlayer();
  }
});

Tu peux aussi récupérer à tout moment l’état enregistré dans localStorage, par exemple avant de vouloir afficher un espace réservé :

var consent = {};

try {
  consent = JSON.parse(localStorage.getItem('et_oi_services') || '{}');
}

catch (e) {
  consent = {};
}

var youtubeAllowed = consent['performance:youtube'] === true;

Le localStorage ne te signale pas les modifications. Utilise-le donc pour l’état initial et le dataLayer pour les modifications.

Utiliser le statut de consentement avec d’autres systèmes de gestion des balises

Si tu utilises l’etracker consent manager avec un système de gestion des balises d’un autre fournisseur, configure-y un déclencheur pour l’événement dataLayer « etConsentStatus » et récupère, en suivant ces instructions, les clés de tes services sous forme de variables dataLayer. Dans la condition, vérifie la valeur true, et ne traite pas une clé manquante comme false.

Conseils pour passer le test

• Dans le mode débogage du tracker tag manager etracker, utilise le paramètre d’URL et_debug=1 pour vérifier si ta balise s’exécute exactement une fois lors de l’affichage de la page, après un consentement sans rechargement et après un rechargement.
• Pour vérifier le comportement après une révocation au cours de la même session de navigation, utilise les balises publiées sans le mode débogage. En mode débogage, une balise peut s’exécuter une fois de plus après la révocation.
• Pour rétablir l’état « aucune décision », supprime et_oi_services et et_allow_cookies de ton localStorage et des cookies de ton domaine, puis actualise la page.
• Pour contrôler ta logique, utilise exclusivement l’entrée « etConsentStatus ». Les autres entrées que l’etracker consent manager écrit dans le dataLayer ne font pas partie de cette interface.