Utilisation du script UniConsent (UnicScript) pour gérer les éléments sur la page

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 Finalités, finalités Consent Categories ou types Google Consent Mode)

Deux modes de consentement

UniConsent utilise deux types de consentement, selon le type de bandeau et la région du visiteur :

• IAB TCF : les bandeaux RGPD et IAB TCF Canada. Utilise unic-purpose-id avec les ID de finalité IAB TCF (1 à 11).
• Consent Categories : le bandeau par catégories des projets Consent Categories, ainsi que les bandeaux LGPD (Brésil), PIPL (Chine), POPIA (Afrique du Sud), PDPD (Vietnam) et vos règles pour les autres pays dans tout projet. Utilise unic-e-purpose-id avec les ID de catégorie (1 à 4).

Quel attribut utiliser :

Attribut	Où il se charge
unic-e-purpose-id, unic-e-purpose-ids	Partout. Là où IAB TCF s'applique, les catégories suivent ses finalités, et après une opposition américaine la catégorie 4 est désactivée.
unic-gcm-id, unic-gcm-ids	Partout, selon les signaux Google Consent Mode.
unic-cp-id, unic-cp-ids	Partout, selon vos finalités personnalisées.
unic-purpose-id, unic-purpose-ids	Là où IAB TCF s'applique, avec les bandeaux américains et là où aucun bandeau ne s'applique. Jamais là où un bandeau Consent Categories s'applique, même après acceptation.
unic-vendor-id	Avec IAB TCF, lorsque le visiteur autorise le fournisseur personnalisé. Avec Consent Categories, il suit la catégorie 4. Nécessite Enable Custom Vendors.

Astuce : pour un script qui doit fonctionner dans toutes les régions et avec tous les types de bandeau, utilisez unic-e-purpose-id ou unic-gcm-id. Les attributs au pluriel (unic-e-purpose-ids="2,4") ne se chargent que si tous les ID indiqués sont autorisés.

IDs de finalité Consent Categories

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

Charger des scripts basés sur l'ID de finalité Consent Categories

Exemple 1 : Charger un script pour le consentement d'analyse (Consent Categories)

<script type="text/unicscript" unic-e-purpose-id="2">
  console.log('Analytics consent granted');
</script>

Exemple 2 : Charger un script externe pour l'analyse (Consent Categories)

<script type="text/unicscript" unic-e-purpose-id="2" src="https://example.com/analytics.js"></script>

Exemple 3 : Charger Google Analytics (gtag.js) avec Consent Categories

<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 (Consent Categories)

<script type="text/unicscript" unic-e-purpose-id="4" src="https://example.com/ads.js"></script>

Charger des iframes basés sur l'ID de finalité Consent Categories

<iframe
  data-unicscript
  unic-e-purpose-id="2"
  width="560"
  height="315"
  data-src="https://example.com/analytics-widget"
  frameborder="0"
></iframe>

---

Mode IAB TCF

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

Charger des scripts basés sur l'ID de finalité TCF

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>

Charger du javascript intégré en fonction du consentement des ID de finalité

Exemple :

<script type="text/unicscript" unic-purpose-ids="1,2,3">
  console.log('bonjour finalité 1,2,3');
</script>

Charger du JavaScript en ligne en fonction du consentement de l'ID du fournisseur personnalisé

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>

Charger une iframe en ligne en fonction du consentement de l'ID de finalité

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>

Charger une iframe en ligne en fonction du consentement des IDs de finalités

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>

Charger une iframe en ligne en fonction du consentement de l'ID du fournisseur personnalisé

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>

Charger du JavaScript en fonction des ID de Finalités Personnalisées

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>

Gérer Google Adsense avec UnicScript

AdSense lit lui-même le choix IAB TCF du visiteur et diffuse des annonces non personnalisées ou limitées lorsque les annonces personnalisées ne sont pas autorisées. Dans la plupart des cas, laissez les tags AdSense tels quels : les bloquer arrête aussi ces annonces.

Pour afficher AdSense uniquement aux visiteurs qui autorisent les profils publicitaires (finalité IAB TCF 3), remplacez :

<script
  async
  src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  type="text/javascript"
></script>

par :

<script
  async
  src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  unic-purpose-id="3"
  type="text/unicscript"
></script>

Puis modifiez le tag du bloc d'annonces sur la page :

<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>

par :

<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>

Blocs de substitution avec consentement en ligne

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.

Utilisation de base

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.

Attributs

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.

Bloquer le contenu à l'intérieur du Div

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.

Exemples d'intégrations sociales et de widgets tiers

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 (Consent Categories). Si votre site utilise le mode IAB TCF, remplacez par le unic-purpose-id approprié (ex. unic-purpose-id="1" pour le stockage sur l'appareil, unic-purpose-id="4" pour la publicité personnalisée).

Vous avez encore des questions ?

Contactez-nous : support@uniconsent.com