Gestionnaire de consentement

Le gestionnaire de consentement permet à l'usager de définir ses préférences sur l'utilisation de ses données personnelles, notamment le dépôt de cookies non fonctionnels dans son navigateur.

HTML

Le composant Gestionnaire de consentement est composé de trois éléments principaux :

  • Un bandeau de cookies.
  • Une modale de gestion des cookies.
  • Un placeholder pour les contenus masqués.

Structure du bandeau de cookies

Le bandeau de cookies est composé des éléments suivants :

  • Un élément <div> avec la classe fr-consent-banner pour le conteneur du bandeau.
  • Un titre contenu dans un élément <h2>, ou autre en fonction du contexte, avec la classe .fr-h6.
  • Un bloc de contenu fr-consent-banner__content. Le texte doit être contenu dans un élément <p>. L'utilisation de la classe utilitaire .fr-text--sm permet de réduire la taille du texte.
  • Un groupe de boutons fr-consent-banner__buttons.
    • Nous préconisons l'utilisation d'un groupe de bouton "inline" à partir du breakpoint SM, aligné à droite, et inversé à partir du breakpoint SM. Voir la documentation sur les boutons pour plus d'informations.
    • Utilisez des boutons primaires pour accepter et refuser les cookies, et un bouton secondaire pour personnaliser les cookies.
    • Le bouton de personnalisation doit être associé à une modale de gestion des cookies.

Exemple de structure de bandeau

<div class="fr-consent-banner">
    <h2 class="fr-h6">À propos des cookies sur nomdusite.fr</h2>
    <div class="fr-consent-banner__content">
        <p class="fr-text--sm">Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Pour en savoir plus, visitez la page <a href="">Données personnelles et cookies</a>. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.</p>
    </div>
    <ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
        <li>
            <button class="fr-btn" title="Autoriser tous les cookies">
                Tout accepter
            </button>
        </li>
        <li>
            <button class="fr-btn" title="Refuser tous les cookies">
                Tout refuser
            </button>
        </li>
        <li>
            <button class="fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="consent-modal" title="Personnaliser les cookies">
                Personnaliser
            </button>
        </li>
    </ul>
</div>

Structure de la modale de gestion des cookies

La modale de gestion des cookies est composée des éléments suivants :

  • Une modale de taille LG (voir la documentation sur les modales ) contenant un bouton de fermeture, un titre et un bloc de contenu fr-consent-manager. Ce bloc contient :
    • Une liste de services de cookies, chaque service étant représenté par un élément <div> avec la classe fr-consent-service.
      • Le premier bloc service permet d'activer ou désactiver tous les services. Nous ajouterons ici une classe fr-consent-manager__header pour le style de la légende. Les libellés des boutons radios seront "Tout accepter" et "Tout refuser".
      • Le second élément correspond aux services essentiels, qui ne peuvent pas être désactivés. Le bloc contient fieldset avec une légende, une description et deux boutons radio. Le bouton radio "Accepter" est coché par défaut, et le bouton "Refuser" est désactivé.
      • Pour chaque services non essentiels, un fieldset fr-fieldset avec une légende fr-consent-service__title, deux boutons radio dans un conteneur fr-consent-service__radios, une description fr-consent-service__desc et un dépliant "Voir plus de détails" permettant d'ouvrir un collapse.
        • A l'intérieur de ce collapse, on retrouve une liste de sous finalités du service, avec pour chacune un bouton "Accepter" et un bouton "Refuser", et optionnellement une description.
    • Un groupe de boutons fr-consent-manager__buttons alignés à droite et en ligne à partir du breakpoint SM :
      • Ce groupe ne contient qu'un seul bouton, primaire, pour enregistrer les préférences. On utilise le groupe pour ces fonctionnalités de positionnement.

Exemple de structure de modale de gestion des cookies

Structure du placeholder de contenu masqué

Lorsqu'un contenu est masqué, un placeholder doit être affiché pour informer l'utilisateur de la nécessité d'accepter les cookies pour accéder à ce contenu.

Le placeholder est composé des éléments suivants :

  • Un élément <div> avec la classe fr-consent-placeholder pour le conteneur du placeholder.
  • Un titre "[Nom du service] est désactivé" contenu dans un élément <hx>, en fonction du contexte, avec la classe .fr-h6. Vous pouvez utiliser une classe utilitaire pour ajouter une marge en bas en fonction du besoin, ex : .fr-mb-2v.
  • Un bloc de texte <p> décrivant pourquoi le contenu est masqué. Vous pouvez utiliser une classe utilitaire pour ajouter une marge en bas en fonction du besoin, ex : .fr-mb-6v.
  • Un bouton primaire pour autoriser le dépôt de cookies et accéder au contenu.

Exemple de structure HTML de placeholder

<div class="fr-consent-placeholder">
    <h4 class="fr-h6 fr-mb-2v">**Nom du service** est désactivé</h4>
    <p class="fr-mb-6v">Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.</p>
    <button class="fr-btn" title="Autorisez le dépôt de cookies pour accéder au service **Nom du service**">
        Autoriser
    </button>
</div>

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core et du gestionnaire de consentement doivent être importés. Le composant a aussi des dépendances avec le composant modale (modal), bouton (button), formulaire (form), et case à cocher (checkbox). Il sera aussi nécessaire d'importer les styles de ces composants. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger. 

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/modal/modal.min.css" rel="stylesheet">
<link href="dist/component/button/button.min.css" rel="stylesheet">
<link href="dist/component/form/form.min.css" rel="stylesheet">
<link href="dist/component/checkbox/checkbox.min.css" rel="stylesheet">
<link href="dist/component/consent/consent.min.css" rel="stylesheet">

NB : Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé : 

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/modal/modal.legacy.min.css" rel="stylesheet">
<link href="dist/component/button/button.legacy.min.css" rel="stylesheet">
<link href="dist/component/form/form.legacy.min.css" rel="stylesheet">
<link href="dist/component/checkbox/checkbox.legacy.min.css" rel="stylesheet">
<link href="dist/component/consent/consent.legacy.min.css" rel="stylesheet">

Style du composant

Aucune variation de style n'est possible pour le composant Gestionnaire de consentement.

JavaScript

Le composant Gestionnaire de consentement utilise le JavaScript du composant Modale , et du core pour le collapse des sous finalité dans la modale de gestion des cookies.

Installation du JavaScript

Pour fonctionner, la modale de gestion des cookies nécessite l'utilisation de JavaScript. Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant </body>) : 

<script type="module" src="dist/core/core.module.min.js"></script>
<script type="module" src="dist/component/modal/modal.module.min.js"></script>

NB: Il est aussi possible d'importer le Js global du DSFR dsfr.module.js

Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé : 

<script type="text/javascript" nomodule href="dist/legacy/legacy.nomodule.min.js" ></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/component/modal/modal.nomodule.min.js"></script>

Une fois le JavaScript chargé, le composant fonctionne automatiquement.

API

Le composant Gestionnaire de consentement est proposé de manière statique. Il convient d'utiliser l'API de la plateforme de gestion du consentement (CMP) de votre choix pour l'intégrer au sein de la structure du composant DSFR.

Événements

Le Système de Design fournit des événements personnalisés pour les actions uniques de la part de certains composants réactifs listés sur la page de l' API Javascript .

Sur la modale de gestion des cookies, les événements suivants sont disponibles :

événements
Événement Action Élément Attribut
dsfr.conceal Fermeture de la modale Modal data-fr-js-modal
dsfr.disclose Ouverture de la modale Modal data-fr-js-modal
dsfr.click Click sur le bouton d'ouverture ModalButton data-fr-js-modal-button

Thème DSFR pour Tarteaucitron

Il existe un thème DSFR pour le gestionnaire de consentement Tarteaucitron. Il s'agit d'une surcouche CSS pour adapter le gestionnaire de consentement de Tarteaucitron au design du DSFR. Vous pouvez trouvez ce projet sur le dépôt GIT GouvernementFR/dsfr-theme-tarteaucitron

Information

Il n’y a aucune dépendance au DSFR - le thème propose sa propre CSS pour simuler le design du composant DSFR. Le code HTML et JS sont ceux de tarteaucitron. Le thème a été testé sur les versions 1.9.1, 1.8.4 et 1.8.3 de tarteaucitron, avec les libellés de boutons présent dans le bandeaux de consentement ci-dessus ('Personnaliser', ‘Tout refuser’, ‘Tout accepter’).

Il est toutefois recommandé, dans la mesure du possible, d'utiliser la structure HTML du composant DSFR telle quelle, plutôt que thématiser une CMP, un pour garantir une meilleure intégration et une bonne maintenabilité.

Note de version

Voir les évolutions sur github

v1.11.0 - 11 décembre 2023

correction espacement des radios accepter

  • ajustement de la marge droite des radios "accepter"

🐛 fix

consent

#768

token de couleur des titres de finalité

  • passe la couleur des titres de finalité en $text-title-grey

🐛 fix

consent

#767

correction lien & cookies obligatoires

  • coche les cookies obligatoires par defaut
  • étend le lien voir plus de detail

🐛 fix

consent

#754

ajoute un niveau de titre sur la banniere de consentement

  • le titre de la baniière devient un <h4> à la place d'un <p> dans la structure HTML du composant

fix

consent

#719

coche les cookies obligatoires par defaut

  • Les cookies obligatoires doivent être systématiquement cochés

🐛 fix

consent

#735

v1.10.0 - 19 juillet 2023

correctif espacement et couleur

  • Corrige description d'une finalité de 3v à 2v en margin-bottom
  • Homogénéité avec accordion, nav et sidemenu sur le bouton de la modale de consentement “voir plus de détails” :
    • enlever le soulignement
    • mettre en bleu le lien “voir plus de détail”

🐛 fix

consent

#662

v1.9.1 - 11 avril 2023

consent placeholder video mal centré

Dans le cas d'une vidéo le placeholder est en display block Retrait de la propriété non désirée

🐛 fix

consent

#573

v1.3.0 - 18 janvier 2022

titre bandeau en h2

fix

consent

#187

v1.2.0 - 17 novembre 2021

fonctions pour générer l'objet consent

refactor

consent

#103

ajout d'id aux services

fix

consent

#101

v1.0.0 - 24 juin 2021

Ajout du composant gestionnaire de consentement

feat

consent

#12

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github