Contextual consent

You use iframes such as Youtube on your site and you need consent to start them? No problem!

We want to condition the trigger of an iframe to the user's consent, and for that, we will add code in our header.

1. Code integration

Here it is :

(_axcb = window._axcb || []).push(function(sdk) {
  sdk.on('cookies:complete', function(choices){
    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';
      });
    document
      .querySelectorAll('[data-requires-vendor-consent]')
      .forEach(el => {
        const vendor = el.getAttribute('data-requires-vendor-consent');
        if (choices[vendor]) {
          el.setAttribute('src', el.getAttribute('data-src'));
        }
      });
  });
});

2. Iframe modification

We'll have to modify our iframe. An iframe usually loads when the src attribute is filled with an URL. We will then prefix with data-src what prevents the loading of the iframe, resulting in just a white square.

Which gives a code like this :

<iframe
  width=""
  height=""
  data-requires-vendor-consent="youtube"
  data-src="https://www.youtube.com"
></iframe>

The attribute data-requires-vendor-consent is the name of the cookie that needs to be accepted to trigger the iframe.

We'll just need to put a call to action in the square on your site to ask the user his consent. In this call to action we'll use a new function :

<div data-hide-on-vendor-consent="Youtube">
  <button onclick="window.axeptioSDK.requestConsent('Youtube')">
    Accept Youtube cookie
  </button>
</div>  

3. How it works

The Axeptio screen will now open the cookie category (often the User experience category) linked to this cookie so that the user can accept the cookie that triggers the start of the video. The widget will then be opened at the right spot and the necessary cookie will be highlighted. Now the user just has to accept.

At this time a cookie event: complete will be sent. The code that we added at the beginning will then search and detect the attribute and change automatically the data-src into src.

The video will load properly 😉