Comment utiliser Google Tag Manager pour gérer le consentement RGPD

Franck Scandolera

Créez le module GTM RGPD du webAnalyste !

Voici comment utiliser Google Tag Manager pour gérer le consentement utilisateur RGPD.
Il s’agit d’un complément direct de l’article Google Tag Manager, Google Analytics et RGPD qui explique certaines configurations techniques de tracking RGPD à mettre en oeuvre.
Petite mise en garde, il s’agit d’un article technique qui s’adresse plus à des profils Martech que Market, si vous êtes allergique au JavaScript, vous risquez une poussée de boutons. Le principal but de cet article est d’expliquer comment j’ai utilisé Google Tag Manager pour gérer le consentement RGPD des utilisateurs. Une proposition technique qui n’a aucune validité juridique.
Maintenant que vous êtes prévenu des risques encourus, et que vous lisez cette nouvelle phrase, nous pouvons aller de l’avant. Donc, dans cet article, je vais essayer d’expliquer l’implémentation RGPD que j’ai mise en place avec Google Tag Manager pour gérer le consentement des utilisateurs sur mes sites. Normalement, en arrivant sur ce site, vous avez dû vous retrouver nez à nez avec au moins l’une des modals « RGPD ». Leur but est de vous informer de la politique de confidentialité du site et surtout de vous inviter à personnaliser votre accord. Les plus curieux ont pu tester que leur consentement était respecté, et les encore plus curieux que le processus était mesuré avec Google Analytics.

Comment gérer le consentement utilisateur avec Google Tag Manager ?

Google Tag Manager va nous permettre de créer les modals pour informer et recueillir le consentement qu’on stockera dans un cookie pour conditionner les déclencheurs de balise.
L’implémentation dans GTM est composée :

  • d’une balise HTML « html utility RGPD » qui contient le script principal pour créer les modals, le cookie « opt-out » et gérer le consentement,
  • d’une variable « cookie » pour récupérer la valeur du cookie « opt-out »,
  • d’une variable JavaScript « customTask » pour contrôler les données envoyées à GA et DC,
  • de déclencheurs « exception » basés sur le contenu du cookie « opt-out ».

La mécanique est très simple, elle utile un cookie pour stocker les préférences des utilisateurs et de deux fenêtres modals pour les informer et leur permettre de modifier leurs préférences.
Voici la liste des services et la gestion des opt-out dans Google Tag Manager.

nom Type Si optout
 YouTube  contenu Remplacer l’iframe YT par un message invitant utilisateur à accepter les cookies du service
 AdWords (conversion)  Publicité  Ne pas déclencher les tags de conversion AdW
 AdWords (remarketing)  Publicité Annuler le payload DC pour ne pas envoyer de données à DC
 UX Expérimentation  Optimisation  Ne pas déclencher les tags d’optimisation dans GTM (Optimize…)
UX Personnalisation  Optimisation  Ne pas intégrer l’utilisateur dans les programmes de personnalisation (layout custom)
 WA Recheche et développement  Dévelopement  Ne pas intégrer l’utilisateur dans les tests RD
 Google Analytics  Mesure d’audience Annuler le payload pour ne pas envoyer de données à GA.

Important, par défaut tous les services sont opt-in, les nouveaux utilisateurs ou ceux sans cookie opt-out sont invités à lire la politique de confidentialité et à personnaliser leur consentement.
GTM-RGPD-consent-logigramme

La balise GTM  « html utility RGPD » ou le moteur fonctionnel.

La balise est divisée en 3 parties :

  • Définition des styles CSS,
  • création des éléments,
  • fonctionnalités.

Définition des styles CSS.

Le style est géré par le Bootstrap. J’ai intégré directement les règles CSS spécifiques dans la balise HTML pour que le module GTM soit « plug and play » sur l’ensemble de mes sites. Naturellement, vous devrez l’adapter au style de votre site. Le premier groupe de règles concerne la mise en forme des modals (ex. « consent-modal »), le second, les éléments d’interface comme les textes, les boutons, les switch optin/optout, les CTA…
Je ne vais pas détailler les styles utilisés ni expliquer la base du CSS..
Passons directement à la création des éléments.

<style>
  /*RGPD Consent Modal (background) */
  .consent-modal, .consent-modal-first {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
  }
  /* Modal Content */
  .consent-modal-content {
    background-color: #e0ebeb;
    margin: auto;
    padding: 30px;
    margin-bottom:10px;
    border: 1px solid #888;
    width: 60%;
    box-shadow: 5px 10px;
    font-size: 120%;
    font-family: inherit;
  }
  .consent-modal-content a {
    color: #009900;
  }
  /* btn switch consent */
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  .switch input {display:none;}
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  input:checked + .slider {
    background-color: #009900;
  }
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  .slider.round:before {
    border-radius: 50%;
  }
  /* contenu de la modal */
  .consent_modal_title {
    font-size: 24px;
    margin: 12px 0;
    font-family: inherit;
    font-weight: bold;
    line-height: normal;
    color: inherit;
  }
  .consent_modal_subtitle {
    font-size: 18px;
    margin: 12px 0;
    font-family: inherit;
    font-weight: normal;
    line-height: normal;
    color: inherit;
  }
  .consent_modal_service_type {
    font-size: 16px;
    font-family: inherit;
    font-weight: bold;
    line-height: normal;
    color: #999;
  }
  .consent_modal_service_name {
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
    line-height: normal;
    color: inherit;
  }
  .consent_modal_service_desc {
    font-size: 14px;
    font-family: inherit;
    font-weight: normal;
    line-height: normal;
    color: inherit;
  }
  .consent_modal_service_line {
    background: #fff;
    width:100%;
    height:1px;
    margin:8px;
  }
  #consent-optout {
    position:relative;
    width:100%;
    height:200%;
    background-color: #333;
    font-size:2em;
    color: #FFF;
    text-align:center;
    border:1px solid #000;
  }
  #consent-cta {
    width:100px;
    background: #009900;
    color: white;
    font-size: 18px;
    text-align:center;
    margin-left:45%;
    margin-top:10px;
  }
</style>

Création des éléments.

Nous sommes toujours dans la balise HTML « html utility RGPD », précisément sous la fermeture de la balise </style>. C’est le bon endroit pour commencer à coder.

Création de la fonction anonyme auto-exécutée.

Attention, quand vous intégrez du code JavaScript dans une balise HTML GTM, il faut toujours l’intégrer dans une fonction IIFE (Immediately Invoked Function Expression) ou fonction anonyme auto-exécutable. Le but est de créer des variables locales, accessibles uniquement dans la fonction IIFE. Si les variables étaient créées à la racine du contexte <script>, elles seraient globales, ce qui signifie qu’elles seraient accessibles par l’ensemble des scripts de GTM et plus globalement par les scripts du site. Une portée globale non contrôlée peut causer des problèmes en cas de variables partageant le même nom et dont les valeurs n’auraient rien à voir.

<style>
//quelques règles CSS
</style>
<script>
(function(){
// contexte d’exécution privé, aucun risque de conflit global avec d'autres scripts GTM ou système.
})()
</script>

Création des tableaux de données « services ».

Maintenant que la fonction IIFF est en place, nous pouvons commencer à jouer. Commençons par définir les contenus. Utilisons des tableaux JavaScript pour stocker différentes informations.

  • Le tableau « service_type » stocke les types actifs des services. Il sert à regrouper les services par type dans la modal « Manager ». Vous pouvez modifier cette liste tant chaque type est associé à au moins un service. Le nom du type sert de clé pour regrouper les services à un type, donc pas d’espace, de caractères spéciaux…).
  • Le tableau « services » stocke plusieurs objets « service » et ses attributs (nom, desc, type, cookie_var, cookie_val_optout-defaut). Vous pouvez ajouter, modifier, supprimer un service en respectant la structure du modèle existant, notamment l’ordre et le nom des attributs , les accolades qui encapsule l’objet et l’absence de « , » à la fin du dernier attribut.
<style>
//quelques règles CSS
</style>
<script>
(function(){
    /***** Création de la modal *****/
    // Liste des types de service
    var service_type = ["Contenu","Publicité","Optimisation","Développement","Mesure d'audience"];
    //Liste des services
    var services = [{
      "nom":"YouTube",
      "desc":"Plusieurs articles sur mon site intègrent des vidéos YouTube.",
      "type":"Contenu",
      "cookie_var":"video"
    },{
      "nom":"Conversion",
      "desc":"Une conversion représente la réalisation d'un objectif comme la prise de contact. Les conversions AdWords nous permettent de mesurer l'efficacité de nos campagnes publicitaires.",
      "type":"Publicité",
      "cookie_var":"adw_conv"
    },{
      "nom":"Remarketing",
      "desc":"Nous allons stocker des informations d'identification anonymes pour afficher des publicités (seulement les nôtres) pertinentes...",
      "type":"Publicité",
      "cookie_var":"adw_rem"
    },{
      "nom":"Expérimentation",
      "desc":"Afin d'améliorer votre expérience et les performances du site, je peux tester différentes versions de mise en page auprès de différent groupe d'utilisateurs.",
      "type":"Optimisation",
      "cookie_var":"test"
    },{
      "nom":"Personnalisation",
      "desc":"La personnalisation permet de mettre en avant des contenus, fonctions et offres basés sur votre expérience.",
      "type":"Optimisation",
      "cookie_var":"perso"
    },{
      "nom":"R&D",
      "desc":"En tant qu'expert Analytics, nous pouvons expérimenter des tactiques de tracking et de personnalisation d'expérience anonymes.",
      "type":"Dévelopement",
      "cookie_var":"rd"
    },{
      "nom":"Analytics",
      "desc":"Les services de mesure d'audience permettent de générer des statistiques anonymes et agrégées de fréquentation utiles à l'amélioration de mon site.",
      "type":"Mesure d'audience",
      "cookie_var":"ga"
    }]
// suite du script dans la section suivante.
})()
</script>

Création des modals « First » et « Manager ».

Maintenant que les tableaux de service sont créés, on peut créer les modals. On est toujours dans le script, directement à la suite de la création des tableaux.
Les deux modals sont construites de la même manière :

  • Création d’une variable qui contient tout le contenu HTML de la modal, balise, css et texte.
  • Création d’un élément DOM « parent » dans lequel on va injecter la variable HTML.

Vous allez pouvoir modifier le contenu de la variable HTML pour personnaliser la mise en page, le texte, modifier ou ajouter un attribut, etc. Par exemple, modifier l’URL de la page de confidentialité, ligne 17 (<a href=’/politique-de-confidentialite/‘>Politique de confidentialité</a>) pour pointer celle de votre site.

// ... suite du script, après la configuration des tableaux de service.
// création du contenu de la modal "user consent First"
    var consent_modal_html_first = "<div class='consent-modal-content'>";
    consent_modal_html_first += "<button type='button' class='consent-modal-close close' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";
    consent_modal_html_first += "En poursuivant votre navigation, vous acceptez l'utilisation, de la part de ce site et de tiers, de cookies et autres traceurs à des fins de statistiques, personnalisation des contenus, partage sur les réseaux sociaux, contenus de plateformes sociales, lecture vidéo, mesure d'audience, profilage et publicité ciblée. Pour en savoir plus et paramétrer les cookies <a href='#' class='consent-cta-first-manager'><strong>rendez-vous ICI.</strong></a></div>";
// création de l'objet modal "user consent First"
    var consent_modal_first = document.createElement("div");
    consent_modal_first.setAttribute("class","consent-modal-first");
    consent_modal_first.innerHTML = consent_modal_html_first;
    document.body.appendChild(consent_modal_first);
// création du contenu de la modal "user consent Manager"
    var consent_modal_html = "<div class='consent-modal-content'>";
    consent_modal_html += "<button type='button' class='consent-modal-close close' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";
    consent_modal_html += "<div class='consent_modal_title'>Gestion de vos préférences pour tous les services</div>";
    consent_modal_html += "<div class='consent_modal_subtitle'><a href='/politique-de-confidentialite/'>Consultez notre Politique de confidentialité et politique en matière de cookies</a>.";
    consent_modal_html += "<br />En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement.</div>";
    // boucle pour intégrer et configurer chaque service dans un DIV ("row")
    for(var i=0; i<service_type.length;i++){
      consent_modal_html += "<div class='consent_modal_service_type'>"+service_type[i]+"</div>";
      for(var j=0; j<services.length;j++){
        var btn_swith = "<label class='switch'><input class='consent_modal_checkbox' type='checkbox' data-gtm-consent="+services[j].cookie_var+" checked><span class='slider round'></span></label>";
        if(service_type[i] == services[j].type){
          consent_modal_html += "<div class='row'>";
          consent_modal_html += "<div class='col-md-2 consent_modal_service_name'>"+services[j].nom+"</div>";
          consent_modal_html += "<div class='col-md-8 consent_modal_service_desc'>"+services[j].desc+"</div>";
          consent_modal_html += "<div class='col-md-2'>"+btn_swith+"</div>";
          consent_modal_html += "</div>";
        }
      }
     consent_modal_html += "<div class='row consent_modal_service_line'> </div>";
    }
    consent_modal_html += "</div></div>";
// création de l'objet modal "user consent Manager"
    var consent_modal = document.createElement("div");
    consent_modal.setAttribute("class","consent-modal");
    consent_modal.innerHTML = consent_modal_html;
    document.body.appendChild(consent_modal);

Fonctionnalité pour gérer le consentement RGPD avec Google Tag Manager.

On est toujours dans le script de la balise HTML « html utility RGPD ». A ce stade , tout le contenu a été créé, nous pouvons passer à la configuration des fonctionnalités pour manipuler les modals et gérer le consentement.
Fonctionnalités utiles :

  • Créer du cookie « gtm_cookie_consent_optout » pour gérer le consentement.
  • Mettre à jour le statut des services de la modal « Manager » par défaut ou avec les valeurs du cookie.
  • Ouvrir automatiquement la modal First, en cas d’absence du cookie « opt-out ».
  • Ouvrir/fermer les modals sur demande.
  • Tracker le processus RGPD.

Cookie « gtm_cookie_consent_optout ».

Le cookie qui stocke par défaut les services opt-out s’appelle « gtm_cookie_consent_optout ». Pour pouvoir l’exploiter dans Google Tag Manager, le plus simple est de créer une variable « Cookie », en faisant référence à son nom « gtm_cookie_consent_optout ». Dans mon script, la variable GTM reprend le nom du cookie {{gtm_cookie_consent_optout}}.
Cette partie du code va tester la valeur du cookie {{gtm_cookie_consent_optout}} associé à la variable « cookie_consent », pour déterminer la présence du cookie.

  • S’il n’existe pas,
    • On créer le cookie (setCookieConsent) puis on affiche la modal « First » (consent_modal_first.style.display = « block »).
    • On ajoute dans le dataLayer un nouvel event (eventGA) et ses attribues pour mesurer l’événement dans Google Analytics (ec: « RGPD »; ea: « modal-first »; el: « view-cookie-create »;ev: «  »;eni:1). Si vous mesurer l’affichage de la modal « First », c’est très important de configurer le paramètre « non interaction » = 1 pour éviter de planter vos taux de rebond (1 session avec 1 interaction au lieu de 2 si NI était laissé par défaut à 0).
  • S’il existe,
    • On met à jour les checkbox « opt-out » de la modal « Manager » pour que les utilisateurs puissent vérifier l’état de leur consentement.

La fonction setCookieConsent() sera expliquée plus bas dans l’article.

// suite du code après la création des modals
// Cookie "user consent"
   var cookie_consent = {{cookie gtm_cookie_consent_optout}};
   var el = document.querySelectorAll(".consent_modal_checkbox");
  if(!cookie_consent){ // si le cookie n'existe pas,
    setCookieConsent();  // on le créer avec les valeurs par défaut définit dans le tableau "services"
    consent_modal_first.style.display = "block"; 	// on affiche la modal
    window.dataLayer.push({
      'event':'eventGA',
      'eventCategory':'RGPD',
      'eventAction':'modal-first',
      'eventLabel':'view-cookie-create',
      'eventValue':'',
      'eventNonInteraction':1
    });
  } else { // si le cookie existe,
    var cookie_consent_optout = cookie_consent.split(",");
    for(var i = 0; i < el.length; i++){ //on aligne les valeurs du tableau "services" avec celles listées dans le cookie
      for(var j = 0; j < cookie_consent_optout.length; j++){
        if(el[i].getAttribute("data-gtm-consent") == cookie_consent_optout[j]){
          el[i].checked = false;
        }
      }
    }
  }

Ouvrir et fermer les modals RGPD.

Cette seconde partie va concerner les fonctions d’ouverture/fermeture des modals.
Le premier bloc de code identifie les clics sur lien avec la classe « .consent_cta » pour ouvrir la modal First et mesurer l’événement dans Google Analytics (ec: « RGPD »;ea: « modal-first »; el: « view »;ev: «  »;eni:1).
Tous les liens qui permettent à vos utilisateurs d’ouvrir la modal First doivent être associés à la class « consent_cta ». Pour remplacer le nom de la class, vous devez changer document.querySelectorAll(« .consent_cta ») par document.querySelectorAll(« .votre_class_modal_first »).

  // Gestion ouverture et fermeture de la modal first
  var consent_cta = document.querySelectorAll(".consent_cta"); // ouverture depuis un lien avec la class "consent_cta"
  for(var i =0; i < consent_cta.length; i++){
    consent_cta[i].onclick = function() {
      consent_modal_first.style.display = "block";
      window.dataLayer.push({
        'event':'eventGA',
        'eventCategory':'RGPD',
        'eventAction':'modal-first',
        'eventLabel':'view',
        'eventValue':'',
        'eventNonInteraction':1
      });
    }
  }

Dans cette partie, le script écoute les clics sur les boutons « close » (X en haut à droite) et en dehors des modals pour les fermer (event.target.style.display = « none »;).

  var consent_modal_close = document.querySelectorAll(".consent-modal-close");   // fermeture depuis le clic sur la croix haut droit des modals
  for(var i=0; i< consent_modal_close.length;i++){
    consent_modal_close[i].addEventListener('click', function(event){
      event.target.parentElement.parentElement.parentElement.style.display = "none";
    })
  }
  window.onclick = function(event) {    // fermeture depuis le clic en dehors de la modal
    if (event.target == consent_modal || event.target == consent_modal_first) {
      event.target.style.display = "none";
    }
  }

On continue avec les fonctionnalités d’ouverture et de fermeture, dans cette partie, le script écoute les clics sur le lien « Pour en savoir plus et paramétrer les cookies rendez-vous ICI » dans la modal « First » pour ouvrir la modal « Manager ».
Au moment du clic, on ferme la modal « First » et ouvre la modal « Manager », puis on mesure l’événement dans Google Analytics (ec: « RGPD »;ea: « modal-manager »; el: « view »; ev: «  »;eni:1).

  var cta_consent_custom_first = document.querySelector(".consent-cta-first-manager");
  // click custom consent ->  fermeture modal first et ouverture modal manager
  cta_consent_custom_first.onclick = function(){
    consent_modal_first.style.display = "none";
    consent_modal.style.display = "block";
    window.dataLayer.push({
      'event':'eventGA',
      'eventCategory':'RGPD',
      'eventAction':'modal-manager',
      'eventLabel':'view',
      'eventValue':'',
      'eventNonInteraction':1
    });
  }

Mettre à jour le consentement dans la modal « Manager ».

Ce bout de code va gérer la mise à jour du consentement suite à un clic sur l’un des checkbox service dans la modal « Manager ».
Le script est très simple, chaque fois qu’un clic sur les slides « checkbox » est capté, on active la fonction setCookieConsent (expliqué plus bas)  pour créer un nouveau cookie  « gtm_cookie_consent_optout » avec les nouvelles checkbox « unchecked ».  On mesure l’événement dans Google Analytics (ec: « RGPD »;ea: « consent type (optin ou optout) »; el: consent name; ev: «  »;eni:1). Naturellement, si le service « Analytics » était préalablement opt-out, aucune donnée ne sera envoyée à Google Analytics. Le consentement opt-in ou opt-out n’est pas actif au clic, mais au prochain rechargement de page. Initialement, j’avais ajouter location.reload() pour recharger la page juste après la création du cookie, ce qui activer immédiatement le consentement. Mais l’expérience utilisateur n’était pas optimale, notamment en cas de choix multiple. Une solution serait d’ajouter un CTA « Activation » pour permettre à l’utilisateur de recharger la page lui-même.

 /***** Mise à jour du consentement - click sur un switch dans la modal *****/
  // optout/optin depuis la modal
  var el_checkbox = document.querySelectorAll(".consent-modal-content .consent_modal_checkbox");
  for(var i=0;i < el_checkbox.length; i++){
    el_checkbox[i].onclick = function(event){
      setCookieConsent();
      var consent_type = event.target.checked ? "consent-opt-in" : "consent-opt-out";
      window.dataLayer.push({
        'event':'eventGA',
        'eventCategory':'RGPD',
        'eventAction':consent_type,
        'eventLabel': event.target.getAttribute('data-gtm-consent'),
        'eventValue':'',
        'eventNonInteraction':1
      });
    }
  };

Gérer le consentement YouTube.

Une fois qu’un utilisateur n’accepte pas les cookies vidéo, YouTube dans mon cas, il faut bloquer les scripts de ces contenus et afficher à la place un CTA l’invitant à autoriser les cookies de ce service. C’est exactement ce que fait le script suivant. Un traitement qui peut être décliné pour d’autre type de contenu comme les flux Twitter.
GTM-RGPD-consent-optout-youtube
Le script commence par tester la présence de la chaine « video » dans la variable cookie_consent (= cookie « gtm_cookie_consent_optout »). Si le test est validé, les services associés à « video » doivent remplacés par le message d’information « service désactivé… » et le CTA pour réactiver le service.
 

  // YouTube - contenu de remplacement
  if(/vidéo/.test(cookie_consent)){
    var consent_optout_div = document.createElement("div");
    consent_optout_div.setAttribute("class","consent-optout");
    var consent_optout_html = "<div id='consent-optout'>";
    consent_optout_html += "<b>YouTube est désactivé.</b><br />Autorisez le dépôt de cookies pour accéder au contenu.";
    consent_optout_html += "<a class='consent-link' href='#'><div class='consent-cta' data-consent-optout='video'>Autoriser</div></a>";
    consent_optout_html += "</div>";
    var el_yt = document.querySelectorAll("iframe[src*='youtube']");
    for(var i=0; i < el_yt.length;i++){
      el_yt[i].parentNode.replaceChild(consent_optout_div, el_yt[i])
      document.querySelector("div.consent-optout").innerHTML = consent_optout_html;
    }
  }

Modifier le consentement YouTube.

Le script ci-dessous écoute les clics sur les CTA « Accepter » dans les contenus de remplacement des services vidéo YouTube. La mécanique est la même qu’avec les switchs « checkbox » dans la modal Manager. Une fois le clic capté, on vérifie qu’il s’agit d’un service « video », si oui, on met à jour la checkbox du service « checked » dans la modal Manager, puis on recréer le cookie  « gtm_cookie_consent_optout » avant de recharger la page pour libérer le service.

  // Optin depuis un service - clic CTA consentement
  // YouTube
  var el_consent_cta = document.querySelectorAll(".consent-cta");
  for(var i=0; i < el_consent_cta.length;i++){
    el_consent_cta[i].onclick = function(event){ // au click sur le CTA "accepter"
      var el_consent_cta_attribute = event.target.getAttribute("data-consent-optout");
      if(el_consent_cta_attribute == "video"){
        document.querySelector("[data-gtm-consent='video']").checked = true; // on met à jour la valeur du modal
        setCookieConsent();  // on met à jour les valeurs du cookie
        location.reload();
      }
    }
  }
  })() // fin du script

Création de la fonction setCookieConsent() pour créer la cookie « gtm_cookie_consent_optout ».

Le but de cette fonction JavaScript est d’identifier les services « unchecked » de la modal « Manager » avant de les lister dans le cookie « gtm_cookie_consent_optout ».
Le script est composé de 4 étapes :

  • Initialisation des variables. La variable ‘el’ (pour élément) stocke dans un tableau tous les éléments DOM « .consent_modal_checkbox », tous les checkox de la modal Manager.
  • Boucle pour tester les checkbox qui ne sont pas « checked », autrement dit, les checkbox qui auront été désactivés par l’utilisateur, les « opt-out ».
    • On stocke dans un autre tableau « cookie_consent_value » le nom « data-gtm-consent » des éléments « optout ».
  • On purge le tableau « cookie_consent_value » des index vides.
  • On créer le cookie « gtm_cookie_consent_optout » pour stocker la liste des éléments du tableaux « cookie_consent_value ».

Vous pouvez personnaliser le nom du cookie directement en remplaçant la valeur de la variable « name » , idem pour la durée de vie, via la variable « expire_seconde ».

  function setCookieConsent(){
    var name = "gtm_cookie_consent_optout";
    var expire_secondes = 60*60*24*365; // durée +/- 1 an 60 secondes * 60 minutes * 24 heures * 365 jours
    var cookie_consent_value = [];
    var el = document.querySelectorAll(".consent_modal_checkbox"); // on récupère tous les checkbox des services
    for(var i = 0; i < el.length; i++){
      if(!el[i].checked){
        cookie_consent_value[i] = el[i].getAttribute("data-gtm-consent"); // on récupère la valeur du consentement
      }
    }
    var cookie_consent_value_clean = cookie_consent_value.filter(function(val){ // on supprime les index vides
      return val !== "";
    })
    if(cookie_consent_value_clean.length < 1){
      cookie_consent_value_clean[0] = "no_optout"; // si aucun checkbox "optout"
    }
    //Création du cookie
    var d = new Date();
    d.setTime(d.getTime()+ expire_secondes*1000);
    d.toUTCString();
    document.cookie = name+"="+cookie_consent_value_clean+";expires="+d+";path=/";
  }
</script>

Félicitations si vous êtes arrivé jusqu’ici, car le script est à présent complet. Si ce n’est pas déjà fait, il ne vous reste plus qu’à compiler tous ces bouts de code dans la balise une balise HTML « html utility RGPD », à déclencher sur « All pages » !

Configurer le consentement utilisateur dans Google Tag Manager ?

Le script du module GTM RGPD est terminé. Il nous reste à gérer le déclenchement des balises des services en cohérence avec le consentement utilisateur.
Actuellement, dans mon cas, il y a deux types de gestion du consentement dans Google Tag Manager, les consentements relatifs à Universal Analytics (hits GA et DC) et les autres.
Pour les autres balises, on utilisera un déclencheur de type Custom event > all event name (.*) > events basés sur une correspondance RegExp (expressions régulières) pour vérifier la présence du nom du service dans le cookie {{cookie gtm_cookie_consent_optout}} [correspond à l’expression régulière] [%nom_service_optout] par exemple « adw_conv ». On utilisera ces déclencheurs dans les balises des services en tant qu’exception pour prioriser le traitement de ces règles de non-déclenchement. Parfait pour prendre le contrôle facilement.
GTM-RGPD-consent-optout-trigger-exception
Concernant le contrôle des hits Google Analytics, il faut créer une variable JavaScript Personnalisé « customTask » pour hacker les hits GA avant que les données ne soient envoyées au serveur Google Analytics. La vulgarisation de l’usage du customTask dans Google Tag Manager revient de Simo Ahava (expert technique Analytics), qui écrit beaucoup sur le sujet et en a fait l’un de ces traitements Analytics préférés.
Le script « js – GA customTask » reprend le script qu’on avait déjà abordé dans l’article Google Tag Manager, Google Analytics et RGPD. N’hésitez pas à lire cet article pour avoir tous les détails sur ce script. Voici en résumé les traitements de ce script.
Dans la première partie du script, on stocke dans le tableau « piiRegex »  les objets de référence pour identifier les données PII (informations personnellement identifiables) dans les payloads  GA. Puis, on instancie les variables sendHitTask pour récupérer le payload GA et les variables « RegExp » relatives aux noms des services opt-out contenus dans le  cookie « cookie gtm_cookie_consent_optout ».
Dans la deuxième et dernière partie du script, on traite les données :

  • pour annuler les payloads DC et GA s’ils sont contenus dans le cookie opt-out,
  • pour remplacer la partie centrale des PII par « REDACTED » s’ils correspondent aux RegExp définies dans le tableau « piiRegex ».

 

function() {
  return function(model) {
    // Liste des objets PII de référence pour identifier les données dans le payload.
    var piiRegex = [{
      name: 'EMAIL',
      regex: /[^\/]{4}@[^\/]{4}/g
    },{
      name: 'TEL',
      regex: /((tel=)|(telephone=)|(phone=)|(mobile=)|(mob=))[\d\+\s][^&\/\?]+/gi
    },{
      name: 'NAME',
      regex: /((prenom=)|(nom=)|(firstname=)|(lastname=)|(surname=))[^&\/\?]+/gi
    }];
    var globalSendTaskName = '_' + model.get('trackingId') + '_sendHitTask';
    // Récupère les données originales sendHitTask
    var originalSendTask = window[globalSendTaskName] = window[globalSendTaskName] || model.get('sendHitTask');
    var i, hitPayload, parts, val;
    var cookie_adw_rem_val = /adw_rem/i; // nom du service Remarketing dans le cookie opt-out
    var cookie_ga_val = /ga/i;  // nom du service GA dans le cookie opt-out
    // Teste si service DC est opt-out. Si oui, on supprime les paramètres du hit ce qui annule l'envoi.
    if (cookie_adw_rem_val.test({{cookie gtm_cookie_consent_optout}})) {
      model.set('displayFeaturesTask', null);
    }
    // Teste si service GA est opt-out. Si oui, on supprime les paramètres du hit ce qui annule l'envoi.
    if (cookie_ga_val.test({{cookie gtm_cookie_consent_optout}})) {
      model.set('sendHitTask', null);
    } else {
      // Sinon on libere le sendHitTask, sans les données PII purgées.
      model.set('sendHitTask', function(sendModel) {
        hitPayload = sendModel.get('hitPayload').split('&');
        for (i = 0; i < hitPayload.length; i++) {
          parts = hitPayload[i].split('=');
          val = decodeURIComponent(decodeURIComponent(parts[1]));
          piiRegex.forEach(function(pii) {
            val = val.replace(pii.regex, '[REDACTED ' + pii.name + ']'); // On remplace les données PII par "REDACTED" (expurgés).
          });
          parts[1] = encodeURIComponent(val);
          hitPayload[i] = parts.join('=');
        }
        sendModel.set('hitPayload', hitPayload.join('&'), true);
        originalSendTask(sendModel);  // envoi des données
      });
    };
  };
}

Conclusions

Voilà, c’est terminé ! Le code source du module RGPD GTM du webAnalyste est à votre disposition. Le but de cet article est avant tout pédagogique pour améliorer son expertise de Google Tag Manager, il ne valide en aucun cas une bonne pratique de gérer le consentement RGPD. L’idée est de dire clairement au nouvel utilisateur ce que l’on fait de leurs données personnelles et comment ils peuvent s’opposer à l’utilisation de cookies en tant que données personnelles. L’usage des données personnelles par le site est clairement expliqué dans la page « Politique de confidentialité ».
A ce stade, il ne vous reste plus qu’à bien comprendre la logique du script, à le compiler dans une balise Google Tag Manager, le personnaliser puis le tester.
Si vous utilisez ces sources pour votre propre site personnel ou professionnel, n’hésitez pas à le faire savoir en partageant cet article sur Linkedin, Twitter, Facebook, Blog….