Iubenda logo
Générer dès maintenant

Documentation

Sommaire

Comment configurer Privacy Controls and Cookie Solution (guide détaillé)

❗️ Mise à jour de la valeur par défaut du paramètre invalidateConsentWithoutLog

Veuillez remarquer qu’à partir du 15-01-2023, la valeur de invalidateConsentWithoutLog a changé et est maintenant définie sur true. Cela signifie que si vous avez activé le Registre des Préférences Cookies et Consentements, un nouveau consentement sera demandé chaque fois qu’aucun consentement existant pour l’utilisateur en question n’a été trouvé dans le registre. Cette action s’effectue par défaut.

Dans ce guide, vous découvrirez en détail :

💡 Vous cherchez une introduction ? Découvrez les options du configurateur, la façon de modifier l’apparence ou la position de la bannière et plus encore dans notre guide d’introduction à l’outil Privacy Controls and Cookie Solution.

Petit récapitulatif :

  • L’installation de la bannière est très simple : il vous suffit d’insérer un code ou un script sur toutes les pages de votre site.
  • Entièrement personnalisable, le bandeau cookies affiche un texte standard et un lien vers votre politique relative aux cookies.
  • Son apparence s’adapte à toutes les résolutions d’écran et à tous les appareils, quelle qu’en soit la taille.
  • Les utilisateurs peuvent consulter votre politique relative aux cookies avant même de donner leur consentement.
  • Nous garantissons le bon fonctionnement du blocage des scripts. Pour en savoir plus, consultez le guide d’introduction au blocage des cookies.
  • Les préférences des utilisateurs sont enregistrées lorsqu’ils poursuivent la navigation (par exemple, par défilement de la page).
  • Une fois le consentement obtenu, tous les scripts qui étaient précédemment bloqués sont activés de manière asynchrone (soit sans recharger la page).
  • Lorsqu’un utilisateur a déjà donné son consentement, la bannière ne s’affiche pas et les scripts s’exécutent automatiquement.
  • Notre configurateur simplifie la personnalisation de la bannière. Il vous permet de modifier l’apparence, les détails et les fonctionnalités de la solution en quelques clics.

Une fois votre bannière générée (sous Privacy Controls and Cookie Solution > Activer/Modifier), vous obtiendrez un code similaire à l’exemple ci-dessous :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Pour afficher la bannière sur votre site, copiez-collez ce code (en pensant bien à générer votre propre code sous Privacy Controls and Cookie Solution > Activer/Modifier) à la fin de la section HEAD de vos pages ou utilisez l’un de nos modules pour :

Nous proposons également des guides d’intégration pas-à-pas pour les sites Web originaux, Shopify, Webflow, Wix et Squarespace.

Si vous utilisez Drupal, vous pouvez utiliser une classe PHP proposée en téléchargement direct et sur Packagist. Le guide de la classe PHP contient des instructions complètes à ce sujet.

En complément de l’affichage de la bannière, vous devez bloquer les cookies jusqu’à l’obtention du consentement.

De nombreuses autorités de protection des données à travers l’UE ont renforcé leurs exigences et aligné leurs règles en matière de cookies et traqueurs sur celles du RGPD. Elles vous imposent notamment d’enregistrer et de conserver des preuves des préférences de vos utilisateurs.

Cliquez ici pour plus d’informations sur la façon d’activer le Registre des Préférences Cookies et Consentements dans Privacy Controls and Cookie Solution.

 

Remarque : tous les paramètres suivants doivent être inclus dans _iub.csConfiguration {}.

1. Paramètres obligatoires

siteId : l’identifiant de votre site. Cet identifiant sert à partager les préférences entre plusieurs politiques relatives aux cookies en différentes langues qui se rapportent au même site Web ou à la même application.

cookiePolicyId : l’identifiant de votre politique relative aux cookies.

lang : la langue dans laquelle vous souhaitez afficher le contenu de la bannière (par exemple, « fr » pour le français, « en » pour l’anglais ou « es » pour l’espagnol). Toutes les langues disponibles dans le générateur le sont également pour le contenu de la bannière.

2. Paramètres relatifs à la conformité

countryDetection (booléen, false par défaut) : vous permet de détecter automatiquement le pays de l’utilisateur.

Pour le RGPD

Si vous souhaitez réserver le blocage préalable et les demandes de consentement aux cookies aux seuls utilisateurs se trouvant dans l’UE (où il s’agit d’une obligation légale) et exécuter normalement les scripts qui installent des cookies dans les régions où la législation vous y autorise toujours, affectez à ce paramètre la valeur true dans le cas où gdprAppliesGlobally a pour valeur false.

Si vous désactivez cette option, n’oubliez pas d’affecter au paramètre gdprApplies la valeur false sur toutes les pages où le consentement n’est pas demandé.

Pour la loi CCPA

Si vous souhaitez activer les mesures de protection prévues par la loi CCPA pour les seuls utilisateurs auxquels cette loi s’applique, affectez à ce paramètre la valeur true dans le cas où ccpaApplies a pour valeur false.

Pour la LGPD

Pour activer les mesures de protection prévues par la loi LGPD uniquement pour les utilisateurs du Brésil tout en exécutant des scripts de cookies normalement dans les régions où vous êtes encore légalement autorisé à le faire, réglez ce paramètre sur true si lgpdAppliesGlobally est défini false.

Si vous désactivez cette option, vous pouvez régler lgpdApplies:false sur toutes les pages vues où les exigences de la LGPD ne sont pas pertinentes.

2.1 RGPD

enableGdpr (booléen, true par défaut) : si la valeur est true, active (soit vous permet d’utiliser) la fonctionnalité RGPD dans Privacy Controls and Cookie Solution (sans l’appliquer pour autant).

gdprAppliesGlobally (booléen, true par défaut) : si la valeur est true, applique les mesures de protection prévues par le RGPD à tous les utilisateurs. Si vous souhaitez demander uniquement le consentement des utilisateurs se trouvant dans l’UE, affectez à ce paramètre la valeur false et au paramètre countryDetection la valeur true. N’oubliez pas que si vous êtes établi dans l’UE, vous devez également appliquer les mesures de protection prévues par le RGPD aux utilisateurs se trouvant hors de l’UE.

gdprApplies (booléen, true par défaut) : si la valeur est false, les mesures de protection prévues par le RGPD ne s’appliquent pas à l’utilisateur actuel, qui ne voit pas le bandeau cookies. Si vous avez affecté au paramètre countryDetection la valeur false, vous devriez également affecter au paramètre gdprApplies la valeur false sur toutes les pages où le consentement n’est pas demandé.

Boutons (accepter, personnaliser, refuser, fermer)

Les paramètres listés ci-dessous doivent être inclus dans l’objet banner {}.

acceptButtonDisplay (booléen, false par défaut) : détermine si le bouton « Accepter » s’affiche.

customizeButtonDisplay (booléen, false par défaut) : détermine si le bouton « Obtenir plus d’informations et personnaliser » s’affiche.

rejectButtonDisplay (booléen, false par défaut) : détermine si le bouton « Refuser » s’affiche. Lorsque sa valeur est true, celle du paramètre banner.closeButtonDisplay devient automatiquement false. Consultez la démonstration sur CodePen.

closeButtonDisplay (booléen, false par défaut) – Si est défini sur false, le bouton de fermeture du bandeau ne sera pas affiché.

closeButtonRejects (booléen, false par défaut) – Si est défini sur true, lorsque le bouton de fermeture du bandeau est cliqué, le consentement de l’utilisateur est considéré comme refusé.

explicitWithdrawal (booléen, false par défaut) – Si est défini sur true, la phrase : “Vous pouvez librement donner, refuser ou retirer votre consentement à tout moment” sera ajouté au bandeau.

perPurposeConsent (booléen, false par défaut) : si vous affectez à ce paramètre la valeur true, vous donnez aux utilisateurs un contrôle plus précis sur les catégories de cookies auxquelles ils peuvent consentir (voir ci-dessous). S’affiche alors la liste des catégories, dont chacune s’accompagne d’une brève description et d’un bouton que l’utilisateur peut activer (ou non) pour donner (ou refuser) son consentement à la finalité de traitement concernée.

L’outil Privacy Controls and Cookie Solution récupère automatiquement les catégories de cookies détectées dans votre politique relative aux cookies iubenda et les affiche dans la fenêtre modale. Toutefois, vous pouvez aussi personnaliser les catégories affichées à l’aide du paramètre purposes ci-dessous.

Exemples :

Balisage manuel et consentement par catégorie

Si vous avez activé la fonctionnalité de consentement par catégorie, vous devrez utiliser l’attribut spécial data-iub-purposes pour lister les catégories de scripts qui installent des cookies avant l’obtention du consentement. Ces catégories devront être séparées par des virgules. Lisez ce guide pour obtenir des instructions supplémentaires et des exemples d’utilisation du balisage manuel et du consentement par catégorie.

purposes (chaîne de caractères, null par défaut) : les finalités sont réparties dans cinq catégories dont chacune a un identifiant : Nécessaires (1), Fonctionnalité (2), Expérience (3), Mesure (4), Marketing (5). Par défaut, nous utilisons les finalités issues de la politique relative aux cookies iubenda associée à votre configuration, mais vous pouvez utiliser le paramètre purposes pour personnaliser les catégories à afficher (par exemple, si vous utilisez votre propre politique relative aux cookies).

Voici les finalités incluses dans chaque catégorie :

  1. Nécessaires (identifiant 1). Finalités incluses :
    • gestion et enregistrement des sauvegardes,
    • hébergement web et infrastructure de backend,
    • gestion des pages de destination et d’invitation,
    • services de plateforme et hébergement,
    • protection anti-SPAM,
    • optimisation et répartition du trafic,
  2. Fonctionnalité (identifiant 2). Finalités incluses :
    • contacter l’Utilisateur,
    • interaction avec des plateformes de support en direct,
    • gestion des conférences et de la téléphonie en ligne,
    • gestion des demandes de support et de contact,
    • interaction avec des plateformes de support et de rétroaction,
    • gestion des balises,
    • inscription et authentification,
    • gestion de la base de données Utilisateurs.
  3. Expérience (identifiant 3). Finalités incluses :
    • commentaire sur le contenu,
    • interaction avec des plateformes de collecte de données et d’autres tiers,
    • affichage de contenus à partir de plateformes externes,
    • échanges avec les réseaux sociaux et les plateformes externes,
    • interaction avec des plateformes de sondage en ligne,
    • gestion des flux RSS,
    • fonctionnalités sociales.
  4. Mesure (identifiant 4). Finalités incluses :
    • analyses,
    • bêta-tests,
    • mesure de la performance du contenu et test de fonctionnalité (A/B testing),
    • carte de chaleur et enregistrement de sessions,
    • gestion de la collecte de données et des sondages en ligne.
  5. Marketing (identifiant 5). Finalités incluses :
    • publicité,
    • infrastructure des services publicitaires,
    • affiliation commerciale,
    • gestion des contacts et envoi de messages,
    • remarketing et ciblage comportemental.

Ainsi, dans le cas où vous n’utilisez pas de politique relative aux cookies iubenda : si vous utilisez ces cinq catégories, vous devrez indiquer "purposes": "1, 2, 3, 4, 5", mais si vous n’utilisez pas la finalité Mesure (identifiant 4), vous pouvez vous contenter de "purposes": "1, 2, 3, 5" et ainsi de suite.

Remarque : pour que ce paramètre soit pris en compte, vous devez affecter au paramètre perPurposeConsent la valeur true (plus d’informations ci-dessus).

listPurposes (booléen, false par défaut) : si la valeur est true, affiche les finalités au premier niveau de la bannière. Pour que ce paramètre soit pris en compte, vous devez affecter au paramètre perPurposeConsent la valeur true. Ce paramètre doit être inclus dans l’objet banner {}.

2.2 CCPA

enableCcpa (booléen, false par défaut) : si la valeur est true, active (soit vous permet d’utiliser) la fonctionnalité CCPA dans Privacy Controls and Cookie Solution (sans l’appliquer pour autant).

ccpaApplies (booléen, undefined par défaut) : si la valeur est true, les mesures de protection prévues par la loi CCPA s’appliquent à l’utilisateur actuel.

ccpaNoticeDisplay (booléen, true par défaut) : affiche aux utilisateurs un bandeau avec des informations sur la loi CCPA (uniquement lorsque le RGPD n’est pas applicable). Si la valeur est false, ce bandeau ne s’affiche pas.

ccpaAcknowledgeOnDisplay (booléen, false par défaut) : si la valeur est true, le simple chargement du bandeau exigé par la loi CCPA vaut prise de connaissance des informations qui y figurent. Si la valeur est false, après le chargement du bandeau, une interaction explicite est nécessaire. Pour que ce paramètre soit pris en compte, vous devez affecter au paramètre ccpaNoticeDisplay la valeur true.

ccpaAcknowledgeOnLoad (booléen, false par défaut) : si la valeur de ce paramètre est true et celle de ccpaAcknowledgeOnDisplay est false, le simple chargement de la page vaut prise de connaissance des informations figurant sur le bandeau exigé par la loi CCPA.

ccpaLspa (booléen, undefined par défaut) : vous permet de préciser si la transaction doit être effectuée en vertu de l’Accord de prestation de services limités (LSPA) de l’IAB.

Classes

iubenda-ccpa-opt-out : si vous ajoutez cette classe à un élément de la page, lorsqu’un utilisateur cliquera sur cet élément, il verra s’afficher une boîte de dialogue qui lui permettra de confirmer son intention de s’opposer à la vente de ses informations personnelles (lien « Ne pas vendre mes Informations Personnelles »).

2.3 LGPD

enableLgpd (boolean, false par défaut) – Si true, vous activerez/rendrez disponible la fonctionnalité LGPD dans Privacy Controls and Cookie Solution (sans l’appliquer réellement).

lgpdAppliesGlobally (boolean, false par défaut) – Si true, vous appliquerez les protections LGPD à tous les utilisateurs. Définissez ce paramètre sur false et countryDetection:true pour demander le consentement à la LGPD aux utilisateurs brésiliens uniquement.

lgpdApplies (boolean, valeur par défaut non définie) – Si false, vous n’appliquerez pas les protections LGPD à l’utilisateur actuel et la bannière ne lui sera pas montrée. Ce comportement s’applique quelle que soit la valeur de lgpdAppliesGlobally (qu’elle soit true ou lgpdAppliesGlobally soit false avec countryDetection : true )

Veuillez noter que tous les paramètres disponibles pour le RGPD peuvent également être utilisés pour la configuration de la LGPD.

Les principaux réseaux publicitaires imposent désormais aux éditeurs d’obtenir le consentement des utilisateurs avant d’afficher des publicités personnalisées. Dans ce guide, vous découvrirez comment satisfaire cette exigence à l’aide du Cadre de transparence et de consentement de l’IAB et de l’outil Privacy Controls and Cookie Solution.

enableTcf (booléen, false par défaut) : si la valeur est true, les utilisateurs peuvent gérer leurs préférences en matière de suivi publicitaire conformément au Cadre de transparence et de consentement de l’IAB.

googleAdditionalConsentMode (booléen, false par défaut) : si la valeur est true, vous pouvez demander un consentement pour des partenaires Google Ads qui n’ont pas encore intégré la liste des partenaires du Cadre de transparence et de consentement, mais qui figurent sur la liste des Fournisseurs de technologie publicitaire de Google.

tcfPurposes (objet) : la version 2.0 du TCF prévoit 10 finalités, dont chacune a un identifiant :

  1. stocker ou accéder à des informations stockées sur un terminal ;
  2. sélectionner des publicités standard ;
  3. créer un profil pour afficher des publicités personnalisées ;
  4. sélectionner des publicités personnalisées ;
  5. créer un profil pour afficher un contenu personnalisé ;
  6. sélectionner du contenu personnalisé ;
  7. mesurer la performance des publicités ;
  8. mesurer la performance du contenu ;
  9. réaliser des études de marché afin de générer des données d’audience ;
  10. développer et améliorer les produits.

La version 2.0 du TCF vous permet de :

  • limiter la base juridique au seul consentement, au seul intérêt légitime ou aux deux ; et
  • choisir quelles finalités prévues par le TCF vous souhaitez afficher.

Voici comment procéder. Grâce au paramètre tcfPurposes, dans l’exemple suivant, nous allons :

  • désactiver la finalité 1 (« stocker ou accéder à des informations stockées sur un terminal »), à laquelle sera affectée la valeur consent_not_needed (consentement non exigé), ce qui n’est possible que si la législation qui nous est applicable n’exige pas l’obtention du consentement à cette finalité*,
  • désactiver la finalité 2 (« sélectionner des publicités standard »), à laquelle sera affectée la valeur false,
  • limiter la base juridique au seul intérêt légitime (li_only) pour la finalité 4 (« sélectionner des publicités personnalisées »), et
  • limiter la base juridique au seul consentement (consent_only) pour la finalité 7 (« mesurer la performance des publicités »).
_iub.csConfiguration = {
    "lang": "en",
    "siteId": xxxxxx, //use your siteId
    "cookiePolicyId": yyyyyy, //use your cookiePolicyId
    "enableTcf": true,
    ...
    "tcfPurposes": {
        "1": "consent_not_needed",
        "2": false,
        "4": "li_only",
        "7": "consent_only"
    },
    "tcfPublisherCC": "DE",
    "banner": {
        ...
    }
}

* Remarque au sujet du paramètre PurposeOneTreatment : auparavant, dans certains pays, l’obtention du consentement de l’utilisateur n’était pas exigée pour la finalité 1 (« stocker ou accéder à des informations stockées sur un terminal »). Il était alors possible de désactiver la demande de consentement à la finalité 1 en ajoutant "1": "consent_not_needed". Cependant, vous ne devriez activer cette option que si la législation qui vous est applicable vous y autorise. Or, au moment de l’écriture de cet article, aucun pays de l’UE ne l’autorise dans sa législation. C’est pourquoi nous vous recommandons fortement de ne pas l’activer.

askConsentIfCMPNotFound (booléen, true par défaut) : si la valeur est true et en l’absence de préférence relative au TCF de l’IAB, l’outil Privacy Controls and Cookie Solution demande un nouveau consentement aux utilisateurs qui l’avaient déjà donné avant l’activation du TCF. Si vous souhaitez désactiver ce comportement par défaut, affectez à ce paramètre la valeur false.

newConsentAtVendorListUpdate (nombre, undefined par défaut) : délai, en nombre de jours, entre la mise à jour du fichier vendorlist.json et la demande de nouveau consentement. Si la valeur est undefined, les utilisateurs qui ont déjà donné leur consentement ne verront pas s’afficher la bannière une nouvelle fois et leur consentement ne leur sera pas demandé pour les nouveaux partenaires. Si la valeur est 0, les utilisateurs verront s’afficher une nouvelle demande de consentement à chaque mise à jour de la liste des partenaires.

tcfPublisherCC (string, default null) – code pays en deux lettres défini dans l’ISO 3166-1 standard qui détermine la législation de référence du pays. Correspond normalement au code pays du pays dans lequel la société de l’éditeur est établie. Vous pouvez utiliser ce paramètre pour définir le code pays de l’éditeur dans la chaîne de préférence du TCF lorsque la finalité « 1 » est réglée sur « consent_not_needed ».

Classes

iubenda-advertising-preferences-link : si vous ajoutez cette classe à un élément de la page, lorsqu’un utilisateur cliquera sur cet élément, il verra s’afficher la fenêtre modale des paramètres de suivi publicitaire et pourra ainsi mettre à jour ses préférences relatives au TCF même après la fermeture de la bannière.

Remarque : si vous ne souhaitez pas utiliser cette classe propre au TCF, vous pouvez obtenir le même résultat en utilisant la classe « générique » iubenda-cs-preferences-link.

iubenda-vendor-list-link : ajoutez cette classe à un élément de la page pour permettre aux utilisateurs de rouvrir la liste des partenaires du TCF.

3. Paramètres relatifs à l’apparence et au texte

3.1 Format et position

position (chaîne de caractères, “float-top-center” par défaut) : définit la position de la bannière. Valeurs disponibles : top (en haut), bottom (en bas), float-top-left (flottant en haut à gauche), float-top-right (flottant en haut à droite), float-bottom-left (flottant en bas à gauche), float-bottom-right (flottant en bas à droite), float-top-center (flottant en haut, centré horizontalement), float-bottom-center (flottant en bas, centré horizontalement) et float-center (centré horizontalement et verticalement).

backgroundOverlay (booléen, false par défaut) : affectez à ce paramètre la valeur true pour ajouter un effet d’arrière-plan sombre et opaque au reste de la page lors de l’affichage de la bannière.

3.2 Thème

logo (chaîne de caractères) : URL (de préférence en https) ou équivalent en base64 d’une image à utiliser comme logo dans l’en-tête de la bannière. Utilisez un fichier SVG blanc sur fond transparent pour un meilleur résultat.

brandTextColor (chaîne de caractères, “#000” par défaut) : couleur du texte de l’en-tête de la fenêtre modale ou de la bannière.

brandBackgroundColor (chaîne de caractères, “#fff” par défaut) : couleur d’arrière-plan de l’en-tête de la bannière.

Couleurs de la bannière

backgroundColor (chaîne de caractères, “#000” par défaut) : couleur d’arrière-plan du bandeau.

textColor (chaîne de caractères, “#fff” par défaut) : couleur du texte du bandeau.

Boutons

acceptButtonColor (chaîne de caractères, “#0073ce” par défaut) : couleur d’arrière-plan du bouton « Accepter ».

acceptButtonCaptionColor (chaîne de caractères, “#fff” par défaut) : couleur du texte du bouton « Accepter ».

customizeButtonColor (chaîne de caractères, “#212121” par défaut avec le thème sombre et “#dadada” par défaut avec le thème clair) : couleur d’arrière-plan du bouton « Obtenir plus d’informations et personnaliser ».

customizeButtonCaptionColor (chaîne de caractères, “#fff” par défaut avec le thème sombre et “#4d4d4d” par défaut avec le thème clair) : couleur du texte du bouton « Obtenir plus d’informations et personnaliser ».

rejectButtonColor (chaîne de caractères, “#0073ce” par défaut) : couleur d’arrière-plan du bouton « Refuser ».

rejectButtonCaptionColor (chaîne de caractères, “#fff” par défaut) : couleur du texte du bouton « Refuser ».

continueWithoutAcceptingButtonColor (chaîne de caractères, “#fff” par défaut) : couleur d’arrière-plan du bouton « Continuer sans accepter ».

continueWithoutAcceptingButtonCaptionColor (chaîne de caractères, “#ooo” par défaut) : couleur du texte du bouton « Continuer sans accepter ».

Paramètres avancés

applyStyles (booléen, true par défaut) : si vous affectez à ce paramètre la valeur false, le style ou la feuille de style par défaut ne s’applique pas à la bannière. Ce paramètre est par exemple utile lorsque vous souhaitez donner au bandeau un style différent du style classique.

Vous devriez toujours vous baser sur notre feuille de style disponible ici. En récupérant notre feuille de style et en l’intégrant à votre site, vous appliquerez le style « classique » que ce paramètre permet de désactiver, mais vous pourrez l’éditer comme vous le souhaitez. Voici un exemple : bandeau utilisant une feuille de style personnalisée.

zIndex (nombre) : valeur z-index de la div du bandeau. La valeur par défaut est 99999998.

3.3 Texte

Taille de la police

fontSize (chaîne de caractères, null par défaut) : taille du texte du bandeau (y compris du bouton de fermeture). Si vous affectez une valeur à ce paramètre, les valeurs éventuelles des paramètres banner.fontSizeCloseButton et banner.fontSizeBody ne seront pas prises en compte.

fontSizeCloseButton (chaîne de caractères, “20px” par défaut) : taille du bouton de fermeture du bandeau.

fontSizeBody (chaîne de caractères, “14px” par défaut) : taille du contenu textuel du bandeau.

Texte du bandeau

content (chaîne de caractères) : ceci est le contenu textuel à l’intérieur de la bannière. Par exemple, pour la version française, la valeur par défaut est :

Notification
Certains de nos partenaires et nous-mêmes utilisons des cookies ou des technologies similaires conformément à notre %{cookie_policy_link}.

Veuillez noter que banner.content peut être utilisé uniquement pour personnaliser le texte du bandeau, et vous permet de spécifier un formatage spécial du texte avec des balises HTML, mais si vous voulez modifier la structure du bandeau (par exemple, en ajoutant des boutons ou des mises en page spéciales), vous devez utiliser banner.html

Variables de substitution

Les variables de substitution sont des codes spéciaux que vous pouvez utiliser dans les valeurs affectées aux paramètres banner.content et banner.html. Elles seront automatiquement remplacées par des données précises au chargement de la page. Si vous souhaitez personnaliser la bannière tout en profitant du comportement standard de Privacy Controls and Cookie Solution, vous pouvez utiliser des variables de substitution pour conserver les éléments de l’interface utilisateur indispensables à cela.

Voici les variables de substitution utilisables dans le paramètre banner.content :

  • %{cookie_policy_link} est remplacée par un lien vers votre politique relative aux cookies (paramètre cookiePolicyUrl) avec le texte d’ancrage que vous avez indiqué (paramètre banner.cookiePolicyLinkCaption).
  • %{advertising_preferences_link} est remplacée par un lien vers le widget du Cadre de transparence et de consentement.
  • %{vendor_list_link} est remplacée par un lien vers la liste des partenaires du Cadre de transparence et de consentement.
  • %{privacy_policy} est remplacée par un lien vers votre politique de confidentialité (exigée par la loi CCPA).
  • %{do_not_sell} est remplacée par un lien vers une page où l’utilisateur peut refuser la vente de ses informations personnelles, conformément à la loi CCPA (lien « Ne pas vendre mes Informations Personnelles »).

Voici un exemple de bandeau cookies qui utilise un code HTML et un contenu personnalisés.

Remarques

  • %{cookie_policy_link} est la variable de substitution remplacée par le lien vers votre politique relative aux cookies. N’oubliez pas que, par défaut, le lien vers la politique relative aux cookies qui figure dans le bandeau mène à la politique hébergée sur nos serveurs. Pour modifier ce comportement par défaut, vous devez modifier le paramètre cookiePolicyUrl. Consultez la section correspondante de ce guide pour plus d’informations à ce sujet.
  • Le contenu de la bannière sera localisé dans toutes les langues disponibles dans le générateur. La langue à utiliser dans la bannière est définie par le paramètre lang.
  • Si vous avez activé la compatibilité avec le Cadre de transparence et de consentement, vous avez peut-être remarqué que le texte du bandeau cookies est assez long. Les exigences élémentaires de l’IAB nécessitent en effet d’y faire figurer un certain nombre d’informations. Si vous souhaitez modifier le contenu du bandeau cookies, commencez donc par lire les critères de l’IAB avec le plus grand soin.
  • Pour assurer le bon affichage de votre politique relative aux cookies, vous ne devez utiliser la classe iubenda-cs-cookie-policy-lnk (ajoutée au lien vers votre politique relative aux cookies qui figure sur le bandeau cookies) à aucun autre endroit sur la même page.

acceptButtonCaption (chaîne de caractères, “Accepter” par défaut) : texte du bouton « Accepter » de la bannière.

customizeButtonCaption (chaîne de caractères, “Obtenir plus d’informations et personnaliser” par défaut) : texte du bouton « Obtenir plus d’informations et personnaliser » de la bannière.

rejectButtonCaption (chaîne de caractères, “Refuser” par défaut) : texte du bouton « Refuser » de la bannière.

closeButtonCaption (chaîne de caractères, “x” par défaut) : texte du bouton de fermeture du bandeau (initialement innerHtmlCloseBtn).

continueWithoutAcceptingButtonCaption (chaîne de caractères, “false” par défaut) : texte du bouton « Continuer sans accepter ».

Paramètres avancés

html (chaîne de caractères, null par défaut) : contient le code HTML par défaut de la bannière, que vous pouvez remplacer par un code personnalisé.

Remarques : certains éléments sont nécessaires au bon fonctionnement de la bannière, notamment :

  • div.iubenda-cs-content (le conteneur principal) et
  • a.iubenda-cs-cookie-policy-lnk (le lien hypertexte qui doit mener vers votre politique relative aux cookies, soit https://www.iubenda.com/privacy-policy/123456/cookie-policy?an=no&s_ck=false).
Variables de substitution

Les variables de substitution sont des codes spéciaux que vous pouvez utiliser dans les valeurs affectées aux paramètres banner.content et banner.html. Elles seront automatiquement remplacées par des données précises au chargement de la page. Si vous souhaitez personnaliser la bannière tout en profitant du comportement standard de Privacy Controls and Cookie Solution, vous pouvez utiliser des variables de substitution pour conserver les éléments de l’interface utilisateur indispensables à cela.

Voici les variables de substitution utilisables dans le paramètre banner.html :

%{banner_content} est remplacée par la valeur affectée au paramètre banner.content (ou par le contenu par défaut de la bannière). Remarque : %{banner_content} est obligatoire si vous utilisez la version 2 du TCF (sauf si nous avons approuvé votre texte personnalisé).

Voici un exemple de bannière qui utilise un code HTML et un contenu personnalisés.

footer {} (objet) : les paramètres listés ci-dessous doivent être inclus dans l’objet footer {}.

btnCaption (chaîne de caractères) : texte du bouton utilisé pour enregistrer les préférences en matière de consentement. Ce bouton se trouve en bas de la fenêtre « Préférences en matière de suivi » (voir la section consentement par catégorie). La valeur par défaut est « Enregistrer et continuer ».

i18next

i18n {} (objet) : vous pouvez traduire ou modifier les textes de tout composant de Privacy Controls and Cookie Solution en utilisant la bibliothèque JavaScript i18n. Consultez ce fichier JSON pour obtenir la liste complète des composants et chaînes de caractères que vous pouvez modifier ou localiser.

Important : si vous avez activé la compatibilité avec le Cadre de transparence et de consentement, pour respecter les exigences élémentaires de l’IAB relatives à la configuration, vous devez obligatoirement utiliser les traductions officielles (voir la « Liste des traductions des descriptions des finalités de la version 2.0 »).

floatingPreferencesButtonDisplay (chaîne de caractères, false par défaut) : définit la position de l’icône de raccourci vers les préférences de suivi. Cette icône permet à vos utilisateurs d’accéder à leurs préférences en matière de suivi et de les modifier à tout moment une fois qu’ils ont défini leurs préférences initiales. Valeurs disponibles : false (n’affiche pas le bouton), true (affiche le bouton à la position par défaut, soit en bas à droite), top-left (en haut à gauche), top-right (en haut à droite), bottom-left (en bas à gauche), bottom-right (en bas à droite), anchored-center-left (ancré à gauche, centré verticalement), anchored-center-right (ancré à droite, centré verticalement), anchored-top-left (ancré en haut à gauche), anchored-top-right (ancré en haut à droite), anchored-bottom-left (ancré en bas à gauche), anchored-bottom-right (ancré en bas à droite).

floatingPreferencesButtonCaption (chaîne de caractères, false par défaut) : texte de l’icône de raccourci vers les préférences de suivi.

floatingPreferencesButtonIcon (booléen, true par défaut) : image de l’icône de raccourci vers les préférences de suivi.

floatingPreferencesButtonHover (booléen, false par défaut) : affiche le texte de l’icône de raccourci vers les préférences de suivi au passage de la souris.

floatingPreferencesButtonRound (booléen, false par défaut) : ajoute l’attribut iubenda-tp-circle à l’icône de raccourci vers les préférences de suivi.

floatingPreferencesButtonZIndex (2147483647 par défaut) : ajoutez cette option pour appliquer un certain zIndex au bouton de préférence flottant. Cela peut être utile s’il existe des problèmes de chevauchement.

floatingPreferencesButtonColor (chaîne de caractères, “#fff” par défaut) : couleur d’arrière-plan de l’icône de raccourci vers les préférences de suivi.

floatingPreferencesButtonCaptionColor (chaîne de caractères, “#000” par défaut) : couleur du texte de l’icône de raccourci vers les préférences de suivi.

privacyPolicyUrl (chaîne de caractères) : vous permet de personnaliser l’URL de la politique de confidentialité utilisée.

cookiePolicyUrl (chaîne de caractères) : vous permet de personnaliser l’URL de la politique relative aux cookies utilisée. Cette URL est utilisée dans le lien vers votre politique relative aux cookies qui figure dans le bandeau cookies. Vous trouverez cette URL sur la page de modification de votre politique de confidentialité, dans l’onglet « intégration ». Si vous n’ajoutez pas ce paramètre, l’URL par défaut est celle de la politique relative aux cookies générée par iubenda et hébergée sur nos serveurs.

Vous pouvez également héberger la politique relative aux cookies sur une page de votre site Web et renseigner dans ce champ l’URL de la page correspondante. Gardez à l’esprit que si vous décidez d’héberger la politique relative aux cookies sur une page de votre propre site, cette page ne doit utiliser aucun cookie, à l’exception des cookies techniques. Remarque : ce paramètre ne sera pas pris en compte si vous avez défini un code HTML personnalisé pour le bandeau cookies. Pour plus d’informations, consultez la section consacrée à la configuration du paramètre banner.html ci-dessus.

cookiePolicyInOtherWindow (booléen, false par défaut) : si vous affectez à ce paramètre la valeur true, la politique de confidentialité et la politique relative aux cookies s’ouvriront dans une nouvelle fenêtre au lieu de la fenêtre modale iubenda.

cookiePolicyLinkCaption (chaîne de caractères) : texte d’ancrage du lien vers la politique relative aux cookies. La valeur par défaut est « politique relative aux cookies ». Ce paramètre doit être inclus dans l’objet banner {}.

5. Paramètres avancés

Les paramètres listés ci-dessous doivent être inclus dans l’objet banner {}.

slideDown (booléen, true par défaut) : affectez à ce paramètre la valeur false pour désactiver l’animation du bandeau.

prependOnBody (booléen, false par défaut) : si la valeur est true, le code HTML de la bannière (via le paramètre html) est injecté dans le site au tout début de la section BODY. Par défaut, le paramètre prependOnBody a pour valeur false et le bandeau est placé à la toute fin de la section BODY.

Si vous souhaitez par exemple placer le bandeau avant l’en-tête de votre page, vous devez affecter au paramètre prependOnBody la valeur true. La bannière s’affichera ainsi tout en haut de la page. Pour le superposer à l’en-tête de votre page, il vous suffit d’appliquer un “padding-top” à l’élément qui le suit en ajoutant à votre feuille de style la mise en forme ci-après : #iubenda-cs-banner + * { padding-top: 180px; }

Voici un exemple de bandeau qui se superpose à l’en-tête.

reloadOnConsent (booléen, false par défaut) : affectez à ce paramètre la valeur true si vous souhaitez recharger automatiquement la page après l’obtention du consentement.

askConsentAtCookiePolicyUpdate (booléen, false par défaut) : affectez à ce paramètre la valeur true si vous souhaitez demander un nouveau consentement après la mise à jour de votre politique relative aux cookies.

enableRemoteConsent (booléen, false par défaut) : affectez à ce paramètre la valeur true pour activer l’enregistrement groupé du consentement (pratique si vous utilisez ce script sur plusieurs sites Web du même réseau). Si vous affectez à ce paramètre la valeur true, notre solution crée un cookie technique sur le domaine iubenda.com qui est utilisé en l’absence de cookie sur le domaine local.

invalidateConsentWithoutLog (booléen, chaîne de caractères, date, true par défaut). Lorsque défini sur true, un nouveau consentement sera demandé chaque fois qu’aucun consentement de l’utilisateur n’a été trouvé et enregistré par le Registre des Préférences Cookies et Consentements.
Si vous indiquez une date (format : “aaaa-mm-jj”), en l’absence de consentement d’un utilisateur enregistré avant cette date dans le Registre des Préférences Cookies et Consentements, un nouveau consentement lui sera demandé (p.ex. invalidateConsentWithoutLog: "2022-01-10“).

googleConsentMode (boolean, string, default null). Lorsque null, l’outil Privacy Controls and Cookie Solution détecte automatiquement s’il faut activer le Mode Consentement de Google (si une variable globale window.dataLayer ou une fonction globale gtag est trouvée).
Lorsque défini sur true, Privacy Controls and Cookie Solution active toujours le Mode Consentement de Google et définit global window.dataLayer (si ce n’a pas été déjà fait).
Si défini sur false, Privacy Controls and Cookie Solution désactive toujours le Mode Consentement.
Définissez ce paramètre sur template si vous utilisez le modèle Google Tag Manager de iubenda et vous souhaitez intégrer le code Privacy Controls and Cookie Solution manuellement (décrit dans cette section).

5.3 Développement

inlineDelay (nombre entier, millisecondes, 500 par défaut) : durée maximale entre les activations des sections du code auxquelles la classe _iub_cs_activate-inline a été ajoutée. Les sections concernées sont activées successivement. Si vous indiquez une valeur inférieure, vous réduirez la durée totale d’activation. Attention : la valeur par défaut est définie de façon à permettre le bon fonctionnement des sections concernées ; en réduisant cette durée, vous risquez d’empêcher l’activation de certaines sections. Si vous modifiez ce paramètre, nous vous recommandons fortement de vérifier sur votre page que la section s’active bien.

rebuildIframe (booléen, true par défaut) : après l’obtention du consentement de l’utilisateur, le comportement par défaut de Privacy Controls and Cookie Solution consiste à générer (ou intégrer) de nouveau le contenu complet des iframes qui avaient été bloquées. Si vous affectez à ce paramètre la valeur false, les iframes qui étaient bloquées sont restaurées après l’obtention du consentement.

Fonctions de rappel

callback {} (objet) : vous permet de définir les fonctions de rappel que Privacy Controls and Cookie Solution de iubenda appellera lors de certains événements.

onReady (fonction) : si le consentement de l’utilisateur n’a pas encore été traité (par exemple, parce qu’il s’agit de sa première visite), la fonction de rappel onReady est appelée dès l’affichage de la bannière. En revanche, si l’utilisateur a déjà consenti à l’installation de cookies, cette fonction est appelée dès l’initialisation de Privacy Controls and Cookie Solution de iubenda. Cette fonction prend pour argument le statut du consentement, soit true s’il est donné et false s’il ne l’est pas.

onBannerShown (fonction) : vous permet d’exécuter un script lors de l’affichage de la bannière.

onBannerClosed (fonction) : vous permet d’exécuter un script lors de la fermeture de la bannière.

onCookiePolicyShown (fonction) : appelée lors de l’affichage de la politique relative aux cookies (dans une fenêtre modale ou sur une page distincte).

onConsentGiven (fonction) : appelée si l’utilisateur a consenti à l’installation de cookies, que ce soit pour la première fois ou lors d’une visite ultérieure.

onConsentFirstGiven (fonction) : appelée la première fois que l’utilisateur donne son consentement et chaque fois qu’il met à jour ses préférences (par exemple en cliquant sur le lien iubenda-cs-preferences-link et en enregistrant ses nouvelles préférences). Cette fonction prend pour argument l’une des chaînes de caractères suivantes : documentScroll, documentMoved, bannerXClose, documentClicked ou cookiePolicyClosed.

onConsentRejected (fonction) : appelée si l’utilisateur a refusé l’installation de cookies.

onConsentFirstRejected (fonction) : appelée lorsque l’utilisateur a refusé de donner son consentement pour la première fois (pas à chaque visite de la page, comme avec onConsentRejected) et à chaque fois qu’il met à jour ses préférences (par exemple en cliquant sur iubenda-cs-preferences-link et en sauvegardant ses nouvelles préférences).

onPreferenceExpressed (fonction) : appelée lorsque l’utilisateur a exprimé une préférence, (pas à chaque visite de la page comme avec onPreferenceExpressed) et à chaque fois qu’il met à jour ses préférences (par exemple en cliquant sur iubenda-cs-preferences-link et en sauvegardant ses nouvelles préférences).

onPreferenceFirstExpressed (fonction) : appelée dès que l’utilisateur exprime une préférence (pas à chaque affichage de la page, comme avec onPreferenceExpressed) et à chaque fois qu’il met à jour ses préférences (par exemple en cliquant sur iubenda-cs-preferences-link et en sauvegardant ses nouvelles préférences)

onPreferenceExpressedOrNotNeeded (fonction) : appelée lorsque l’utilisateur a exprimé une préférence ou lorsque aucune préférence n’est nécessaire, par exemple dans le cas où :

  • la valeur de gdprApplies est true et l’utilisateur a exprimé une préférence,
  • la valeur de gdprApplies est false ou
  • la valeur de gdprAppliesGlobally est false, celle de countryDetection est true et l’utilisateur se trouve hors de l’UE.

onPreferenceNotNeeded (fonction) : appelée lorsque aucune préférence n’est nécessaire, par exemple dans le cas où :

  • la valeur de gdprApplies est false ou
  • la valeur de gdprAppliesGlobally est false, celle de countryDetection est true et l’utilisateur se trouve hors de l’UE.

onConsentRead (fonction) : appelée la première fois que l’utilisateur donne son consentement, puis à chaque chargement de page ultérieur où le consentement est détecté. La fonction de rappel onConsentGiven fait alors doublon avec onConsentRead et n’est pas appelée si cette dernière est définie.

onStartupFailed (fonction) : appelée en cas d’échec du lancement de Privacy Controls and Cookie Solution de iubenda. Prend pour argument un message d’erreur.

onError (fonction) : appelée en cas d’erreur de Privacy Controls and Cookie Solution de iubenda. Prend pour argument un message d’erreur.

onFatalError (fonction) : appelée en cas d’erreur de Privacy Controls and Cookie Solution de iubenda qui interrompt son fonctionnement. Prend pour argument un message d’erreur.

onActivationDone (fonction) : appelée à la fin de l’activation de la section de code.

onBeforePreload (fonction) : appelée au préchargement de Privacy Controls and Cookie Solution, soit avant le chargement des cookies.

onCcpaAcknowledged (fonction) : appelée après la prise de connaissance de la notification exigée par la loi CCPA.

onCcpaFirstAcknowledged (fonction) : appelée uniquement après la première prise de connaissance de la notification exigée par la loi CCPA.

onCcpaOptOut (fonction) : appelée lorsque l’utilisateur s’est opposé à la vente de ses informations personnelles.

onCcpaFirstOptOut (fonction) : appelée uniquement la première fois que l’utilisateur s’oppose à la vente de ses informations personnelles et à chaque fois qu’il met à jour ses préférences (par exemple en cliquant sur iubenda-cs-preferences-link et en sauvegardant ses nouvelles préférences).

on2ndLayerShown (fonction) : appelée lorsque le deuxième niveau d’information du bandeau est affiché.

onCookiePolicyShown (fonction) : appelée lorsque la politique relative aux cookies est affichée (dans une fenêtre de dialogue ou sur une autre page).

Voir un exemple de configuration ↓

Débogage

skipSaveConsent (booléen, false par défaut) : si vous affectez à ce paramètre la valeur true, le consentement n’est pas enregistré dans un cookie de préférence.

logLevel (chaîne de caractères, “nolog” par défaut) : définit le volume d’informations affiché dans les console logs en cas de problème. Valeurs disponibles : “debug”, “info”, “warn”, “error”, “fatal”, “nolog”.

preferenceCookie {} (objet) : vous permet de personnaliser la durée du cookie de préférence déposé par iubenda dans le navigateur de l’utilisateur pour enregistrer son consentement. En particulier, le paramètre à définir est expireAfter.

expireAfter (nombre, 365 par défaut) : durée de validité du consentement donné par l’utilisateur sur un site Web, en nombre de jours. Remarque : cette valeur est mise à jour à chaque visite ultérieure de l’utilisateur.

ccpaCookie {} (objet) : vous permet de personnaliser la durée du cookie qui enregistre la prise de connaissance de la notification exigée par la loi CCPA. En particulier, le paramètre à définir est expireAfter.

expireAfter (nombre, 365 par défaut) : durée de validité en nombre de jours.

localConsentDomain (chaîne de caractères, null par défaut) : domaine sur lequel vous souhaitez enregistrer le consentement recueilli auprès des utilisateurs. Si vous n’indiquez aucun domaine, le consentement sera enregistré dans un cookie sur le domaine de la page actuelle. Par exemple, si l’utilisateur visite www.exemple.com, son consentement sera enregistré dans un cookie déposé sur le domaine exemple.com.

Si le comportement par défaut n’est pas adapté à votre situation, vous devez indiquer le domaine adéquat. Par exemple, si le site Web se trouve sur le domaine www.paesaggiurbani.italia.it, le consentement doit être donné pour paesaggiurbani.italia.it (et non pour italia.it). Dans ce cas, vous devez affecter au paramètre localConsentDomain la valeur “paesaggiurbani.italia.it”.

Remarque : dans une telle situation, si vous n’indiquez aucun domaine, il est possible qu’un même utilisateur voie le bandeau s’afficher à chaque visite ou affichage ultérieur de la page.

localConsentDomainExact (booléen, null par défaut) – Cela vous permet de spécifier le domaine exact, dans lequel vous souhaitez enregistrer le consentement fourni par l’ utilisateur.

Remarque : si les deux options (localConsentDomain et localConsentDomainExact) sont configurées, seule l’option localConsentDomainExact est envisagée.

localConsentPath (chaîne de caractères, “/” par défaut) : chemin, sur le domaine local, dans lequel vous souhaitez enregistrer le consentement donné par l’utilisateur. Par défaut, le consentement de l’utilisateur est enregistré sur le domaine local dans le cookie se trouvant dans le chemin « / ». Le cookie est ainsi accessible depuis toutes les pages du domaine que l’utilisateur consulte.

Par exemple, si vous ne voulez pas que le cookie de préférence déposé pour le chemin www.exemple.com/percorso1 soit également utilisé pour le chemin www.exemple.com/percorso2 (lors de la navigation) et vice versa, vous devrez affecter à ce paramètre la valeur « /percorso1 » dans le premier cas et la valeur « /percorso2 » dans le second cas.

Paramètres supplémentaires

whitelabel (booléen, true par défaut) : affectez à ce paramètre la valeur false pour afficher les références à la marque iubenda au deuxième niveau d’information.

invalidateConsentBefore (“AAAA-MM-JJ”, millisecondes depuis l’epoch, null par défaut) : tous les consentements recueillis avant cette date seront invalidés. Les consentements recueillis à cette date et par la suite ne seront pas invalidés.

maxCookieSize (nombre, 4096 par défaut) : certains navigateurs refusent les cookies de plus de 4096 caractères. Pour contourner ce problème, l’outil Privacy Controls and Cookie Solution vous permet de diviser les cookies en plusieurs fichiers. Le paramètre maxCookieSize vous permet donc de définir la longueur maximale de chaque fichier en nombre de caractères (voir aussi maxCookieChunks).

maxCookieChunks (nombre, 5 par défaut) : vous permet de définir le nombre maximal de fichiers qui peuvent constituer un cookie (voir aussi maxCookieSize).

Remarque : si la longueur du cookie à déposer dépasse maxCookieSize * maxCookieChunks (soit 20 480 caractères avec les valeurs par défaut), le cookie ne sera pas déposé.

timeoutLoadConfiguration (nombre entier, millisecondes, 30000 par défaut) : délai alloué au chargement de la configuration distante avant de signaler une erreur de timeout. Vous pouvez augmenter cette valeur pour laisser à la solution Privacy Controls and Cookie Solution le temps de charger les ressources nécessaires en cas de lenteur du réseau.

startOnDomReady (booléen, true par défaut) : si la valeur est true, la bannière s’affichera ou le code bloqué s’activera dès que le document sera chargé, soit dès que le statut du DOM sera « chargé » (loaded). Si vous affectez à ce paramètre la valeur false, Privacy Controls and Cookie Solution démarrera une fois la page entièrement chargée, soit lorsque le statut du DOM sera « chargement terminé » (completed) et que toutes les ressources incluses dans la page auront été chargées.

Classes

iubenda-cs-close-btn : si vous ajoutez cette classe à un élément de la page, lorsqu’un utilisateur cliquera sur cet élément, la bannière se fermera et le consentement sera considéré comme donné (comme s’il avait cliqué sur le bouton de fermeture du bandeau).

Mise en garde : en Europe, certaines autorités nationales de protection des données NE reconnaissent PAS la validité d’un tel mécanisme de consentement. Vous devez donc évaluer soigneusement cet ajout au regard du droit applicable.

iubenda-cs-cookie-policy-lnk : si vous ajoutez cette classe à un élément de la page, lorsqu’un utilisateur cliquera sur cet élément, votre politique relative aux cookies s’affichera (comme s’il avait cliqué sur le lien vers la politique relative aux cookies). Remarque : pour assurer le bon affichage de votre politique relative aux cookies, vous ne devez utiliser la classe iubenda-cs-cookie-policy-lnk (ajoutée au lien vers votre politique relative aux cookies qui figure sur le bandeau cookies) à aucun autre endroit sur la même page.

iubenda-cs-preferences-link : ajoutez cette classe à un élément de la page pour permettre aux utilisateurs de mettre à jour leurs préférences en matière de cookies même après la fermeture du bandeau cookies.

5.4 Exemples

Voici un exemple de configuration qui inclut les paramètres facultatifs :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": 896537, //use your siteId
        "cookiePolicyId": 8207462, //use your cookiePolicyId
        "enableRemoteConsent": "false",
        "banner": {
            "position": "top",
            "slideDown": "false",
            "content": "This website or its third-party tools use cookies. Please refer to the %{cookie_policy_link} if you want to learn more or withdraw your consent.",
            "cookiePolicyLinkCaption": "cookie policy",
            "backgroundColor": "#CCC",
            "textColor": "#000",
            "fontSize": "14px",
            "innerHtmlCloseBtn": "OK"
        },
        "callback": {
            "onPreferenceExpressed": function(preference) {
                console.log('onPreferenceExpressed', preference);
            }
        },
        "preferenceCookie": {
            "expireAfter": 180
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Autres exemples de configurations possibles :

5.5 Variables de substitution pour les sections de code bloquées

Si l’outil Privacy Controls and Cookie Solution bloque une partie de votre contenu parce que vous ne pouvez pas l’afficher tant que l’utilisateur n’a pas donné son consentement ou une fois qu’il a refusé la finalité correspondante, vous souhaitez peut-être afficher à la place une notification personnalisée.

Pour cela, vous pouvez créer un élément <div> contenant la notification personnalisée que vous souhaitez afficher à la place du contenu indisponible, puis mettre en place un script de blocage préalable des cookies qui retire cet élément <div> une fois que l’utilisateur a donné son consentement.

Exemple

<div id="content-before-consent">This will be removed as
soon as the user gives consent to purpose X</div>
      // Where X is the purpose for which consent needs to be given to
         run that script

<script type="text/plain" class="_iub_cs_activate" data-iub-purposes="X">
     // Where X is the purpose for which consent needs to be given to
        run that script

  ;(function() {
    var divToRemove = document.getElementById('content-before-consent');
    if (divToRemove && divToRemove.parentNode) {
      divToRemove.parentNode.removeChild(divToRemove);
    }
  })();
</script>

5.6 Activateur inline

Vous avez la possibilité d’intégrer directement à votre page la partie du code relative aux scripts. On parle alors d’activateur inline. L’activateur inline permet de garantir l’activation des scripts lorsque la ressource principale iubenda_cs.js est indisponible ou génère une erreur.

Il peut pour cela tenir compte du consentement (voir l’option forceSafeActivation ci-dessous), mais son rôle se limite strictement à l’activation des scripts. Vous ne pouvez l’utiliser ni pour afficher le bandeau cookies ou la politique relative aux cookies ni pour gérer l’obtention du consentement.

Il apporte un niveau de protection supplémentaire en cas d’erreur, mais ne peut pas se substituer au code principal de Privacy Controls and Cookie Solution de iubenda.

Remarque : l’activateur inline appelle uniquement la fonction onActivationDone et ignore toute autre fonction.

L’activateur inline s’accompagne de deux options de configuration supplémentaires :

  • safeTimeout (millisecondes, 0 par défaut) : délai préalable au début du fonctionnement de l’activateur inline.
  • forceSafeActivation (booléen, false par défaut) : si la valeur est true, l’activateur inline active les scripts quel que soit le statut du consentement. Si la valeur est false, l’activateur inline n’active les scripts que lorsque l’utilisateur a donné son consentement (d’après le cookie de préférence du domaine de la page concernée).

L’activateur inline est disponible aux URL suivantes :

Cadre de transparence et de consentement de l’IAB

Si vous avez activé l’option de compatibilité avec le Cadre de transparence et de consentement de l’IAB (TCF) pour permettre la personnalisation des préférences en matière de suivi publicitaire, vous pouvez utiliser l’activateur inline à la fois pour le fichier safe.js et pour le fichier safe-tcf-v2.js.

Le fichier safe-tcf-v2.js est disponible aux URL suivantes :

Exemples

Vous devez intégrer le contenu du fichier safe.js (et celui du fichier safe-tcf-v2.js) à votre page après les configurations initiales et avant le code de chargement du fichier iubenda_cs.js.

VERSION ACTUELLE
<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
    _iub.csConfiguration.safeTimeout = 500; //custom option
    _iub.csConfiguration.forceSafeActivation = false; //custom option
</script>

<!-- inline activator - safe.js (current channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/safe.js and paste here
    //]]>
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Exemple de configuration dans laquelle la version 2.0 du TCF de l’IAB est activée :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "enableTcf": true,
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script>

<!-- inline activator - safe.js (current channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/safe.js and paste here
    //]]>
</script>

<!-- inline activator - safe-tcf-v2.js (current channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/tcf/safe-tcf-v2.js and paste here
    //]]>
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
VERSION BÊTA
<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
    _iub.csConfiguration.safeTimeout = 500; //custom option
    _iub.csConfiguration.forceSafeActivation = false; //custom option
</script>

<!-- inline activator - safe.js (beta channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/beta/safe.js and paste here
    //]]>
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/beta/iubenda_cs.js" charset="UTF-8" async></script>

Exemple de configuration dans laquelle la version 2.0 du TCF de l’IAB est activée :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "enableTcf": true,
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/beta/stub-v2.js"></script>

<!-- inline activator - safe.js (beta channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/beta/safe.js and paste here
    //]]>
</script>

<!-- inline activator - safe-tcf-v2.js (beta channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/tcf/beta/safe-tcf-v2.js and paste here
    //]]>
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/beta/iubenda_cs.js" charset="UTF-8" async></script>
VERSION STABLE
<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
    _iub.csConfiguration.safeTimeout = 500; //custom option
    _iub.csConfiguration.forceSafeActivation = false; //custom option
</script>

<!-- inline activator - safe.js (stable channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/stable/safe.js and paste here
    //]]>
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/stable/iubenda_cs.js" charset="UTF-8" async></script>

Exemple de configuration dans laquelle la version 2.0 du TCF de l’IAB est activée :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "enableTcf": true,
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stable/stub-v2.js"></script>

<!-- inline activator - safe.js (stable channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/stable/safe.js and paste here
    //]]>
</script>

<!-- inline activator - safe-tcf-v2.js (stable channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/tcf/stable/safe-tcf-v2.js and paste here
    //]]>
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/stable/iubenda_cs.js" charset="UTF-8" async></script>

Le code de l’activateur fait partie intégrante de Privacy Controls and Cookie Solution de iubenda. Nous pouvons donc le modifier pour y intégrer de nouvelles fonctionnalités, des améliorations ou des correctifs.

Pour faciliter la gestion de la version de l’activateur intégrée à votre page, vous pouvez utiliser la variable _iub.csSafeActivatorVersion qui stocke la version du fichier iubenda_cs.js dont l’activateur est extrait.

5.7 API

Privacy Controls and Cookie Solution de iubenda propose une API JavaScript qui vous permet d’interagir facilement avec certaines de ses fonctions (méthodes) principales.

Syntaxe : _iub.cs.api.NOM_DE_LA_METHODE

Voici les méthodes disponibles :

printErrors() : affiche toute erreur de Privacy Controls and Cookie Solution de iubenda dans la console du navigateur.

showCP() : affiche la politique relative aux cookies (comme lorsque vous cliquez sur le lien vers la politique relative aux cookies dans le bandeau cookies ou sur un autre lien auquel la classe iubenda-cs-cookie-policy-lnk a été ajoutée, comme expliqué ici).

openPreferences( ) : permet aux utilisateurs de mettre à jour leurs préférences en matière de cookies même après la fermeture du bandeau cookies (comme lorsque vous cliquez sur un élément auquel la classe iubenda-cs-preferences-link a été ajoutée).

resetCookies() – cette méthode permet de réinitialiser les cookies de préférence.

showTcfVendors() : rouvre la liste des partenaires du TCF (comme lorsque les utilisateurs cliquent sur un élément auquel la classe iubenda-vendor-list-link a été ajoutée).

consentGiven() : relève que l’utilisateur donne son consentement. Cette méthode accepte les paramètres facultatifs suivants :

  • eventName (chaîne de caractères, “documentClicked” par défaut) : indique par quel type d’acte le consentement est donné. Valeurs disponibles : documentClickeddocumentScrolleddocumentMovedbannerXclose, cookiePolicyClosed.
  • force (booléen, false par défaut) : si la valeur est false, Privacy Controls and Cookie Solution de iubenda s’assure que le bandeau cookies est affiché avant d’accepter le consentement. Si la valeur est true, le consentement est accepté quoi qu’il arrive. Remarque : cette méthode est appelée en partant du principe qu’un consentement donné par ce biais a la même valeur qu’un consentement donné via l’interface utilisateur, par exemple par défilement de la page. Toutes les actions qui doivent être réalisées après l’obtention du consentement sont donc bien réalisées, y compris la mise à jour du cookie de préférence, l’activation des sections de code qui étaient auparavant bloquées et l’appel des fonctions de rappel onConsentFirstGiven et onConsentRead. Si vous souhaitez uniquement activer les sections de code bloquées, utilisez la méthode activateSnippets().

activateSnippets() : active les sections de code qui étaient auparavant bloquées. Vous pouvez appeler cette méthode à plusieurs reprises, auquel cas les sections de code déjà activées ne seront pas prises en compte. Elle est donc utile dans le cas où, lors de la collecte du consentement, votre installation ajoute à la page de façon dynamique le contenu bloqué qui doit être activé (par exemple en cas de chargement asynchrone ou de défilement infini).

runOnActivationDoneCallback (booléen, false par défaut) : si la valeur est true, exécute la fonction de rappel onActivationDone à la fin de l’activation de la section de code (voir la fonction de rappel onActivationDone).

isConsentGiven() (élément du DOM, window.document par défaut) : retourne true si le consentement a été donné et false dans le cas contraire.

Remarque : vous ne pouvez pas utiliser cette fonction si vous avez affecté au paramètre banner.rejectButtonDisplay ou perPurposeConsent la valeur true. Par ailleurs, si vous avez activé la compatibilité avec le Cadre de transparence et de consentement, vous devez absolument ajouter l’activateur synchrone (safe-tcf-v2.js).

setConsentOnScrollOnElement() (booléen) : définit l’élément sur lequel le défilement sera observé aux fins du consentement. Cette méthode est utile lorsque vous souhaitez utiliser le paramètre consentOnScrollOnElement, mais que l’élément du DOM n’est pas encore disponible à l’initialisation de Privacy Controls and Cookie Solution. Il est alors possible d’utiliser la fonction de rappel onBannerShow (voir un exemple) qui s’exécute à l’initialisation de Privacy Controls and Cookie Solution.

storeConsent() : enregistre le consentement dans des cookies. Si vous souhaitez par exemple migrer les consentements depuis un ancien prestataire, vous pourriez appeler cette méthode à l’intérieur de la fonction de rappel onBeforePreload lorsque le consentement est déjà donné par une autre plateforme. Par ailleurs, si vous êtes un partenaire, vous pouvez utiliser storeConsent() pour tester notre solution (voir cette démonstration sur CodePen).

gdprApplies() (booléen) : retourne true si les mesures de protection prévues par le RGPD sont appliquées à l’utilisateur actuel et false dans le cas contraire.

ccpaApplies() (booléen) : retourne true si les mesures de protection prévues par la loi CCPA sont appliquées à l’utilisateur actuel et false dans le cas contraire.

askCcpaOptOut() : affiche une boîte de dialogue qui demande à l’utilisateur de confirmer son opposition à la vente de ses informations personnelles.

isCcpaAcknowledged() : indique si l’utilisateur a pris connaissance de la notification exigée par la loi CCPA.

isCcpaOptedOut() : indique si l’utilisateur s’est opposé à la vente de ses informations personnelles.

rejectAll() : refuse tous les cookies.

Remarques : vous pouvez également appeler les méthodes de l’API de Privacy Controls and Cookie Solution depuis une iframe.

Voir aussi