⚠️ Pour implémenter cette fonctionnalité, il est nécessaire de mettre les mains dans le code. Si le Javascript n'est pas votre ami, envoyez cette page à votre développeur préféré !
| Chez Axeptio, on pense qu'il ne faut pas cacher vos services, mais plutôt les montrer fièrement ! Parce qu'il est super important que Thomas puisse regarder votre tutoriel sur "Comment forger un couteau à champignon ?" ou bien que Léa puisse vous demander de quelles croquettes hypoallergéniques son chat a-t-il besoin ? |
Aujourd'hui, certains services se retrouvent malheureusement masqués si l'utilisateur n'accepte pas les cookies :
- votre chat en ligne
- vos vidéos hébergées en externe
- vos formulaires de contact
- ou encore vos pixels de suivi
Heureusement, Axeptio vous permet désormais d'éviter cela grâce au consentement contextuel. Vous allez pouvoir présenter vos cookies différemment, en valorisant clairement l'intérêt pour l'utilisateur.
Et il y a plein d'occasions pour ça :
- lancement de nouveaux produits
- vidéo de présentation
- chat... !
The cookie is the limit !
✅ Cette fonctionnalité conditionne le déclenchement d'une iframe (youtube, google maps...) lors de l'acceptation des cookies par l'utilisateur.
Intégration du code
Vous pouvez intégrer ce bout de code dans le <head> de votre site ou bien l'implémenter directement via Google Tag Manager.
(_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'));
}
});
});
});
Modification de l'iframe
Une iframe se charge généralement lorsque l'attribut src est renseigné avec une url.
Ici, nous allons bloquer l'affichage de cette url en remplaçant simplement l'attribut src par data-src.
Il est également nécessaire de rajouter l'attribut data-requiresivendors-consent qui correspond au nom du cookie que l'on soumet au consentement. Dans l'exemple ci-dessous, il s'agit du cookie YouTube.
⚠️ Il est important de bien respecter la dénomination de ce cookie. Vous pouvez trouver la nomenclature exacte dans le backoffice Axeptio, dans la section Intégration sur le site.
Voici un exemple :
- axeptio_activate_google_analytics
- axeptio_activate_Zendesk
- axeptio_activate_Youtube
<iframe
width=""
height=""
data-requires-vendor-consent="Youtube"
data-src="https://www.youtube.com">
</iframe>
Afin de débloquer cette iframe, il va falloir proposer à l'utilisateur une action permettant de valider le cookie en question, pour pouvoir "débloquer" l'affichage de notre iframe.
Ici, nous avons simplement rajouté un bouton, avec le code suivant :
<div data-hide-on-vendor-consent="Youtube">
<button onclick="window.axeptioSDK.requestConsent('Youtube')">
J'accepte le 🍪 youtube
</button>
</div>
En pratique
✅ L'iframe se charge bien !