Bloquer YouTube avant consentement

Facade de clic pour YouTube

<!-- Rien n'est chargé tant que le visiteur n'a pas cliqué. -->
<div class="facade" data-src="URL_DE_L_IFRAME">
  <img src="/img/apercu.jpg" alt="Aperçu du contenu" loading="lazy">
  <button type="button">Afficher le contenu</button>
  <p>En affichant ce contenu, vous acceptez le dépôt de traceurs par le
     fournisseur. <a href="/politique-cookies">En savoir plus</a>.</p>
</div>

<script>
  document.querySelectorAll('.facade button').forEach(function (bouton) {
    bouton.addEventListener('click', function () {
      var bloc = bouton.closest('.facade');
      var cadre = document.createElement('iframe');
      cadre.src = bloc.dataset.src;
      cadre.loading = 'lazy';
      cadre.setAttribute('allowfullscreen', '');
      bloc.replaceWith(cadre);
    });
  });
</script>

L'image d'aperçu doit être hébergée sur votre domaine : une vignette chargée depuis le fournisseur transmet déjà l'adresse IP du visiteur.

État de consentement par défaut, avant tout script Google

<!-- À placer AVANT le chargement de gtag.js ou du conteneur GTM -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    analytics_storage: 'denied',
    functionality_storage: 'granted',
    security_storage: 'granted',
    wait_for_update: 2000
  });
</script>

Les quatre premiers signaux doivent être « denied ». Sans cet appel préalable, les outils Google partent du principe que le consentement est acquis.

Mise à jour au moment du choix de l'utilisateur

// À appeler quand le visiteur valide son choix dans votre bandeau.
function appliquerChoix(accepte) {
  gtag('consent', 'update', {
    ad_storage: accepte ? 'granted' : 'denied',
    ad_user_data: accepte ? 'granted' : 'denied',
    ad_personalization: accepte ? 'granted' : 'denied',
    analytics_storage: accepte ? 'granted' : 'denied'
  });
}

Neutraliser le script tant que le consentement n'est pas donné

<!-- Le navigateur n'exécute pas un script de type "text/plain". -->
<script type="text/plain" data-categorie="marketing"
        src="https://youtube.com/…"></script>

<script>
  // Appelé uniquement après acceptation de la catégorie concernée.
  function activerCategorie(categorie) {
    document
      .querySelectorAll('script[type="text/plain"][data-categorie="' + categorie + '"]')
      .forEach(function (balise) {
        var actif = document.createElement('script');
        for (var i = 0; i < balise.attributes.length; i++) {
          var a = balise.attributes[i];
          if (a.name !== 'type' && a.name !== 'data-categorie') {
            actif.setAttribute(a.name, a.value);
          }
        }
        actif.text = balise.text;
        balise.parentNode.replaceChild(actif, balise);
      });
  }
</script>

Technique universelle, indépendante de toute plateforme de consentement : le script existe dans la page mais n'est jamais exécuté avant l'accord.