Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.
Vous pouvez gérer les éléments sur la page avec UniConsent et charger la balise en fonction du consentement de l'ID de finalité ou de l'ID de fournisseur personnalisé. (IAB TCF 2.3 Finalités, finalités Easy Mode ou types Google Consent Mode)
UniConsent prend en charge deux modes de consentement. Le mode appliqué dépend de la configuration de votre CMP et de la région du visiteur :
unic-purpose-id avec les IDs de finalité TCF (1–11).unic-e-purpose-id avec les IDs de finalité Easy (1–4).Important : Lorsque Easy Mode est activé pour une région, seuls les attributs
unic-e-purpose-idsont traités. Les scripts utilisantunic-purpose-idne seront pas activés. Assurez-vous d'utiliser le bon attribut selon la configuration de votre CMP.
Si vous n'êtes pas sûr du mode applicable, vérifiez les paramètres « Easy Mode » et « Region » dans le tableau de bord de votre CMP.
| ID de finalité | Description |
|---|---|
| 1 | Strictement nécessaire — Cookies essentiels pour le fonctionnement de base du site (toujours autorisés) |
| 2 | Performance / Analyse — Cookies d'analyse et de mesure |
| 3 | Fonctionnalité — Cookies pour les fonctionnalités améliorées et la personnalisation |
| 4 | Ciblage / Publicité — Cookies pour la publicité et le suivi |
Exemple 1 : Charger un script pour le consentement d'analyse (Easy Mode)
<script type="text/unicscript" unic-e-purpose-id="2">
console.log('Analytics consent granted');
</script>
Exemple 2 : Charger un script externe pour l'analyse (Easy Mode)
<script type="text/unicscript" unic-e-purpose-id="2" src="https://example.com/analytics.js"></script>
Exemple 3 : Charger Google Analytics (gtag.js) avec Easy Mode
<script type="text/unicscript" unic-e-purpose-id="2" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/unicscript" unic-e-purpose-id="2">
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>
Exemple 4 : Charger un script pour le consentement publicitaire (Easy Mode)
<script type="text/unicscript" unic-e-purpose-id="4" src="https://example.com/ads.js"></script>
<iframe
data-unicscript
unic-e-purpose-id="2"
width="560"
height="315"
data-src="https://example.com/analytics-widget"
frameborder="0"
></iframe>
| ID de finalité | Description |
|---|---|
| 1 | Stocker et/ou accéder à des informations sur un appareil |
| 2 | Utiliser des données limitées pour sélectionner la publicité |
| 3 | Créer des profils pour une publicité personnalisée |
| 4 | Utiliser des profils pour sélectionner une publicité personnalisée |
| 5 | Créer des profils pour personnaliser le contenu |
| 6 | Utiliser des profils pour sélectionner un contenu personnalisé |
| 7 | Mesurer la performance publicitaire |
| 8 | Mesurer la performance du contenu |
| 9 | Comprendre les audiences grâce à des statistiques ou à des combinaisons de données provenant de différentes sources |
| 10 | Développer et améliorer les services |
| 11 | Utiliser des données limitées pour sélectionner du contenu |
Exemple :
<script type="text/unicscript" unic-purpose-id="1">
console.log('bonjour finalité 1');
</script>
Exemple 2 :
<script type="text/unicscript" unic-purpose-id="1" src="xxxxx"></script>
Exemple :
<script type="text/unicscript" unic-purpose-ids="1,2,3">
console.log('bonjour finalité 1,2,3');
</script>
Exemple :
<script type="text/unicscript" unic-vendor-id="1">
console.log('bonjour fournisseur 1');
</script>
Exemple 2 :
<script type="text/unicscript" unic-vendor-id="1" src="xxxxx"></script>
Exemple :
<iframe
data-unicscript
unic-purpose-id="1"
width="560"
height="315"
data-src="https://www.youtube.com/embed/XXXX"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
Exemple :
<iframe
data-unicscript
unic-purpose-id="1,2,3"
width="560"
height="315"
data-src="https://www.youtube.com/embed/XXXX"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
Exemple :
<iframe
unic-vendor-id="1"
width="560"
height="315"
data-src="https://www.youtube.com/embed/XXXX"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
Vous pouvez charger des scripts et des iframes en fonction du consentement des Finalités Personnalisées en utilisant les attributs unic-cp-id et unic-cp-ids.
Exemple 1 : Charger un script pour une seule finalité personnalisée
<script type="text/unicscript" unic-cp-id="custom_analytics">
console.log('Consentement pour l\'analyse personnalisée accordé');
</script>
Exemple 2 : Charger un script externe pour une finalité personnalisée
<script type="text/unicscript" unic-cp-id="custom_analytics" src="https://example.com/analytics.js"></script>
Exemple 3 : Charger un script pour plusieurs finalités personnalisées (toutes doivent être consenties)
<script type="text/unicscript" unic-cp-ids="custom_analytics,ab_testing">
console.log('Les deux finalités personnalisées sont consenties');
</script>
Exemple 4 : Charger une iframe pour une finalité personnalisée
<iframe
data-unicscript
unic-cp-id="custom_analytics"
width="560"
height="315"
data-src="https://example.com/widget"
frameborder="0"
></iframe>
Changer :
<script
async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
type="text/javascript"
></script>
pour :
<script
async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
unic-purpose-id="3"
type="text/unicscript"
></script>
Modifier la balise d'emplacement de l'annonce Google Adsense ajoutée sur la page, changer :
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
pour :
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script type="text/unicscript" unic-purpose-id="3" >
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Affichez un espace réservé en ligne avec un message personnalisé lorsque le contenu est bloqué en raison d'un consentement manquant. Une fois le consentement accordé, l'espace réservé disparaît et le contenu original est révélé.
Ceci est utile pour le contenu intégré comme les vidéos YouTube, les publications de réseaux sociaux, les widgets d'analyse ou les scripts tiers où vous souhaitez montrer aux utilisateurs pourquoi le contenu est bloqué et leur donner un moyen d'accorder le consentement directement.
Enveloppez votre contenu dans un <div> avec data-unicscript et l'attribut de finalité approprié :
<div data-unicscript
style="display:none"
unic-e-purpose-id="2"
unic-consent-message="Nous avons besoin de votre consentement pour afficher ce contenu."
unic-consent-button="Autoriser">
<iframe data-src="https://www.youtube.com/embed/XXXX"
width="560" height="315" allowfullscreen></iframe>
</div>
Important : Ajoutez toujours
style="display:none"pour éviter le flash de contenu avant le chargement du CMP.
| Attribut | Requis | Description |
|---|---|---|
data-unicscript | Oui | Marque le div pour le contrôle du consentement |
style="display:none" | Oui | Empêche le flash de contenu avant le chargement du CMP |
unic-purpose-id | * | ID de finalité IAB TCF unique (ex. "1") |
unic-purpose-ids | * | Plusieurs IDs de finalité IAB TCF, séparés par des virgules (ex. "1,3,4" — tous doivent être accordés) |
unic-cp-id | * | ID de finalité personnalisée |
unic-e-purpose-id | * | ID de finalité Easy |
unic-gcm-id | * | Signal Google Consent Mode (ex. "analytics_storage") |
unic-vendor-id | * | ID de fournisseur personnalisé |
unic-consent-message | Non | Message personnalisé (par défaut : « This content requires your consent to be displayed. ») |
unic-consent-button | Non | Texte du bouton (par défaut : « Accept ») |
unic-consent-action | Non | "grant" = accorder le consentement silencieusement via l'API, "open" ou omis = ouvrir le dialogue CMP |
* Un attribut de finalité est requis.
Iframes — utilisez data-src au lieu de src pour empêcher le chargement avant le consentement :
<iframe data-src="https://www.youtube.com/embed/XXXX" width="560" height="315"></iframe>
Scripts — utilisez type="text/plain" pour empêcher l'exécution avant le consentement :
<script type="text/plain" src="https://example.com/analytics.js"></script>
<script type="text/plain">
console.log('Exécuté uniquement après accord du consentement');
</script>
Lorsque le consentement est accordé, data-src est automatiquement copié vers src et les scripts avec type="text/plain" sont activés automatiquement.
Vidéo YouTube :
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="Veuillez accepter les cookies publicitaires pour regarder cette vidéo."
unic-consent-button="Accepter et lire"
unic-consent-action="grant">
<iframe data-src="https://www.youtube.com/embed/XXXX"
width="560" height="315" allowfullscreen></iframe>
</div>
Publication X (Twitter) :
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="Veuillez accepter les cookies pour voir cette publication X."
unic-consent-button="Afficher la publication"
unic-consent-action="grant">
<blockquote class="twitter-tweet">
<a href="https://twitter.com/user/status/XXXX"></a>
</blockquote>
<script type="text/plain" src="https://platform.twitter.com/widgets.js"></script>
</div>
Publication Instagram :
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="Veuillez accepter les cookies pour voir cette publication Instagram."
unic-consent-button="Afficher la publication"
unic-consent-action="grant">
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/XXXX/">
</blockquote>
<script type="text/plain" src="https://www.instagram.com/embed.js"></script>
</div>
Publication Facebook :
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="Veuillez accepter les cookies pour voir cette publication Facebook."
unic-consent-button="Afficher la publication"
unic-consent-action="grant">
<div class="fb-post" data-href="https://www.facebook.com/user/posts/XXXX"></div>
<script type="text/plain" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"></script>
</div>
Vidéo TikTok :
<div data-unicscript
style="display:none"
unic-e-purpose-id="4"
unic-consent-message="Veuillez accepter les cookies pour voir cette vidéo TikTok."
unic-consent-button="Afficher la vidéo"
unic-consent-action="grant">
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@user/video/XXXX">
</blockquote>
<script type="text/plain" src="https://www.tiktok.com/embed.js"></script>
</div>
Google Maps :
<div data-unicscript
style="display:none"
unic-e-purpose-id="3"
unic-consent-message="Veuillez accepter les cookies pour afficher la carte."
unic-consent-button="Afficher la carte"
unic-consent-action="grant">
<iframe data-src="https://www.google.com/maps/embed?pb=XXXX"
width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>
</div>
Commentaires Disqus :
<div data-unicscript
style="display:none"
unic-e-purpose-id="3"
unic-consent-message="Nous avons besoin de votre consentement pour afficher les commentaires."
unic-consent-button="Afficher les commentaires"
unic-consent-action="grant">
<div id="disqus_thread"></div>
<script type="text/plain">
var disqus_config = function () { this.page.url = PAGE_URL; this.page.identifier = PAGE_IDENTIFIER; };
(function() { var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s); })();
</script>
</div>
Note : Les exemples ci-dessus utilisent
unic-e-purpose-id(Easy Mode). Si votre site utilise le mode IAB TCF, remplacez par leunic-purpose-idapproprié (ex.unic-purpose-id="1"pour le stockage sur l'appareil,unic-purpose-id="4"pour la publicité personnalisée).
Contactez-nous : support@uniconsent.com