Leading Consent Management Platform

Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.

Implémentation de la balise UniConsent

Installation rapide avec la balise UniConsent unique (recommandé)

Ajoutez une seule balise script avec votre clé de licence sur chaque page, le plus haut possible dans le <head>. La balise définit l'état par défaut de Google Consent Mode, définit immédiatement unicReady et unicUpdate, puis charge la CMP complète en arrière-plan.

<script src="https://cmp.uniconsent.com/v2/cmp.js" data-license="YOUR_LICENSE"></script>

Vous trouverez votre clé de licence dans la section Installation et Configuration.

  • La balise unique remplace la balise d'ébauche, la balise d'état par défaut de Consent Mode et le chargeur cmp.js décrits ci-dessous. Ne les ajoutez pas à nouveau.
  • Elle définit une valeur par défaut de Consent Mode avec tout le stockage refusé et un wait_for_update de 3 secondes. Si vous définissez vos propres valeurs par défaut de Consent Mode, placez-les après la balise, sinon elles seront écrasées.
  • La balise s'ignore elle-même si le script de la CMP est déjà présent sur la page.
  • Utilisez unicReady et unicUpdate pour exécuter votre code une fois le consentement définitif. Consultez l'API Consent Ready.

Vous avez déjà installé UniConsent avec la balise classique en deux parties ? Elle continue de fonctionner. Consultez la section Installation classique de la balise en bas de cette page.

Ajout du lien des paramètres de consentement (facultatif) :

Vous pouvez désactiver Show Privacy Settings Button et ajouter le lien suivant sur votre page.

<a href="#" onclick='__tcfapi("openunic");return false;'
  >Paramètres de Consentement</a
>

Ajout du lien des paramètres de consentement avec des règles CSS :

Vous pouvez cibler une DIV sur vos pages web avec un sélecteur CSS, UniConsent insère automatiquement le lien des paramètres de consentement dans la DIV en fonction de la localisation géographique et de vos fonctionnalités activées.

<div id="uniconsent-config"></div>

Insertion automatique du lien des paramètres de consentement :

Vous pouvez placer la DIV de l'espace réservé suivante au bas de vos pages web, UniConsent insère automatiquement le lien des paramètres de consentement dans l'espace réservé en fonction de la localisation géographique et de vos fonctionnalités activées.

<div id="uniconsent-config"></div>

Installer avec les plugins WordPress et Drupal :

Vous pouvez trouver la clé de licence dans la section Installation et Configuration.

Conseil de performance : préconnexion au domaine de la CMP

Ajoutez les balises suivantes en haut de vos pages, dans le <head> avant la balise UniConsent. Elles permettent au navigateur de résoudre le DNS et d'ouvrir la connexion vers cmp.uniconsent.com à l'avance, afin que le script de la CMP commence à se télécharger plus tôt et que la bannière de consentement s'affiche plus rapidement.

<link rel='dns-prefetch' href='//cmp.uniconsent.com' />
<link rel="preconnect" href="https://cmp.uniconsent.com" crossorigin>

Si vous servez la CMP depuis un domaine CMP de première partie, utilisez votre domaine personnalisé à la place de cmp.uniconsent.com.

Pourquoi la balise est synchrone par défaut

La balise unique est volontairement chargée sans async. Elle s'exécute avant tout le reste de la page, de sorte que l'état par défaut de Google Consent Mode, les ébauches IAB TCF, USP et GPP, ainsi que les fonctions unicReady et unicUpdate sont en place avant l'exécution de vos balises Google, de vos balises publicitaires ou de votre propre code. La balise elle-même est légère et mise en cache, et la CMP complète est chargée en arrière-plan : l'impact sur le chargement de la page est donc minime. Combinée aux balises de préconnexion ci-dessus, elle offre l'affichage le plus rapide de la bannière, sans risque que des balises se déclenchent avant la définition des valeurs de consentement par défaut.

Si vous préférez charger la balise avec async

Vous pouvez ajouter async à la balise. Gardez les points suivants à l'esprit :

  • Votre code inline peut s'exécuter avant la balise, donc unicReady et unicUpdate peuvent ne pas encore exister. Ajoutez la garde de file d'attente en deux lignes ci-dessous pour que les appels anticipés soient rejoués une fois la balise chargée.
  • L'état par défaut de Consent Mode peut être défini après le chargement de vos balises Google. Définissez vous-même l'état par défaut de Consent Mode avant vos balises Google, ou chargez vos balises Google depuis un callback unicReady.
  • Il en va de même pour l'ébauche IAB TCF. Avec async, __tcfapi peut ne pas encore exister lorsque vos balises publicitaires ou Prebid l'appellent. Ajoutez la balise d'ébauche avant vos balises publicitaires, ou chargez-les depuis un callback unicReady.

Intégration avec l'API en chargement async

<script async src="https://cmp.uniconsent.com/v2/cmp.js" data-license="YOUR_LICENSE"></script>
<script>
  window.unicReady  = window.unicReady  || function (cb) { (window.unicReady.q  = window.unicReady.q  || []).push(cb); };
  window.unicUpdate = window.unicUpdate || function (cb) { (window.unicUpdate.q = window.unicUpdate.q || []).push(cb); };

  unicReady(function (status) {
    // le consentement est définitif : chargez vos balises ici
  });

  unicUpdate(function (status) {
    // chaque changement de consentement
  });
</script>

Vous pouvez aussi écouter les événements DOM unic:ready et unic:update sur window, enregistrés avant la balise. Consultez l'API Consent Ready pour l'objet status et tous les détails.

Suivant

Si vous souhaitez intégrer vos balises JavaScript, veuillez consulter la section Intégration des Balises JavaScript Tierces.

Installation classique de la balise (installations existantes)

Cette section concerne les sites web ayant installé UniConsent avant la disponibilité de la balise unique. La balise classique en deux parties continue de fonctionner et aucune migration n'est nécessaire. Pour changer, supprimez toutes les balises ci-dessous et ajoutez la balise unique indiquée en haut de cette page.

Chacun de vos sites web dispose d'une balise JavaScript unique à installer sur chaque page.

Vous pouvez trouver la balise UniConsent dans la section Installation et Configuration.

Il y a deux parties aux balises. La première partie est une ébauche qui doit être intégrée en haut de votre page. La deuxième partie peut être chargée de manière async. Il y a un impact minimal sur les performances de votre site.

Code d'ébauche

Vous pouvez également choisir de charger le code d'ébauche avec la balise JavaScript suivante :

<script src="https://cmp.uniconsent.com/v2/stub.min.js"></script>

Vous pouvez également remplacer le code suivant par la balise d'ébauche ci-dessus :

<script type="text/javascript">
!function(){var e,t,a;e="__tcfapiLocator",t=[],(a=window.frames[e])||(function t(){var n=window.document,i=!!a;if(!i)if(n.body){var o=n.createElement("iframe");o.style.cssText="display:none",o.name=e,n.body.appendChild(o)}else setTimeout(t,50);return!i}(),window.__tcfapi=function(){for(var e,a=[],n=0;n<arguments.length;n++)a[n]=arguments[n];if(!a.length)return t;if("setGdprApplies"===a[0])a.length>3&&2===parseInt(a[1],10)&&"boolean"==typeof a[3]&&(e=a[3],"function"==typeof a[2]&&a[2]("set",!0));else if("ping"===a[0]){var i={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"};"function"==typeof a[2]&&a[2](i,!0)}else t.push(a)},window.addEventListener("message",(function(e){var t="string"==typeof e.data,a={};try{a=t?JSON.parse(e.data):e.data}catch(e){}var n=a.__tcfapiCall;if(n)try{window.__tcfapi(n.command,n.version,(function(a,i){var o={__tcfapiReturn:{returnValue:a,success:i,callId:n.callId}};t&&(o=JSON.stringify(o)),e.source&&"function"==typeof e.source.postMessage&&e.source.postMessage(o,"*")}),n.parameter)}catch(e){}}),!1))}();
!function(){var e,a,t;e="__uspapiLocator",a=[],(t=window.frames[e])||(function a(){var n=window.document,s=!!t;if(!t)if(n.body){var i=n.createElement("iframe");i.style.cssText="display:none",i.name=e,n.body.appendChild(i)}else setTimeout(a,50);return!s}(),window.__uspapi=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];if(!e.length)return a;"ping"===e[0]?"function"==typeof e[2]&&e[2]({cmpLoaded:!1,cmpStatus:"stub"},!0):a.push(e)},window.addEventListener("message",(function(e){var a="string"==typeof e.data,t={};try{t=a?JSON.parse(e.data):e.data}catch(e){}var n=t&&t.__uspapiCall;if(n)try{window.__uspapi(n.command,n.version,(function(t,s){var i={__uspapiReturn:{returnValue:t,success:s,callId:n.callId}};a&&(i=JSON.stringify(i)),e.source&&"function"==typeof e.source.postMessage&&e.source.postMessage(i,"*")}),n.parameter)}catch(e){}}),!1))}();
window.__gpp_addFrame=function(e){if(!window.frames[e])if(document.body){var t=document.createElement("iframe");t.style.cssText="display:none",t.name=e,document.body.appendChild(t)}else window.setTimeout(window.__gpp_addFrame,50,e)},window.__gpp_stub=function(){var e=arguments;if(__gpp.queue=__gpp.queue||[],__gpp.events=__gpp.events||[],!e.length||1==e.length&&"queue"==e[0])return __gpp.queue;if(1==e.length&&"events"==e[0])return __gpp.events;var t=e[0],p=e.length>1?e[1]:null,s=e.length>2?e[2]:null;if("ping"===t)p&&p({gppVersion:"1.1",cmpStatus:"stub",cmpDisplayStatus:"hidden",signalStatus:"not ready",supportedAPIs:["2:tcfeuv2","5:tcfcav1","6:uspv1","7:usnatv1","8:uscav1","9:usvav1","10:uscov1","11:usutv1","12:usctv1"],cmpId:0,sectionList:[],applicableSections:[-1],gppString:"",parsedSections:{}},!0);else if("addEventListener"===t){"lastId"in __gpp||(__gpp.lastId=0),__gpp.lastId++;var n=__gpp.lastId;__gpp.events.push({id:n,callback:p,parameter:s}),p({eventName:"listenerRegistered",listenerId:n,data:!0,pingData:{gppVersion:"1.1",cmpStatus:"stub",cmpDisplayStatus:"hidden",signalStatus:"not ready",supportedAPIs:["2:tcfeuv2","5:tcfcav1","6:uspv1","7:usnatv1","8:uscav1","9:usvav1","10:uscov1","11:usutv1","12:usctv1"],cmpId:0,sectionList:[],applicableSections:[-1],gppString:"",parsedSections:{}}},!0)}else if("removeEventListener"===t){for(var a=!1,i=0;i<__gpp.events.length;i++)if(__gpp.events[i].id==s){__gpp.events.splice(i,1),a=!0;break}p({eventName:"listenerRemoved",listenerId:s,data:a,pingData:{gppVersion:"1.1",cmpStatus:"stub",cmpDisplayStatus:"hidden",signalStatus:"not ready",supportedAPIs:["2:tcfeuv2","5:tcfcav1","6:uspv1","7:usnatv1","8:uscav1","9:usvav1","10:uscov1","11:usutv1","12:usctv1"],cmpId:0,sectionList:[],applicableSections:[-1],gppString:"",parsedSections:{}}},!0)}else"hasSection"===t?p(!1,!0):"getSection"===t||"getField"===t?p(null,!0):__gpp.queue.push([].slice.apply(e))},window.__gpp_msghandler=function(e){var t="string"==typeof e.data;try{var p=t?JSON.parse(e.data):e.data}catch(e){p=null}if("object"==typeof p&&null!==p&&"__gppCall"in p){var s=p.__gppCall;try{window.__gpp(s.command,(function(p,n){var a={__gppReturn:{returnValue:p,success:n,callId:s.callId}};e.source&&"function"==typeof e.source.postMessage&&e.source.postMessage(t?JSON.stringify(a):a,"*")}),"parameter"in s?s.parameter:null,"version"in s?s.version:"1.1")}catch(e){}}},"__gpp"in window&&"function"==typeof window.__gpp||(window.__gpp=window.__gpp_stub,window.addEventListener("message",window.__gpp_msghandler,!1),window.__gpp_addFrame("__gppLocator"));
</script>