Aller au contenu principal
Woop Technology
Carte de l'Europe en trame de points : la Suisse mise en évidence, avec Alt St. Johann, le siège de l'entrepriseAlt St. Johann
Toutes les références
Étude de cas technique · Protection des données & architecture

Une architecture de consentement qui fonctionne d’un projet à l’autre

Pour nos applications web, nous avons développé un moteur de consentement central qui gère les consentements, les services soumis à consentement et les valeurs de stockage déclarées.

Données du projet
Type
Étude de cas technique
Module
@woop-technology/consent
Projet de référence
Woop Art
Statut
En service, en développement continu
Intégration
React, Next.js App Router
Distribution
Registre de paquets privé
Axes principaux
  • Architecture de consentement
  • Google Consent Mode v2
  • Registre des cookies
  • consentements versionnés
  • filtrage des scripts
  • sources de données interchangeables
  • multilinguisme
  • interfaces propres au projet
  • journalisation côté serveur
Interface
Bandeau et réglages dans le design du projet
  • Bandeau
  • Réglages
  • Interface par défaut
  • Habillage propre
Moteur de consentement
État, versionnage, registre, filtrage
  • État du consentement
  • Versionnage
  • Registre des cookies
  • Filtrage des scripts
  • Retrait
  • Consent Mode v2
Source de données
JSON, API ou CMS – interchangeable
  • JSON dans le projet
  • API propre
  • CMS headless

Trois couches distinctes : le moteur au centre porte le fonctionnement, la source de données en dessous est interchangeable, et l'interface au-dessus appartient à chaque projet.

Périmètre du projet en un coup d'œil

Un moteur. Des projets différents.

1

moteur de consentement central

3

catégories de consentement dans le projet de référence

4

services déclarés

7

cookies gérés

2

langues intégralement intégrées

0

script CMP externe dans le chemin de chargement

Ces chiffres décrivent la définition de consentement du projet de référence woop-art.de. Ils donnent un ordre de grandeur, pas une limite : catégories, services et cookies sont des données, et le moteur ne leur impose aucun plafond. Le dernier chiffre est le plus important – aucun script tiers n'est chargé pour le système de consentement lui-même.

01Situation de départ

Le consentement comme partie intégrante de l'application

Les applications web intègrent souvent des services externes : analytique, cartes, vidéos ou prise de rendez-vous. Cela crée des flux de données supplémentaires et pose la question des conditions dans lesquelles ces services peuvent être chargés.

De nombreuses solutions de consentement sont intégrées après coup dans un site, comme un système à part. Cela crée des dépendances supplémentaires : la configuration et l'interface se trouvent en dehors de l'application, des scripts externes s'insèrent dans le chemin de chargement technique et le contrôle des intégrations se répartit entre plusieurs systèmes.

Pour nos projets, nous voulions donc intégrer le consentement directement dans l'architecture applicative.

La solution devait

  • gérer les consentements de manière centrale
  • activer de façon contrôlée les services soumis à consentement
  • versionner les modifications de la configuration de consentement
  • gérer de manière centrale les valeurs de stockage déclarées
  • prendre en charge différentes sources de données
  • couvrir plusieurs langues
  • permettre des interfaces propres à chaque projet
  • et être réutilisable dans des applications différentes

Il en est résulté un moteur de consentement autonome, utilisé aujourd'hui comme module technique commun.

02Architecture

Trois couches distinctes pour la logique, les données et l'affichage

Le système de consentement sépare délibérément la logique fonctionnelle centrale des données propres au projet et de l'interface visible.

La même base technique peut ainsi servir dans des applications construites différemment, sans devoir réimplémenter l'état du consentement, le versionnage ou le filtrage des scripts pour chaque projet.

Le même moteur peut ainsi être utilisé sur une plateforme artistique et sur un site d'entreprise, bien que les deux interfaces soient conçues différemment.

Moteur de consentement

Le moteur central prend en charge tout ce qui reste identique d'un projet à l'autre :

  • état du consentement
  • vérification de version
  • registre des cookies
  • filtrage des scripts
  • retrait
  • nettoyage des valeurs de stockage déclarées
  • Google Consent Mode v2

Cette logique est maintenue de manière centrale et mise à disposition comme module commun.

Source de données

Le moteur reçoit toutes les informations propres au projet via une interface définie. Il s'agit notamment de :

  • version du consentement
  • catégories
  • services
  • cookies et autres valeurs de stockage
  • textes par langue
  • configurations de scripts

L'origine de ces informations n'est pas déterminante pour le moteur. Elles peuvent se trouver dans le projet lui-même ou être fournies par une autre source de données.

Interface

Le bandeau et la fenêtre de réglages appartiennent au projet concerné. L'affichage reçoit du moteur central les données nécessaires et un ensemble d'actions défini.

L'apparence visuelle peut donc changer entièrement sans que la logique de consentement sous-jacente doive être modifiée.

04Données, langues & interface

La logique de consentement n'est pas liée à une source de données particulière

Entre le moteur de consentement et la configuration se trouve une interface définie. Le moteur a besoin de certaines informations, mais n'est pas lié à l'endroit où elles sont stockées.

Différents modèles sont ainsi possibles.

Définition technique et traductions restent séparées

Les noms de cookies, les identifiants, l'attribution aux catégories et les durées de conservation sont neutres du point de vue linguistique. Tout ce que lisent les visiteurs peut en revanche être maintenu par langue.

Il s'agit par exemple de

  • libellés des catégories
  • descriptions des catégories
  • informations sur les services
  • finalités des cookies
  • informations sur les transferts de données
  • textes du bandeau
  • boutons
  • libellés pour lecteurs d'écran

Une valeur de stockage est ainsi définie techniquement une seule fois, puis décrite dans chaque langue nécessaire.

Dans le projet de référence Woop Art, l'allemand et l'anglais sont entièrement maintenus. Le site de Woop Technology utilise le même moteur avec des langues supplémentaires.

Une logique commune, des interfaces différentes

Le moteur fournit une interface par défaut réutilisable, sans en imposer l'usage.

Un projet peut

  • reprendre le bandeau et la fenêtre de réglages tels quels
  • concevoir uniquement le bandeau
  • remplacer uniquement la fenêtre de réglages
  • ou réaliser entièrement les deux interfaces à sa manière

La logique de consentement reste inchangée.

L'affichage peut donc être adapté au système de design du projet sans réimplémenter des fonctions centrales comme le versionnage, le registre ou le retrait.

Configuration dans le projet

Des fichiers versionnés peuvent être livrés directement avec le code source. Ils ne nécessitent aucun appel réseau supplémentaire et suivent le même processus de build et de déploiement que l'application.

API propre

Une API peut fournir les mêmes informations de consentement de manière centrale à plusieurs applications. Cela permet de construire des configurations communes ou des processus d'administration centralisés.

CMS headless

Les contenus rédactionnels peuvent être gérés dans un système de contenu, tandis que la définition technique en reste indépendante.

Configuration technique et contenu rédactionnel ne doivent donc pas nécessairement provenir de la même source.

Bandeau de consentement dans le design du projet de référence
Le bandeau appartient visuellement au site – pas à un système externe.
Fenêtre de réglages avec les catégories de consentement
La fenêtre de réglages présente catégories, services et cookies déclarés. Elle ne reçoit que des données et des rappels du moteur central.
05Preuve & exploitation

Journalisation des décisions côté serveur

Outre l'état de consentement dans le navigateur, chaque décision explicitement enregistrée peut être journalisée côté serveur.

Dans le système actuel sont notamment consignés

  • identifiant de consentement
  • version de la configuration
  • sélection effectuée
  • horodatage
  • user agent
  • adresse IP tronquée

Les adresses IPv4 sont tronquées après le deuxième bloc, les adresses IPv6 après le troisième segment.

Le point de terminaison prévu à cet effet n'accepte que les requêtes provenant de la même origine et se trouve sur un chemin fixe, afin de pouvoir être restreint de façon ciblée au niveau de l'infrastructure.

Nous désignons délibérément cette fonction comme une journalisation des décisions de consentement côté serveur, et non comme un archivage à valeur probante. La journalisation technique soutient la traçabilité d'une décision ; aucune garantie juridique supplémentaire n'est donnée pour autant.

Une erreur de journalisation ne bloque pas l'application

La décision du visiteur prend d'abord effet dans l'état de consentement de l'application. Si l'enregistrement côté serveur échoue, le site reste utilisable.

L'erreur est journalisée côté serveur plutôt que d'exposer des détails techniques dans le navigateur. Le bon fonctionnement du système de consentement ne dépend donc pas de la disponibilité permanente de cette journalisation.

La fonction de consentement ne nécessite pas de CMP externe

La configuration de consentement et le moteur central font partie de l'application. Aucun fournisseur de CMP externe n'est donc nécessaire pour le système de consentement lui-même.

Cela signifie

  • aucun script CMP supplémentaire
  • aucun appel réseau externe pour la fonction de consentement elle-même
  • aucune interface de consentement tierce
  • aucune dépendance de plateforme supplémentaire pour la seule gestion des consentements

Les services soumis à consentement en restent distincts et ne se chargent qu'une fois le consentement requis obtenu.

06Module réutilisable

Un module commun plutôt que des solutions isolées par projet

Le moteur de consentement existe sous forme de paquet distinct et est distribué via le registre de paquets privé de Woop Technology. Les versions et les modifications peuvent ainsi être gérées de manière traçable, comme toute autre dépendance technique.

Un nouveau projet ajoute pour l'essentiel quatre éléments qui lui sont propres.

L'état du consentement, le versionnage, le registre, le filtrage des scripts et la logique de retrait proviennent en revanche du module commun.

Une amélioration du moteur central peut ainsi être reprise dans plusieurs projets via une mise à jour versionnée.

Données

Les catégories, services, valeurs de stockage et textes du projet concerné.

Persistance

La forme souhaitée d'enregistrement des décisions de consentement côté serveur.

Intégrations

Par exemple l'analytique ou d'autres services externes soumis à consentement.

Design

L'interface par défaut ou des composants de bandeau et de réglages propres.

07Mise en perspective

Quand une architecture de consentement propre est pertinente

Une architecture de consentement propre n'est pas nécessaire pour tous les projets. Pour un site simple avec peu de services externes, une plateforme de consentement établie peut être la solution la plus rapide et la plus économique.

Un module commun devient intéressant surtout lorsque plusieurs exigences se conjuguent

  • applications web sur mesure
  • plusieurs projets partageant une base technique commune
  • interfaces différentes
  • multilinguisme
  • plusieurs intégrations soumises à consentement
  • standards techniques communs
  • infrastructure d'hébergement et de déploiement propre
  • état du consentement comme partie de la logique applicative

Dans ces cas, un moteur commun réduit les implémentations propres à chaque projet et permet de faire évoluer les fonctions centrales en un seul endroit.

Le consentement peut être intégré directement dans l'application

L'état central du consentement est également accessible au code applicatif.

Un composant peut ainsi vérifier par exemple

  • L'analytique est-elle autorisée ?
  • Une vidéo intégrée peut-elle être chargée ?
  • Faut-il obtenir un consentement avant une carte externe ?
  • La décision enregistrée est-elle encore valable pour la version de consentement actuelle ?

Cela permet également de mettre en place des solutions à deux clics. À la place d'un service tiers non encore autorisé, un composant local peut d'abord s'afficher, informer sur le service externe et ne le charger qu'après une décision correspondante.

Le consentement ne se limite donc pas au bandeau et à la fenêtre de réglages, mais peut être intégré directement dans le déroulement d'une application.

Moins de dépendances supplémentaires

Une plateforme de consentement externe apporte un fournisseur supplémentaire, ses propres scripts, sa propre configuration et généralement une dépendance technique de plus. Notre moteur, lui, est exploité avec les applications existantes et au sein de l'infrastructure prévue.

Cela ne signifie pas que les plateformes de consentement externes soient inadaptées par principe. Le choix dépend de l'ampleur et des exigences du projet.

Les données de consentement restent dans l'infrastructure prévue

Aucun autre fournisseur de CMP n'est nécessaire pour la gestion des consentements elle-même. Les données de consentement correspondantes peuvent donc être traitées là où l'application est exploitée.

Les autres services externes utilisés par un projet donné et les données transmises à cette occasion sont définis et documentés séparément, projet par projet.

08Résultat

Une base technique commune pour le consentement

Le moteur de consentement est aujourd'hui utilisé comme composant réutilisable de différentes applications web. Les fonctions centrales sont maintenues une seule fois, tandis que les données, les intégrations, les langues et l'interface restent propres à chaque projet.

Logique de consentement centrale

État, versionnage, registre, filtrage des scripts et retrait sont gérés ensemble.

Consentement avant les services concernés

Les intégrations correspondantes ne se chargent qu'après le consentement requis.

Décisions versionnées

Les consentements enregistrés sont liés à l'état correspondant de la configuration.

Intégration flexible

Sources de données, langues et interfaces peuvent être construites différemment selon le projet.

Journalisation côté serveur

Les décisions explicites peuvent être enregistrées de façon traçable avec version et horodatage.

Module réutilisable

Les améliorations du moteur peuvent être reprises dans plusieurs projets par des mises à jour versionnées.

Aperçu technique

De quoi le système se compose

Architecture
  • React
  • TypeScript
  • architecture en paquets
  • injection de dépendances
Consentement
  • consentement par catégories
  • versionnage
  • retrait
  • nettoyage des cookies
  • filtrage des scripts
Sources de données
  • JSON dans le projet
  • API propre
  • CMS headless
Google
Consent Mode v2, filtrage pour GA4
Multilinguisme
contenus de consentement localisés, langue de repli définie
Interface
interface par défaut fournie, composants de bandeau et de réglages interchangeables
Persistance
  • cookie de consentement
  • journalisation côté serveur
  • adresses IP tronquées
Intégration
  • hooks React
  • injection de scripts contrôlée
  • composants dépendants du consentement
  • solutions à deux clics
Exploitation
  • registre de paquets privé
  • chemins d'API définis
  • contrôle d'origine
  • intégration dans l'infrastructure existante
Portfolio

Autres projets

  • Web designDéveloppementInfrastructure

    Woop Art

    Un espace d'art numérique qui met les œuvres en valeur et guide les visiteurs sans effort à travers la galerie.

    Woop Art
    Woop Art
  • Design UX/UIDéveloppement webMultilingueRéservation & paiement

    Ciklusfit — Cintia Németh

    Une plateforme clairement structurée pour l'entraînement adapté au cycle, le conseil nutritionnel et le conseil en mode de vie – avec comparaison des offres, demande de rendez-vous et réservation.

    Ciklusfit — Cintia Németh
    Ciklusfit — Cintia Németh