Let op: Dit artikel is gemaakt vóórdat de automatische cookieblokkering functionaliteit is geïntroduceerd (10 september 2019). Je kan nog steeds onderstaande handmatige implementatie van voorafgaande toestemming gebruiken. In dat geval is onderstaande handleiding nog relevant voor je.

Voor het gebruik van automatische cookieblokkering zorg je ervoor dat je cookie banner script het data attribuut data-blockingmode=”auto”  bevat en dat het async attribuut is verwijderd.

Veel websites maken gebruik van embedded content, zoals een YouTube video, die wordt geladen in een iframe. Deze third-party content providers kunnen ook cookies plaatsen en ook hiervoor dient een voorafgaande toestemming gevraagd te worden aan de bezoeker.

Om cookies pas te laden als de voorafgaande toestemming is gegeven, zal het laden van de video geblokkeerd worden totdat de gebruiker toestemming heeft gegeven. Als de bezoeker toestemming heeft gegeven, zal op de volgende pagina’s die bezocht worden de embedded content automatisch geladen worden.

Om dit te implementeren dien je de orginele iframe tag aan te passen (voorbeeld):

<iframe src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>

naar het volgende (hernoem ‘src’ naar ‘data-src’ en voeg het data-cookieconsent-attribuut toe aan de tag)

<iframe data-src="https://www.youtube.com/embed/xxxxxxxxxxx" data-cookieconsent="marketing" frameborder="0" allowfullscreen></iframe

Vervang de voorbeeld url ‘https://www.youtube.com/embed/xxxxxxxxxxx’ door de url van je eigen iframe-src.

YouTube no cookie

Houd er rekening mee dat YouTube de mogelijkheid heeft om video’s weer te geven van het alternatieve domein www.youtube-nocookie.com dat geen HTTP-cookies gebruikt. Het alternatieve YouTube no cookie domein slaat echter nog steeds informatie op het apparaat van een bezoeker op door in plaats daarvan de HTML Locale Storage van de browser te gebruiken, waarvoor ook toestemming is vereist.

Een bericht of afbeelding weergeven als er geen toestemming is gegeven.

Je kan een placeholder voor of na de iframe-tag toevoegen, om de bezoeker een bericht te tonen als deze niet de juiste toestemming heeft gegeven, om de iframe weer te geven, bijvoorbeeld:

<div class="cookieconsent-optout-marketing">
Om deze video te zien dien je <a href="javascript:CookieConsent.renew()">marketing-cookies te accepteren.</a>
</div>

Het bericht zal niet getoond worden als de voorafgaande toestemming is gegeven.

Om een afbeelding te laten zien, zoals wij op de website doen, doe je het volgende:

<div class="cookieconsent-optin-marketing">
<iframe  data-cookieconsent="marketing" data-src="https://www.youtube.com/embed/zCpMqFZPUPU"></iframe>
</div> 

<div class="cookieconsent-optout-marketing">
<img src="https://www.cookieinfo.net/wp-content/uploads/2019/07/Cookiemanager-thumbnail.jpg" alt="Accepteer cookies" />
</div>

Als de toestemming nog niet is gegeven zal de volgende afbeelding verschijnen:

<script type="text/javascript" data-Cookieconsent="ignore">
    var CookieInfoRunOnce = false;
    function CookiebotCallback_OnLoad() {
        if (CookieInfoRunOnce)return;
        var elements = document.getElementsByTagName("iframe");
        for(let i = 0;i < elements.length; i++)
        {
            if(elements[i].hasAttribute("data-cookieconsent")){
                CreateCookieInfoPlaceHolder(elements[i]);
            }
        }    
        CookieInfoRunOnce = true;
    };

    function CreateCookieInfoPlaceHolder(el){
        let div = document.createElement('div');
            div.classList.add("cookieconsent-optout-marketing");
            div.innerHTML = '<p>Accepteer <a href="#" onclick="Cookiebot.show();return false;">marketing cookies</a> om deze video te bekijken.</p>';
            el.parentNode.appendChild(div);
    }
    
 </script>
 <style>
     div.cookieconsent-optout-marketing{
        background-color:#131313;
         border:1px solid grey;
         padding:2em 0.5em;
         display:block;
         text-align:center;
     }
 </style>