Gérer les cookies et les contenus soumis au consentement

🪄 En un clin d’œil

Par défaut, Sites Conformes peut déposer des cookies techniques liés à ses différentes briques techniques : Django, Wagtail et le DSFR.

Ces cookies sont nécessaires au fonctionnement du site et ne nécessitent pas le consentement du visiteur.

Si votre site intègre des contenus provenant de services tiers, comme des vidéos ou certains outils externes, il peut être obligatoire d’utiliser une bannière de consentement.

Pour cela :

• ouvrez l’administration du site ;
• allez dans Paramètres, puis Configuration du site ;
• ouvrez la section Scripts personnalisés ;
• cochez Utiliser Tarteaucitron ;
• ajoutez les services nécessaires dans les scripts personnalisés ;
• utilisez dans vos contenus les balises compatibles avec Tarteaucitron ;
• vérifiez le rendu sur le site public.

🔎 En détails

Avant de commencer

Avant de configurer une bannière de consentement, identifiez les contenus ou services intégrés sur votre site.

Les cookies techniques nécessaires au fonctionnement du site n’ont pas besoin de consentement.

En revanche, il est obligatoire recueillir le consentement de vos visiteurs lorsque des contenus sont intégrés depuis certains services tiers.

Étape 1 — Identifier les cookies techniques présents par défaut

Sites Conformes est basé sur Django, Wagtail et le système de design de l’État.

Ces outils peuvent déposer des cookies techniques nécessaires au bon fonctionnement du site.

Les principaux cookies concernés sont :

• csrftoken : cookie de sécurité de Django, utilisé sur les pages comportant des formulaires ;
• scheme : cookie du DSFR définissant le thème d’affichage, clair ou sombre, avec la valeur par défaut system ;
• sessionid : cookie de session de Django, utilisé pour les utilisateurs authentifiés ;
• wagtail_* : cookies techniques de Wagtail, utilisés pour les utilisateurs authentifiés.

Ces cookies sont nécessaires au fonctionnement du site ou de son administration.

Ils ne nécessitent pas d’autorisation préalable des visiteurs.

Étape 2 — Vérifier si une bannière de consentement est nécessaire

Une bannière de consentement n’est pas nécessaire uniquement parce que le site utilise Sites Conformes.

Elle devient utile et même obligatoire si vous ajoutez des contenus ou services tiers qui nécessitent le consentement des visiteurs.

Par exemple :

• une vidéo intégrée depuis une plateforme externe ;
• un service externe susceptible de déposer des cookies ;
• un script tiers nécessitant un consentement préalable.

Dans ce cas, vous pouvez utiliser l'outil (Ouvre une nouvelle fenêtre) Tarteaucitron.

Étape 3 — Activer Tarteaucitron

Depuis la version 1.8.0, Sites Conformes permet d’utiliser Tarteaucitron pour gérer une bannière de consentement.

Pour l’activer :

1. connectez-vous à l’administration du site ;
2. dans le menu latéral, cliquez sur Paramètres ;
3. cliquez sur Configuration du site ;
4. ouvrez la section Scripts personnalisés ;
5. cochez la case Utiliser Tarteaucitron ;
6. enregistrez les modifications.

Tarteaucitron est alors activé sur le site.

Étape 4 — Ajouter les services nécessaires

Une fois Tarteaucitron activé, vous devez déclarer les services tiers utilisés sur le site.

Pour cela, référez-vous à l’étape 3 de (Ouvre une nouvelle fenêtre) la documentation de Tarteaucitron.

Ne tenez pas compte des étapes 1 et 2 de la documentation de Tarteaucitron : elles sont déjà prises en charge par Sites Conformes.

Les services doivent être ajoutés dans la section Scripts personnalisés de la configuration du site.

Selon le service utilisé, une personnalisation peut être nécessaire pour assurer une bonne compatibilité avec le système de design de l’État.

En cas de doute, contactez l’équipe Sites Conformes.

Étape 5 — Utiliser les bonnes balises dans les contenus

Activer Tarteaucitron ne suffit pas toujours.

Les contenus intégrés dans les pages doivent utiliser des balises compatibles avec le paramétrage de Tarteaucitron.

Cela permet d’éviter que le contenu tiers se charge avant que le visiteur ait donné son consentement.

Lorsque vous ajoutez un contenu provenant d’un service tiers, vérifiez donc :

• que le service est bien déclaré dans les scripts personnalisés ;
• que le contenu utilise les balises prévues pour Tarteaucitron ;
• que le contenu ne se charge pas directement avant consentement ;
• que le rendu reste conforme au système de design de l’État.

▶️ Cas particulier : Intégrer une vidéo YouTube

L’intégration de vidéos YouTube nécessite une configuration spécifique. N’utilisez pas le bloc vidéo standard. Utilisez un bloc HTML avec le paramétrage compatible Tarteaucitron.

Déclarer le service YouTube

Dans l’administration du site, ouvrez : Configuration du site → Scripts personnalisés → Scripts dans la section <body>

Ajoutez le script suivant :

<script type="text/javascript">
(tarteaucitron.job = tarteaucitron.job || []).push('youtube'); document.addEventListener("youtube_loaded", function(){
const yt_el = document.querySelector('.youtube_player iframe');
yt_el.classList.add('fr-responsive-vid');
});
</script>

Ce script déclare le service YouTube auprès de Tarteaucitron et ajoute la classe nécessaire au bon affichage de la vidéo avec le système de design de l’État.

Ajouter la vidéo dans une page

Dans le contenu de la page, n’utilisez pas le bloc vidéo. Ajoutez un bloc HTML avec le code suivant :

<figure role="group" class="fr-content-media">
<div class="youtube_player fr-content-media" videoID="$VIDEO_ID" theme="light" rel="1" controls="1" showinfo="1" autoplay="0" mute="0" loop="0" loading="0" data-start="start" data-end="end"></div> <figcaption class="fr-content-media__caption"> <a class="fr-link" href="https://www.youtube-nocookie.com/embed/$VIDEO_ID">Voir sur le site</a> </figcaption> </figure>

Remplacez $VIDEO_ID par l’identifiant de la vidéo YouTube (généralement la partie située après v= dans l'url de la vidéo).

Vérifier le rendu

Après publication, ouvrez la page sur le site public. Vérifiez que :

• la bannière de consentement s’affiche correctement ;
• la vidéo ne se charge pas avant consentement ;
• le bouton de consentement fonctionne ;
• la vidéo s’affiche correctement après acceptation ;
• le rendu est correct sur ordinateur et sur mobile.

📖 Pour aller plus loin sur les obligations liées au consentement

La gestion du consentement dépend des services tiers intégrés au site et des traceurs effectivement déposés.

Pour vérifier vos obligations, consultez les ressources de la CNIL :

• (Ouvre une nouvelle fenêtre) Cookies et traceurs : comment mettre mon site web en conformité ? : le guide le plus pratique pour comprendre quand le consentement est nécessaire et comment le recueillir.
• (Ouvre une nouvelle fenêtre) Cookies et traceurs : que dit la loi ? : une présentation du cadre juridique applicable aux cookies et autres traceurs.
• (Ouvre une nouvelle fenêtre) Cookies : solutions pour les outils de mesure d’audience : une ressource utile si vous utilisez un outil de statistiques ou de mesure d’audience.

En cas de doute, rapprochez-vous de la personne chargée de la protection des données dans votre administration.

📋 Points d’attention

Tous les cookies ne nécessitent pas de consentement

Les cookies techniques nécessaires au fonctionnement du site, de Django, de Wagtail ou du DSFR ne nécessitent pas d’autorisation préalable.

Il n’est donc pas nécessaire d’activer une bannière de consentement uniquement pour ces cookies.

Tarteaucitron sert aux contenus tiers

Tarteaucitron doit être utilisé lorsque des contenus ou services tiers intégrés au site nécessitent une gestion du consentement.

Avant d’ajouter un service tiers, vérifiez s’il est réellement nécessaire au site.

Ne pas suivre toute la documentation Tarteaucitron

Pour Sites Conformes, ne suivez pas les étapes 1 et 2 de (Ouvre une nouvelle fenêtre) la documentation Tarteaucitron.

Utilisez uniquement l’étape 3 pour déclarer les services nécessaires.

Certains services peuvent nécessiter une adaptation

Les services disponibles sont ceux prévus dans la documentation Tarteaucitron.

Cependant, une personnalisation peut être nécessaire pour garantir un rendu compatible avec le système de design de l’État.

En cas de doute, contactez l’équipe Sites Conformes.

Tester le site public après configuration

Après toute modification liée aux scripts ou aux contenus tiers, testez le site public.

Vérifiez le comportement de la bannière, le chargement des contenus et l’affichage sur mobile.

🚩 Erreurs fréquentes

• Activer une bannière de consentement alors que le site ne contient que des cookies techniques.
• Oublier d’activer Utiliser Tarteaucitron dans la configuration du site si une bannière de consentement est requise.
• Suivre les étapes 1 et 2 de la documentation Tarteaucitron alors qu’elles ne sont pas nécessaires dans Sites Conformes.
• Ajouter un contenu tiers sans déclarer le service correspondant.
• Utiliser le bloc vidéo standard pour une vidéo YouTube nécessitant Tarteaucitron.
• Oublier de remplacer $VIDEO_ID par l’identifiant réel de la vidéo YouTube.
• Ajouter un script sans tester le rendu sur le site public.
• Ne pas vérifier le fonctionnement de la bannière sur mobile.