Aller au contenu principal

Démarrer rapidement avec AppConsent

Découvrez comment créer une notice de consentement et comment l’implémenter sur votre site internet.


note

Dans ce pas à pas, nous vous expliquons comment réaliser une notice basique en utilisant le cadre de collecte de l'IAB Transparency & Consent Framework (TCF), puis comment l’implémenter sur votre site internet.

3 étapes clefs :

  1. Créer une source
  2. Créer une notice
  3. Insérer votre notice sur votre site

Pour découvrir d’autres paramétrages plus avancés, par exemple, la façon d'ajouter des partenaires non-IAB (appelés extra vendors), nous vous invitons à parcourir le sommaire de notre documentation.

1. Créer une source

  • Dans le menu latéral, cliquez sur Sources, puis sur Créer une source.

    Créer une source

  • Choisissez Site web dans le champ Type

  • Entrez le nom de domaine de votre site dans le champ URL du site web

  • Choisissez vos partenaires IAB dans le champ dédié

    IAB vendors

astuce

Grâce à la sélection de vos partenaires, nous faisons apparaître leurs finalités IAB dans le champ dédié ci-dessous. Vous pouvez toujours modifier cette liste de finalités et de fonctionnalités à votre convenance.

  • Dans le champ Finalités et fonctionnalités, vous pouvez modifier la sélection automatique en fonction de vos besoins.

Vous pouvez supprimer certaines finalités. Notez qu'en le faisant, il est possible que cela supprime automatiquement les partenaires associés, si ces derniers ne sont présents que sous cette finalité. Vous ne pouvez pas ajouter une finalité IAB si vous n'avez pas sélectionné les partenaires IAB associés précédemment.

Vous pouvez également transformer certaines finalités en un groupe nommé Stack si vous en avez besoin. Si vous savez quels stacks peuvent correspondre à votre collecte de données, nous vous recommandons d'en sélectionner un ou plusieurs, votre notice de consentement sera plus concise.

Finalités et fonctionnalités

Enregistrer la source.

astuce

Laissez les autres champs, pour l'instant, vous pourrez y revenir plus tard.

2. Créer une notice

Dans le menu latéral, cliquez sur Notices, puis sur Ajouter une notice.

Add notice

2.1. Paramètres généraux

Sélectionnez dans le champ Source, la source précédemment créée.

Source field

2.2. Configuration

Dans le champ Mise en page de l'écran vous avez le choix entre 2 formats pour votre page d’introduction. Par défaut, c’est un bandeau en bas de votre site. Vous pouvez également choisir une fenêtre modale au centre de l'écran.

Display layout field

Web notice Modèle Classic banner

Web notice Modèle Classic modal window

Choisissez l’ordre des boutons dans le champ Boutons disponibles dans le bandeau . Cela concerne la page d’introduction.

info

Point Conformité (CNIL) : depuis le 1er avril 2021, la CNIL Française exige la présence d’un bouton pour refuser le recueil.

Buttons avalaible in Banner

2.3. Traduction du texte

Sélectionnez la ou les langues que vous souhaitez dans le champ Langues à inclure dans la notice. Dans le champ Sélectionner la langue par défaut, définissez une langue par défaut au cas où il n’est pas possible de déterminer la langue d’un utilisateur.

Astuce

En cliquant dans le dernier champ, vous avez la possibilité de voir les textes de la notice. Pour le moment, nous vous conseillons de laisser les textes par défaut, et d'y revenir plus tard quand vous aurez visualisé votre notice.

Text translation

C’est terminé la notice pour votre site est créée dans AppConsent. Il est temps d’intégrer quelques morceaux de code sur votre site internet. Après cela, votre notice sera affichée sur votre site et le recueil des consentements pourra commencer.

3. Intégrer votre notice sur votre site

  • Ouvrez le code source HTML de votre site internet.

  • Collez ce morceau de code (appelé IAB stub) dans la section <head> de toutes vos pages.

<!-- MANDATORY: BEGIN IAB STUB -->
<script type="text/javascript">
"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()}();
</script>
<!-- MANDATORY: END IAB STUB -->
  • Collez ce morceau de code (appelé eventListener) dans la section <head> de toutes vos pages.
<!-- ADD EVENTLISTENER -->
<script type="text/javascript">
(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)
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"})});
</script>
<!-- END EVENTLISTENER -->
  • Collez ce morceau de code (appelé loader) à la fin de la section <body>.
<script src="https://cdn.appconsent.io/loader.js" defer async></script> 
<script type="text/javascript">
__tcfapi('init', 2, console.log, {
appKey: 'YOUR_APP_KEY'
// targetCountries: ['FR', 'UK', 'US'],
// forceGDPRApplies: true,
})
</script>

<script type="text/javascript">
__tcfapi('show', 2, console.log, {
lazy: true,
})
</script>
  • Dans AppConsent, depuis Notices, cliquez sur la ligne de la notice que vous souhaitez intégrer. L’AppKey (une suite de chiffres et de lettres) va s’afficher, copiez l’Appkey.
  • Collez cet AppKey dans votre code source à l’endroit indiqué "YOUR APPKEY" dans le morceau de code loader que vous venez d’insérer.

Notice AppKey

C’est terminé, votre notice est à présent affichée et fonctionnelle sur votre site internet.

Pour aller plus loin