HTML

Ne charger un script tiers qu’après le consentement du visiteur

Publié en mai 2018 2 extraits de code par Rémy Montangé

Fiche écrite en 2018, pour les navigateurs et les versions de l’époque. Vérifiez qu’elle correspond encore à votre environnement avant de l’appliquer.

Le RGPD s’applique demain, et beaucoup de bandeaux cookies ne font qu’afficher un message : les scripts de mesure ou de publicité, eux, se chargent dès l’arrivée sur la page. Le principe correct est l’inverse : rien ne s’exécute avant l’accord.

L’astuce consiste à déclarer le script avec un type que le navigateur ne sait pas exécuter, text/plain. Il reste dans la page, inerte, jusqu’à ce qu’un petit script le réactive.

HTML

<!-- Inerte tant que le visiteur n'a pas accepté la mesure d'audience -->
<script type="text/plain" data-consentement="mesure"
        data-src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1"></script>
<script type="text/plain" data-consentement="mesure">
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXX-1', { anonymize_ip: true });
</script>

<div id="bandeau-cookies" hidden>
  <p>Ce site mesure sa fréquentation. Acceptez-vous ?</p>
  <button type="button" id="cookies-refuser">Refuser</button>
  <button type="button" id="cookies-accepter">Accepter</button>
</div>

Le script réactive, dans l’ordre, chaque bloc marqué de la bonne catégorie : les scripts externes récupèrent leur src, les scripts en ligne leur contenu. Le bouton « Refuser » a exactement le même poids que « Accepter », et le choix est retenu, pour ne pas reposer la question à chaque page. Pour vérifier, l’onglet Réseau du navigateur ne doit montrer aucun appel vers le service tiers tant que rien n’a été accepté.

JavaScript

(function () {
  var CLE = 'consentement-mesure';

  function activer(categorie) {
    var inertes = document.querySelectorAll('script[type="text/plain"][data-consentement="' + categorie + '"]');
    // Array.prototype.forEach : NodeList.forEach n'existe pas sous IE11
    Array.prototype.forEach.call(inertes, function (ancien) {
      var actif = document.createElement('script');
      if (ancien.getAttribute('data-src')) {
        actif.src = ancien.getAttribute('data-src');
        actif.async = true;
      } else {
        actif.text = ancien.text;
      }
      ancien.parentNode.replaceChild(actif, ancien);
    });
  }

  function memoriser(valeur) {
    // 13 mois maximum pour conserver le choix
    document.cookie = CLE + '=' + valeur + '; max-age=' + 60 * 60 * 24 * 395 + '; path=/; SameSite=Lax';
  }

  var choix = (document.cookie.match(new RegExp(CLE + '=(oui|non)')) || [])[1];
  var bandeau = document.getElementById('bandeau-cookies');

  if (choix === 'oui') { activer('mesure'); return; }
  if (choix === 'non') { return; }

  bandeau.hidden = false;
  document.getElementById('cookies-accepter').addEventListener('click', function () {
    memoriser('oui'); activer('mesure'); bandeau.hidden = true;
  });
  document.getElementById('cookies-refuser').addEventListener('click', function () {
    memoriser('non'); bandeau.hidden = true;
  });
})();

Sources

CNIL, cookies et autres traceurs cnil.fr

Sources

Autres fiches HTML