⚠️ Om deze functionaliteit te implementeren, is het nodig om in de code te duiken. Als JavaScript niet uw sterkste punt is, stuur deze pagina dan naar uw favoriete ontwikkelaar!

Helaas blijken bepaalde services verborgen te zijn als de bezoeker de cookies niet accepteert:

uw online chat (Zendesk, iAdvize, Gorgias, Crisp...)
extern gehoste video's (YouTube, Dailymotion, Vimeo...)
sociale media-berichten (X/Twitter, Instagram, TikTok, Facebook...)
interactieve kaarten (Google Maps, OpenStreetMap...)
beoordelingswidgets (Trustpilot, Avis Vérifiés/Skeepers...)
contactformulieren
of zelfs tracking pixels

Gelukkig kunt u dit voorkomen dankzij Axeptio's contextuele toestemming. U kunt uw cookies anders presenteren en het voordeel voor de gebruiker duidelijk benadrukken.

✅ Deze functionaliteit stelt het triggeren van een iframe (YouTube, Google Maps...) in voorwaarde van acceptatie van cookies door de gebruiker.

Werkingsprincipe

Zolang de bezoeker de cookies van een service niet heeft geaccepteerd, blijft de overeenkomstige inhoud (iframe, widget...) geblokkeerd.
In plaats daarvan geeft u een duidelijk bericht of een vervangende knop weer waarmee de gebruiker instemming kan geven voor deze specifieke service.
Wanneer hij op dit bericht of deze knop klikt, opent de Axeptio-banner automatisch, met de cookie van de betrokken service gemarkeerd zodat hij deze direct kan accepteren.
Zodra de toestemming is gegeven, laadt de inhoud onmiddellijk.

Stap 1: Het script met de algemene logica toevoegen

We hebben een script geschreven dat zich gedraagt zoals hierboven beschreven: het geeft een vervangend bericht of knop weer zolang de bezoeker de service niet heeft geaccepteerd, en laadt de inhoud automatisch zodra toestemming is gegeven.

U kunt dit script ongewijzigd gebruiken of aanpassen aan uw behoeften.

👉 Integreer dit script in de <head> van uw website of in een tag van uw Google Tag Manager-container.

In de <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'));
      }
    });
  });
});

In 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>

Stap 2: De iframe-integratiescode aanpassen om het laden tot toestemming uit te stellen

Om het laden van inhoud uit te stellen tot het moment waarop de gebruiker toestemming geeft, passen we het standaardgedrag van de iframe licht aan.

In plaats van de URL rechtstreeks in het kenmerk src te plaatsen (wat automatisch laden triggert, wat in ons geval niet wenselijk is), slaan we het op in een aangepast kenmerk data-src.

We voegen ook een specifiek kenmerk data-requires-vendor-consent toe dat aangeeft dat deze inhoud toestemming van een bepaalde service vereist.

Het script uit stap 1 monitort vervolgens de toestemming van de gebruiker en plaatst, alleen wanneer deze toestemming geeft, de URL terug in het kenmerk src om het daadwerkelijke laden van de inhoud te starten.

Haal de code van uw iframe op.
Vervang het kenmerk src door data-src.
Haal de technische naam van uw service op.
Voeg het kenmerk data-requires-vendor-consent toe met als waarde de technische naam van uw service.

Voorbeeld voor YouTube

Standaard YouTube-integratieapparaat (gekopieerd via Delen > Insluiten):

<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>

Aangepaste versie voor contextuele toestemming:

<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>

Stap 3: Een vervangend bericht of knop toevoegen

Voeg nu uw service toe aan uw cookies-banner, indien u dat nog niet heeft gedaan.

Om deze iframe te ontblokkelen, moet u de gebruiker een actie bieden waarmee hij de betrokken cookie kan valideren, zodat we de iframe kunnen 'ontblokkelen'.

Hier is een voorstel voor een zeer eenvoudige knop:

<!-- Container weergegeven zolang toestemming voor de service niet is gegeven -->
<div data-hide-on-vendor-consent="NaamVanDienst">

  <p>Om deze inhoud te bekijken, moet u de cookie NaamVanDienst accepteren.</p>

  <!-- Aanpasbare knop -->
  <button onclick="window.axeptioSDK.requestConsent('NaamVanDienst')">
    Ik accepteer de 🍪 NaamVanDienst 
  </button>

</div>

Voorbeeld voor YouTube:

<div data-hide-on-vendor-consent="youtube">
  <p>Om deze video te bekijken, moet u de YouTube-cookie accepteren.</p>
  <button onclick="window.axeptioSDK.requestConsent('youtube')">
    Ik accepteer de 🍪 YouTube 
  </button>
</div>

Dit is wat deze knop doet:

Opent automatisch de Axeptio-banner.
Markeert de cookie van de betrokken service zodat de gebruiker deze direct kan accepteren.
Zodra dit is gedaan, laadt het hoofdscript de iframe en verbergt dit blok.

⚠️ Belangrijke punten opdat het script uit stap 1 correct werkt:

De container moet het kenmerk data-hide-on-vendor-consent hebben met de exacte naam van de service (dezelfde naam als in data-requires-vendor-consent op de iframe).
De knop (of klikbare link) moet window.axeptioSDK.requestConsent('NaamVanDienst') aanroepen om de Axeptio-banner te triggeren.

💡 U kunt de stijl en tekst aanpassen en zelfs een wazig voorbeeld van de inhoud weergeven om klikken aan te moedigen.

Voorbeeld van implementatie van contextuele toestemming

Services beheren die inhoud op uw site weergeven (YouTube, Maps, chat...)