Consentement Contextuel

Vous utilisez des iframes de type youtube sur votre site et vous avez besoin de consentement pour les lancer ? Aucun soucis on a pensé à vous !

Nous souhaitons conditionner le déclenchement d'un iframe à l'acceptation de l'utilisateur et pour cela nous allons intégrer un code dans le header de notre site.

1. Intégration du code

Le voici :

(_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. Modification de l'iframe

Puis nous devrons modifier notre iframe. Une iframe se charge généralement lorsque l'attribut src est renseigné avec une URL. Nous allons donc préfixer avec data-src ce qui fait que le contenu de l'iframe n'est pas chargé et il va simplement apparaitre un carré blanc à la place. Ce qui donne un code de type:

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

L'attribut data-requires-vendor-consent est quand à lui le nom du cookie qui doit etre accepter pour déclencher l'iframe en question. Il faudra donc simplement mettre un call to action dans le carré présent sur votre site afin que pousser l'utilisateur à accepter. Dans ce call to action nous allons utiliser une nouvelle fonction :

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

3. Fonctionnement

L'écran Axeptio va alors ouvrir la catégorie de cookie (souvent la Expérience et relation) liée à ce cookie afin que l'utilisateur puisse accepter le déclenchement du cookie qui conditionne le lancement de la vidéo. Le widget sera donc ouvert au bon endroit et le cookie nécessaire sera bien en surbrillance. L'utilisateur n'aura donc plus qu'à accepter. A ce moment un évènement cookies: complete sera envoyé. Le code que nous avons intégrer au début va alors regarder et détecter l'attribut et il changera automatiquement le data-src en src.

La vidéo se chargera bien 😉

Dernière mise à jour