AppConsent CMP
Rechercher…
WEB CMP
Implémenter une notice sur un site web utilisant Javascript, comme décrit ci-dessous.

Nouvelle version v28.0.1 de CMP

La v28.0.1 de CMP web est maintenant disponible avec une fonctionnalité majeure :
  • RGPD est toujours appliqué si le paramètre forceGDPRApplies est mis à true. forceGDPRApplies doit être un booléen.
  • RGPD est appliqué si targetCountries est fourni et que le pays de l'utilisateur est dans la liste. targetCountries doit être un tableau non vide de chaînes de caractères (codes pays ISO).
  • Exemple : ['FR, 'IT', 'RU', 'US']
  • RGPD est appliqué si targetCountries n'est PAS fourni mais que le pays de l'utilisateur est l'un des pays (européens) par défaut : ['AT', 'BE', 'BG', 'CY', 'CZ', 'DE', 'DK', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HU', 'IE', 'IT', 'LT', 'LU', 'LV', 'MT', 'NL', 'PL', 'PT', 'RO', 'SE', 'SI', 'SK',]
Ouvrez d'abord votre code source HTML

Implémenter la CMP TCF V2

1. Ajoutez le IAB STUB dans la section HEAD de toutes vos pages

L'IAB STUB est un bloc de code commun qui régit certains comportements obligatoires pour la CMP.
1
<!-- MANDATORY: BEGIN IAB STUB -->
2
<script type="text/javascript">
3
"use strict";!function(){var e=function(){var e,t="__tcfapiLocator",a=[],n=window;for(;n;){try{if(n.frames[t]){e=n;break}}catch(e){}if(n===window.top)break;n=n.parent}e||(!function e(){var a=n.document,r=!!n.frames[t];if(!r)if(a.body){var s=a.createElement("iframe");s.style.cssText="display:none",s.name=t,a.body.appendChild(s)}else setTimeout(e,5);return!r}(),n.__tcfapi=function(){for(var e,t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];if(!n.length)return a;if("setGdprApplies"===n[0])n.length>3&&2===parseInt(n[1],10)&&"boolean"==typeof n[3]&&(e=n[3],"function"==typeof n[2]&&n[2]("set",!0));else if("ping"===n[0]){var s={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"};"function"==typeof n[2]&&n[2](s)}else a.push(n)},n.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;n&&window.__tcfapi(n.command,n.version,(function(a,r){var s={__tcfapiReturn:{returnValue:a,success:r,callId:n.callId}};t&&(s=JSON.stringify(s)),e&&e.source&&e.source.postMessage&&e.source.postMessage(s,"*")}),n.parameter)}),!1))};"undefined"!=typeof module?module.exports=e:e()}();
4
</script>
5
<!-- MANDATORY: END IAB STUB -->
Copied!

2. Ajoutez l'eventListener dans la section HEAD de toutes vos pages

1
<!-- ADD EVENTILISTNER -->
2
<script type="text/javascript">
3
(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=1,window.dataLayer=window.dataLayer||[],__tcfapi("addEventListener",2,function(e,n){if(n&&e.gdprApplies&&("tcloaded"===e.eventStatus||"useractioncomplete"===e.eventStatus)){if((adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0,e.purpose.consents)
4
for(var s in window.dataLayer.push({AppConsent_IAB_PURPOSES:e.purpose.consents}),e.purpose.consents)e.purpose.consents[s]&&window.dataLayer.push({event:"appconsent_ctrl_"+s});var o,a;e.acExtraPurposes&&(o={},e.acExtraPurposes.forEach(function(e){o[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_PURPOSES:o})),e.acExtraVendors&&(a={},e.acExtraVendors.forEach(function(e){a[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_VENDORS:a})),e.purpose.consents&&e.vendor.consents&&("object"==typeof sfbxguardian&&e.purpose.consents[1]&&window.sfbxguardian.unblock(),"function"==typeof gtag&&(e.purpose.consents[1]&&e.vendor.consents[755]?gtag("consent","update",{analytics_storage:e.purpose.consents[7]||e.purpose.consents[9]?"granted":"denied",ad_storage:e.purpose.consents[3]?"granted":"denied "}):gtag("consent","update",{analytics_storage:"denied",ad_storage:"denied"})))}window.dataLayer.push({event:"appconsent_loaded"})});
5
</script>
6
<!-- END EVENTILISTNER -->
Copied!

3. Mettez le init et le show dans le <body>

1
<script src="https://cdn.appconsent.io/loader.js" defer async></script>
2
<script type="text/javascript">
3
__tcfapi('init', 2, console.log, {
4
appKey: 'YOUR_APP_KEY'
5
// targetCountries: ['FR', 'UK', 'US'],
6
// forceGDPRApplies: true,
7
})
8
</script>
9
10
<script type="text/javascript">
11
__tcfapi('show', 2, console.log, {
12
lazy: true,
13
})
14
</script>
Copied!
Avec le RGPD, vous avez l'obligation de fournir un moyen à l'utilisateur de pouvoir modifier ses choix à tout moment et facilement. C'est pourquoi vous devez ajouter le kit privacy center. C'est pourquoi le privacyWidget est déjà installé MAIS vous pouvez choisir le lien privacy center si vous voulez l'ajouter sur un lien "Paramètres des cookies'" par exemple.
Pour plus d'informations ou pour personnaliser votre kit Privacy center, veuillez vous rendre sur cette page.
Faites attention à ne pas installer l'init js deux fois.

4. Utilisez l'appKey de votre notice

4.1 Obtenir l'appKey

  • Dans le menu de gauche, cliquez sur Notices.
  • Trouvez la notice que vous souhaitez mettre en application.
  • Une fenêtre apparaît avec l'appKey correspondante.
  • Utilisez l'icône de copie sur la droite pour copier votre appKey.

4.2 Insérer l'appKey dans votre code

Collez l'appKey dans le morceau de code que vous avez précédemment inséré dans le <body>, à ce niveau là : " appKey: 'YOUR_APP_KEY' "

Résultats

Félicitations ! Vous avez maintenant terminé la mis en place de la CMP, votre code doit ressembler à cela :
1
<html lang="en">
2
<head>
3
<meta charset="UTF-8">
4
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5
<meta http-equiv="X-UA-Compatible" content="ie=edge">
6
<title>Your Website</title>
7
<!-- MANDATORY: BEGIN IAB STUB -->
8
<script type="text/javascript">
9
"use strict";!function(){var e=function(){var e,t="__tcfapiLocator",a=[],n=window;for(;n;){try{if(n.frames[t]){e=n;break}}catch(e){}if(n===window.top)break;n=n.parent}e||(!function e(){var a=n.document,r=!!n.frames[t];if(!r)if(a.body){var s=a.createElement("iframe");s.style.cssText="display:none",s.name=t,a.body.appendChild(s)}else setTimeout(e,5);return!r}(),n.__tcfapi=function(){for(var e,t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];if(!n.length)return a;if("setGdprApplies"===n[0])n.length>3&&2===parseInt(n[1],10)&&"boolean"==typeof n[3]&&(e=n[3],"function"==typeof n[2]&&n[2]("set",!0));else if("ping"===n[0]){var s={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"};"function"==typeof n[2]&&n[2](s)}else a.push(n)},n.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;n&&window.__tcfapi(n.command,n.version,(function(a,r){var s={__tcfapiReturn:{returnValue:a,success:r,callId:n.callId}};t&&(s=JSON.stringify(s)),e&&e.source&&e.source.postMessage&&e.source.postMessage(s,"*")}),n.parameter)}),!1))};"undefined"!=typeof module?module.exports=e:e()}();
10
</script>
11
<!-- MANDATORY: END IAB STUB -->
12
13
<!-- ADD EVENTILISTNER -->
14
<script type="text/javascript">
15
(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=1,window.dataLayer=window.dataLayer||[],__tcfapi("addEventListener",2,function(e,n){if(n&&e.gdprApplies&&("tcloaded"===e.eventStatus||"useractioncomplete"===e.eventStatus)){if((adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0,e.purpose.consents)
16
for(var s in window.dataLayer.push({AppConsent_IAB_PURPOSES:e.purpose.consents}),e.purpose.consents)e.purpose.consents[s]&&window.dataLayer.push({event:"appconsent_ctrl_"+s});var o,a;e.acExtraPurposes&&(o={},e.acExtraPurposes.forEach(function(e){o[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_PURPOSES:o})),e.acExtraVendors&&(a={},e.acExtraVendors.forEach(function(e){a[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_VENDORS:a})),e.purpose.consents&&e.vendor.consents&&("object"==typeof sfbxguardian&&e.purpose.consents[1]&&window.sfbxguardian.unblock(),"function"==typeof gtag&&(e.purpose.consents[1]&&e.vendor.consents[755]?gtag("consent","update",{analytics_storage:e.purpose.consents[7]||e.purpose.consents[9]?"granted":"denied",ad_storage:e.purpose.consents[3]?"granted":"denied "}):gtag("consent","update",{analytics_storage:"denied",ad_storage:"denied"})))}window.dataLayer.push({event:"appconsent_loaded"})});
17
</script>
18
<!-- END EVENTILISTNER -->
19
20
<!-- Global site tag (gtag.js) - Google Analytics -->
21
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
22
<script>
23
window.dataLayer = window.dataLayer || [];
24
function gtag(){dataLayer.push(arguments);}
25
gtag('consent', 'default', {
26
'ad_storage': 'denied',
27
'analytics_storage': 'denied'
28
});
29
gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX');
30
</script>
31
32
</head>
33
<body>
34
35
<script src="https://cdn.appconsent.io/loader.js" defer async></script>
36
<script type="text/javascript">
37
__tcfapi('init', 2, console.log, {
38
appKey:'YOUR_APP_KEY'
39
// targetCountries: ['FR', 'UK', 'US'],
40
// forceGDPRApplies: true,
41
})
42
</script>
43
44
<script type="text/javascript">
45
__tcfapi('show', 2, console.log, {
46
lazy: true,
47
})
48
</script>
49
50
51
</body>
52
</html>
Copied!

Aller plus loin

Maintenant que vous avez mis en place votre CMP, vous pouvez ajouter quelques commandes ou paramètres supplémentaires en lisant les instructions suivantes.

Passer des commandes dans l'URL

Vous pouvez passer des commandes au CMP par le biais du Querystring. Les commandes Querystring sont évaluées sur init.
?ac_cmd=show
Le code ci-dessus montre le CMP sur init.
Vous pouvez également passer des paramètres à la commande avec le même mécanisme. Les paramètres sont passés tels quels à partir du Querystring. Prenons l'exemple suivant :
?ac_cmd=show&jumpAt=banner

Commandes/Appels CMP

La CMP peut être contrôlée par la fonction globale __tcfApi de l'IAB, comme indiqué ici.
Des appels personnalisés sont prévus pour faire fonctionner la CMP, comme l'afficher, activer le consentement programmatique, etc. Tous les appels personnalisés sont des fonctions asynchrones qui reçoivent un rappel en cas d'erreur et des arguments optionnels, comme suit :

init

Init la CMP avec les références AppConsent et des configurations supplémentaires.
argument name
type
optional
value
command
string
'init'
version
number
2
callback
function
function(error: Error, state: State)
parameter
Object
Configuration
Le callback renvoie l'état de la CMP, récupéré soit sur LocalStorage soit sur le serveur. L'état contient Consent et Vendorlist. Cette commande effectue au maximum un appel au serveur.

Exemple de base

1
__tcfapi('init', 2, console.log, {
2
appKey: 'YOUR_APPKEY',
3
})
Copied!

Exemple de base avec i18n

1
__tcfapi('init', 2, console.log, {
2
appKey: '123',
3
i18n: {
4
buttons_acceptAll: { values: { en: 'ACCEPT ALL' } },
5
},
6
})
Copied!

Exemple avancé avec le passage de l'ExternalID (clé UUID)

1
__tcfapi('init', 2, console.log, {
2
appKey: 'appKey',
3
uuid: 'YOUR_ID_ABCD12345678',
4
debug: true,
5
storage: true,
6
i18n: {
7
banner_title: { values: { fr: 'Démo i18n' } },
8
buttons_acceptAll: { values: { fr: 'Démo i18n Accept' } },
9
},
10
})
Copied!

Configuration de object

1
/**
2
* Configuration holds settings for the current CMP instance
3
* Can be overriden by passing it to the init custom command
4
*/
5
export var configuration = {
6
/**
7
* string - 🛂 MANDATORY credentials for the AppConsent API
8
*/
9
appKey: null,
10
11
/**
12
* true - activate verbose logging in the browser's console
13
*/
14
debug: false,
15
16
/**
17
* true - CMP will be displayed to all visitors from any country in the world
18
*/
19
forceGDPRApplies: false,
20
/**
21
* Non-empty array of strings (country codes) is accepted or null
22
* CMP will be displayed to the provided list of country codes
23
* Example: ['FR,'IT','RU','US']
24
*/
25
targetCountries: null,
26
27
/**
28
* true - show keys instead of traductions for i18n keys
29
*/
30
debugI18n: false,
31
32
/**
33
* true - Force static fallback, bypassing the AppConsent API.
34
*/
35
forceStatic: false,
36
37
/**
38
* true - Force iAB global mode operation. Consent is stored on .consensu.org
39
*/
40
global: false,
41
42
/**
43
* Object - Overrides translation keys
44
*/
45
i18n: {},
46
47
/**
48
* string - URL to the static fallback of the AppConsent Vendorlist.
49
*/
50
"static": null,
51
52
/**
53
* true - Use the localstorage (default)
54
* false - localstorage is ignored
55
* Function - retrieve a Storage object from this function
56
* TODO see the section: "No section here"
57
*/
58
storage: true,
59
60
/**
61
* string - domain of the AppConsent API
62
*/
63
url: '',
64
65
/**
66
* string - overrides AppConsent's uuid generation
67
*/
68
uuid: null
69
};
Copied!

Mode statique

Un exemple de fichier statique peut être trouvé ici : collector-fr.json

show

Affiche la CMP pour le recueil des consentements des utilisateurs.
argument name
type
optional
value
command
string
'show'
version
number
2
callback
function
function(error: Error)
parameter
Object
ShowOption
1
ShowOption = {
2
/**
3
* true - If a consent if present, won't bother the user
4
* false (default) - Show the banner no matter what
5
*/
6
lazy: Boolean,
7
/**
8
* null, 'banner'
9
* 'privacy'
10
*/
11
jumpAt: string
12
}
Copied!
Exemple :
1
__tcfapi('show', 2, console.log, {
2
lazy: false,
3
})
Copied!
Exemple :
1
__tcfapi('show', 2, console.log, {
2
jumpAt: 'privacy',
3
})
Copied!

accept

Enregistre un consentement complet sur la CMP, car l'utilisateur aurait cliqué sur le boutonaccept everyhting. Le comportement par défaut est d'empêcher l'écrasement de tout consentement existant. Vous pouvez forcer l'écrasement en spécifiant un paramètre force.
Notez que quel que soit le résultat, cet appel dissimulera l'UI.
argument name
type
optional
value
command
string
'accept'
version
number
2
callback
function
function(error: Error)
parameter
Object
AcceptOption
1
AcceptOption = {
2
/**
3
* true - Overwrite any consent by an "accept all" one
4
* false (default) - "accept all" unless a consent is already defined
5
*/
6
force: Boolean,
7
}
Copied!
Exemple:
1
__tcfapi('accept', 2, console.log)
Copied!

deny

argument name
type
optional
value
command
string
'deny'
version
number
2
callback
function
function(error: Error)
parameter
Exemple:
1
__tcfapi('deny', 2, console.log)
Copied!

fakedeny

Forgez un consentement de refus et le retourner à tous les vendors, sans le sauvegarder comme consentement légitime de l'utilisateur. Cela est utile pour éviter que des vendors peu scrupuleux ne présument que l'absence de consentement en est un. Cela NE CACHERA PAS l'interface utilisateur.
argument name
type
optional
value
command
string
'fakedeny'
version
number
2
callback
function
function(error: Error)
parameter
Exemple:
1
__tcfapi('fakedeny', 2, console.log)
Copied!

En savoir plus

Quel est le poids de la CMP ?

Nous tirons parti des fragments pour réduire la bande passante. Le code de l'interface utilisateur n'est téléchargé que lorsque l'interaction de l'utilisateur est nécessaire. De plus, nous avons un rapport de taille raisonnable.

Compatibilité avec les Tag managers

Nous avons décidé de ne pas soutenir directement les tag managers, car la mise en œuvre et les usages varient. Nous vous encourageons vivement à utiliser l'API standard TCF v2 pour obtenir une résolution de consentement pour vos balises. Mais il est très facile d'interagir avec elles.
Par exemple, la mise en œuvre d'un GTM pourrait ressembler à cela, à condition que nous nous efforcions uniquement d'obtenir un consentement complet :
1
__tcfapi('getTCData', 2, (tcData, ok) => {
2
if(ok) {
3
for (var c in tcData.purpose.consents) {
4
if (tcData.purpose.consents[c]) {
5
// Push events to GTM
6
window.dataLayer.push({ event: 'purpose_' + c })
7
}
8
}
9
}
10
});
Copied!
Ou pour Tag Commander:
1
__tcfapi('getTCData', 2, (tcData, ok) => {
2
if(ok) {
3
var tcVars = {}
4
for (var c in tcData.purpose.consents) {
5
if (tcData.purpose.consents[c]) {
6
// Build a TagCommander events object
7
tcVars['purpose_' + c] = '1'
8
}
9
}
10
// Push events to Tag Commander
11
window.tcEvents(null, 'sfbx_consent_action', tcVars)
12
}
13
});
Copied!

Obtention de l'objet du consentement en JS

Exemple très simple :
1
__tcfapi('getTCData', 2, (tcData, success) => {
2
if(success) {
3
console.log(tcData.tcString)
4
} else {
5
// do something else
6
}
7
});
Copied!
Permet de sortir votre tcString V2 dans votre console :
1
CO3czkfO3czkfACAGAFRArCgAL_AAD_AAAqIGBtX_T5eb2vje3Zdt9tkaYwf55y3o-wjhgaIse8NwIeH7BoGL2MwvBX4JiQCGBAEEiKBAQdlHGBcCQAAgIgBiTKMYk2MCzNKJLJAilMbc0NYCC1mnsHTmZCY7068O__zv3eBghBJgqXgEiQthASTZpRCmACEcQFSDgEoIQgIFLDQAEBOwKAj1AAAAQGAAEAAAAIIICAQACAABIRAAAAICAUAEQCAAEAI0BCAAiQIBYASJAEAAqBoSAEUQQgCEHBgFHKIEBQAAAAA.YAAAAAAAAAAA
Copied!
Plus d'informations dans la documentation officielle de l'IAB : ici
Pour retrouver les dernières mises à jour de la CMP, consultez la section "Notes de versions".
Dernière mise à jour 16d ago