⚠️ Om deze functionaliteit te implementeren, moet u in de code aan de slag. Als Javascript niet uw sterkste kant is, stuur deze pagina dan naar uw favoriete ontwikkelaar!
Helaas kunnen bepaalde services verborgen zijn als de bezoeker geen cookies accepteert:
uw online chat (Zendesk, iAdvize, Gorgias, Crisp...)
extern gehoste video's (YouTube, Dailymotion, Vimeo...)
berichten van sociale netwerken (X/Twitter, Instagram, TikTok, Facebook...)
interactieve kaarten (Google Maps, OpenStreetMap...)
beoordelingswidgets (Trustpilot, Avis Vérifiés/Skeepers...)
contactformulieren
of nog tracking pixels
Gelukkig stelt Axeptio u in staat dit te voorkomen dankzij contextuele toestemming. U kunt uw cookies op een ander manier presenteren en duidelijk het voordeel voor de gebruiker benadrukken.
✅ Deze functionaliteit bepaalt het starten van een iframe (YouTube, Google Maps...) wanneer de gebruiker cookies accepteert.
Werkingsprincipe
Zolang de bezoeker cookies van een service niet heeft geaccepteerd, blijft de bijbehorende inhoud (iframe, widget...) geblokkeerd.
In plaats daarvan geeft u een duidelijk bericht of vervangingsknop weer waarmee u akkoord kunt gaan met deze specifieke service.
Wanneer de gebruiker op dit bericht of deze knop klikt, opent de Axeptio-banner automatisch, waarbij de cookie van de betreffende service wordt gemarkeerd zodat deze deze direct kan accepteren.
Zodra toestemming wordt gegeven, wordt de inhoud onmiddellijk geladen.
Stap 1: Het script toevoegen met de globale logica
We hebben een script geschreven dat zich gedraagt zoals hierboven beschreven: het geeft een vervangingsbericht of -knop weer zolang de bezoeker de service niet heeft geaccepteerd, en laadt de inhoud automatisch zodra toestemming is gegeven.
U kunt dit script als zodanig gebruiken of het aanpassen aan uw behoeften.
👉 Integreer dit script in de <head> van uw site of in een tag van uw Google Tag Manager container.
In de <head>
In de <head>
// We registreren een functie die moet worden uitgevoerd zodra de Axeptio SDK klaar is
(_axcb = window._axcb || []).push(function(sdk) {
// Wanneer de gebruiker klaar is met het maken van zijn cookiekeuzes
sdk.on('cookies:complete', function(choices){
// 1. Verberg berichten/knoppen als de service is geaccepteerd
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. Laad inhoud (iframes) alleen als de service is geaccepteerd
document
.querySelectorAll('[data-requires-vendor-consent]')
.forEach(el => {
const vendor = el.getAttribute('data-requires-vendor-consent');
if (choices[vendor]) {
// We vervangen data-src door src om het laden te starten
el.setAttribute('src', el.getAttribute('data-src'));
}
});
});
});
In GTM
In GTM
<script>
"use strict";
// We registreren een functie die moet worden uitgevoerd zodra de Axeptio SDK klaar is
(_axcb = window._axcb || []).push(function (sdk) {
// Wanneer de gebruiker klaar is met het maken van zijn cookiekeuzes
sdk.on('cookies:complete', function (choices) {
// 1. Verberg berichten/knoppen als de service is geaccepteerd
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. Laad inhoud (iframes) alleen als de service is geaccepteerd
document.querySelectorAll('[data-requires-vendor-consent]').forEach(function (el) {
var vendor = el.getAttribute('data-requires-vendor-consent');
if (choices[vendor]) {
// We vervangen data-src door src om het laden te starten
el.setAttribute('src', el.getAttribute('data-src'));
}
});
});
});
</script>
Stap 2: De iframe-integratiecode aanpassen om het laden uit te stellen tot toestemming
Om het laden van inhoud uit te stellen tot het moment waarop de gebruiker toestemming geeft, gaan we het standaardgedrag van de iframe enigszins wijzigen.
In plaats van de URL rechtstreeks in het src attribuut te plaatsen (wat automatisch laden veroorzaakt, wat in ons geval niet wenselijk is), slaan we het op in een aangepast data-src attribuut.
We voegen ook een specifiek data-requires-vendor-consent attribuut toe dat aangeeft dat deze inhoud toestemming van een bepaalde service vereist.
Het script uit stap 1 bewaakt vervolgens de toestemming van de gebruiker en zodra deze de service accepteert, plaatst het de URL terug in het src attribuut om het daadwerkelijk laden van inhoud te starten.
Haal uw iframe-code op.
Vervang het
srcattribuut doordata-src.Voeg het
data-requires-vendor-consentattribuut toe met als waarde de technische naam van uw service.
Voorbeeld voor YouTube
Standaard YouTube-integratiecode (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 vervangen door data-src -->
data-requires-vendor-consent="youtube" <!-- NIEUW attribuut -->
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 vervangingsbericht of -knop toevoegen
Voeg uw service nu toe aan uw cookie-banner als u dit nog niet heeft gedaan, voeg nu uw service toe aan uw cookie-banner.
Om deze iframe te ontgrendelen, moet u de gebruiker een actie aanbieden waarmee hij de desbetreffende cookie kan valideren om de weergave van onze iframe te "ontgrendelen".
Hier is een zeer basisachtig knopaanbod:
<!-- Container die wordt weergegeven zolang toestemming voor de service niet is gegeven -->
<div data-hide-on-vendor-consent="ServiceNaam">
<p>Om deze inhoud te bekijken, moet u de cookie ServiceNaam accepteren.</p>
<!-- Aanpasbare knop -->
<button onclick="window.axeptioSDK.requestConsent('ServiceNaam')">
Ik accepteer de 🍪 ServiceNaam
</button>
</div>
Voorbeeld voor YouTube:
<div data-hide-on-vendor-consent="youtube">
<p>Om deze video te bekijken, moet u de cookie YouTube accepteren.</p>
<button onclick="window.axeptioSDK.requestConsent('youtube')">
Ik accepteer de 🍪 YouTube
</button>
</div>
Wat doet deze knop:
Opent automatisch de Axeptio-banner.
Markeert de cookie van de betreffende service zodat de gebruiker deze direct kan accepteren.
Zodra dit is gebeurd, laadt het hoofdscript de iframe en verbergt dit blok.
⚠️ Belangrijke punten voor het correct functioneren van het script uit stap 1:
De container moet het
data-hide-on-vendor-consentattribuut hebben met de exacte servicenaam (dezelfde naam als indata-requires-vendor-consentop de iframe).De knop (of klikbare link) moet `window.axeptioSDK.requestConsent('ServiceNaam')` aanroepen om de Axeptio-banner te activeren.
💡 U kunt de stijl, tekst aanpassen en zelfs een vervaagd voorbeeld van de inhoud weergeven om aan te zetten tot klikken.