⚠️ Pour implémenter cette fonctionnalité, il est nécessaire de mettre les mains dans le code. Si le Javascript n'est pas votre ami, envoyez cette page à votre développeur préféré !

Certains services se retrouvent malheureusement masqués si le visiteur n'accepte pas les cookies :

votre chat en ligne (Zendesk, iAdvize, Gorgias, Crisp...)
les vidéos hébergées en externe (YouTube, Dailymotion, Vimeo...)
les posts de réseaux sociaux (X/Twitter, Instagram, TikTok, Facebook...)
les cartes interactives (Google Maps, OpenStreetMap...)
les widgets d'avis (Trustpilot, Avis Vérifiés/Skeepers...)
les formulaires de contact
ou encore les pixels de suivi

Heureusement, Axeptio vous permet d'éviter cela grâce au consentement contextuel. Vous allez pouvoir présenter vos cookies différemment, en valorisant clairement l'intérêt pour l'utilisateur.

✅ Cette fonctionnalité conditionne le déclenchement d'une iframe (YouTube, Google Maps...) lors de l'acceptation des cookies par l'utilisateur.

Principe de fonctionnement

Tant que le visiteur n’a pas accepté les cookies d’un service, le contenu correspondant (iframe, widget…) reste bloqué.
À la place, vous affichez un message clair ou un bouton de remplacement permettant de donner son accord pour ce service précis.
Lorsqu’il clique sur ce message ou bouton, le bandeau Axeptio s’ouvre automatiquement, avec le cookie du service concerné mis en surbrillance pour qu’il puisse l’accepter directement.
Dès que le consentement est donné, le contenu se charge instantanément.

Étape 1 : Ajouter le script avec la logique globale

Nous avons écrit un script se comportant de la façon décrite ci-dessus : il affiche un message ou un bouton de remplacement tant que le visiteur n’a pas accepté le service, et charge automatiquement le contenu une fois le consentement donné.

Vous pouvez utiliser ce script tel quel, ou bien le personnaliser en fonction de vos besoin.

👉 Intégrez ce script dans le <head> de votre site ou bien dans une balise de votre conteneur Google Tag Manager.

Dans le <head>

// On enregistre une fonction à exécuter une fois que le SDK Axeptio est prêt
(_axcb = window._axcb || []).push(function(sdk) {

  // Quand l'utilisateur a terminé de faire ses choix de cookies
  sdk.on('cookies:complete', function(choices){
  
  // 1. Masquer les messages/boutons si le service a été accepté
  document
    .querySelectorAll('[data-hide-on-vendor-consent]')
    .forEach(el => {
      const vendor = el.getAttribute('data-hide-on-vendor-consent');
      el.style.display = choices[vendor] ? 'none' : 'inherit';
    });

  // 2. Charger les contenus (iframes) seulement si le service est accepté
  document
    .querySelectorAll('[data-requires-vendor-consent]')
    .forEach(el => {
      const vendor = el.getAttribute('data-requires-vendor-consent');
      if (choices[vendor]) {
        // On remplace data-src par src pour déclencher le chargement
        el.setAttribute('src', el.getAttribute('data-src'));
      }
    });
  });
});

Dans GTM

<script>
"use strict";

// On enregistre une fonction à exécuter une fois que le SDK Axeptio est prêt
(_axcb = window._axcb || []).push(function (sdk) {
  // Quand l'utilisateur a terminé de faire ses choix de cookies  
  sdk.on('cookies:complete', function (choices) {
    // 1. Masquer les messages/boutons si le service a été accepté  
    document.querySelectorAll('[data-hide-on-vendor-consent]').forEach(function (el) {
      var vendor = el.getAttribute('data-hide-on-vendor-consent');
      el.style.display = choices[vendor] ? 'none' : 'inherit';
    });
    // 2. Charger les contenus (iframes) seulement si le service est accepté  
    document.querySelectorAll('[data-requires-vendor-consent]').forEach(function (el) {
      var vendor = el.getAttribute('data-requires-vendor-consent');
      if (choices[vendor]) {
        // On remplace data-src par src pour déclencher le chargement       
        el.setAttribute('src', el.getAttribute('data-src'));
      }
    });
  });
});
</script>

Étape 2 : Adapter le code d’intégration iframe pour pour différer le chargement jusqu’au consentement

Pour différer le chargement du contenu jusqu’au moment où l’utilisateur donne son consentement, nous allons modifier légèrement le comportement standard de l’iframe.

Au lieu de placer l’URL directement dans l’attribut src (qui déclenche automatiquement le chargement, ce qui n'est pas souhaitable dans notre cas), on la stocke dans un attribut personnalisé data-src.

On ajoute également un attribut spécifique data-requires-vendor-consent indiquant que ce contenu nécessite le consentement d’un service donné.

Le script de l'étape 1 se charge ensuite de surveiller le consentement de l’utilisateur et, uniquement lorsque ce dernier accepte, il remet l’URL dans l’attribut src pour lancer le chargement effectif du contenu.

Récupérez le code de votre iframe.
Remplacez l'attribut src par data-src.
Récupérez le nom technique de votre service.
Ajoutez l’attribut data-requires-vendor-consent avec pour valeur le nom technique de votre service.

Exemple pour YouTube

Code d’intégration standard YouTube (copié via Partager > Intégrer) :

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen>
</iframe>

Version modifiée pour le consentement contextuel :

<iframe 
  width="560" 
  height="315" 
  data-src="https://www.youtube.com/embed/VIDEO_ID" <!-- src remplacé par data-src --> 
  data-requires-vendor-consent="youtube" <!-- NOUVEL attribut -->
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen>
</iframe>

Étape 3 : Ajouter un message ou bouton de remplacement

Si vous ne l'avez pas déjà fait, ajoutez maintenant votre service dans votre bandeau cookies.

Afin de débloquer cette iframe, il va falloir proposer à l'utilisateur une action permettant de valider le cookie en question, pour pouvoir "débloquer" l'affichage de notre iframe.

Voici une proposition de bouton très basique :

<!-- Conteneur affiché tant que le consentement pour le service n'est pas donné -->
<div data-hide-on-vendor-consent="NomDuService">

  <p>Pour visionner ce contenu, vous devez accepter le cookie NomDuService.</p>

  <!-- Bouton personnalisable -->
  <button onclick="window.axeptioSDK.requestConsent('NomDuService')">
    J'accepte le 🍪 NomDuService 
  </button>

</div>

Exemple pour YouTube :

<div data-hide-on-vendor-consent="youtube">
  <p>Pour visionner cette vidéo, vous devez accepter le cookie YouTube.</p>
  <button onclick="window.axeptioSDK.requestConsent('youtube')">
    J'accepte le 🍪 YouTube 
  </button>
</div>

Ce que fait ce bouton :

Ouvre automatiquement le bandeau Axeptio.
Met en surbrillance le cookie du service concerné pour que l’utilisateur puisse l’accepter directement.
Dès que c’est fait, le script principal charge l’iframe et masque ce bloc.

⚠️ Points importants pour que le script de l'étape 1 fonctionne correctement :

Le conteneur doit avoir l’attribut data-hide-on-vendor-consent avec le nom exact du service (même nom que dans data-requires-vendor-consent sur l’iframe).
Le bouton (ou lien cliquable) doit appeler window.axeptioSDK.requestConsent('NomDuService') pour déclencher le bandeau Axeptio.

💡 Vous pouvez personnaliser le style, le texte et même afficher un aperçu flouté du contenu pour inciter au clic.

Exemple d'implémentation du consentement contextuel

Gérer les services qui affichent du contenu sur votre site (YouTube, Maps, chat...)