Vai al contenuto principale
Woop Technology
Mappa dell'Europa a trama di punti: la Svizzera evidenziata, con la sede aziendale di Alt St. JohannAlt St. Johann
Tutte le referenze
Case study tecnico · Protezione dei dati e architettura

Un’architettura di consenso che funziona da un progetto all’altro

Per le nostre applicazioni web abbiamo sviluppato un motore di consenso centrale che gestisce i consensi, i servizi soggetti a consenso e i valori di archiviazione dichiarati.

Dati del progetto
Tipo
Case study tecnico
Modulo
@woop-technology/consent
Progetto di riferimento
Woop Art
Stato
In uso, in sviluppo continuo
Integrazione
React, Next.js App Router
Distribuzione
Registro pacchetti privato
Aree principali
  • Architettura di consenso
  • Google Consent Mode v2
  • Registro dei cookie
  • consensi versionati
  • filtraggio degli script
  • sorgenti dati intercambiabili
  • multilinguismo
  • interfacce specifiche per progetto
  • registrazione lato server
Interfaccia
Banner e impostazioni nel design del progetto
  • Banner
  • Impostazioni
  • Interfaccia predefinita
  • Skin propria
Motore di consenso
Stato, versionamento, registro, filtraggio
  • Stato del consenso
  • Versionamento
  • Registro dei cookie
  • Filtraggio degli script
  • Revoca
  • Consent Mode v2
Sorgente dati
JSON, API o CMS – intercambiabile
  • JSON nel progetto
  • API propria
  • CMS headless

Tre livelli distinti: al centro il motore che governa il funzionamento, sotto la sorgente dati intercambiabile, sopra l'interfaccia che appartiene al singolo progetto.

Portata del progetto in breve

Un motore. Progetti diversi.

1

motore di consenso centrale

3

categorie di consenso nel progetto di riferimento

4

servizi dichiarati

7

cookie gestiti

2

lingue integrate completamente

0

script CMP esterni nel percorso di caricamento

Le cifre descrivono la definizione di consenso del progetto di riferimento woop-art.de. Sono un ordine di grandezza, non un limite: categorie, servizi e cookie sono dati, e il motore non impone loro alcun tetto. L'ultima cifra è la più importante – per il sistema di consenso stesso non viene caricato alcuno script estraneo.

01Punto di partenza

Il consenso come parte dell'applicazione

Le applicazioni web integrano spesso servizi esterni come analytics, mappe, video o prenotazione di appuntamenti. Ne derivano ulteriori flussi di dati e la domanda su quali condizioni consentano il caricamento di questi servizi.

Molte soluzioni di consenso vengono integrate in un sito solo in un secondo momento, come sistema a sé. Ne derivano dipendenze aggiuntive: configurazione e interfaccia si trovano al di fuori dell'applicazione, script esterni entrano nel percorso tecnico di caricamento e il controllo sulle singole integrazioni si distribuisce su più sistemi.

Per i nostri progetti volevamo quindi integrare il consenso direttamente nell'architettura applicativa.

La soluzione doveva

  • gestire i consensi in modo centrale
  • abilitare in modo controllato i servizi soggetti a consenso
  • versionare le modifiche alla configurazione del consenso
  • gestire centralmente i valori di archiviazione dichiarati
  • supportare sorgenti dati diverse
  • coprire più lingue
  • consentire interfacce specifiche per progetto
  • ed essere riutilizzabile in applicazioni differenti

Ne è nato un motore di consenso autonomo, oggi impiegato come modulo tecnico comune.

02Architettura

Tre livelli separati per logica, dati e presentazione

Il sistema di consenso separa deliberatamente la logica funzionale centrale dai dati specifici del progetto e dall'interfaccia visibile.

La stessa base tecnica può così essere impiegata in applicazioni costruite in modo diverso, senza dover reimplementare stato del consenso, versionamento o filtraggio degli script per ogni progetto.

Lo stesso motore può così essere impiegato su una piattaforma artistica e su un sito aziendale, benché le due interfacce siano progettate diversamente.

Motore di consenso

Il motore centrale si occupa di tutto ciò che resta uguale nei diversi progetti:

  • stato del consenso
  • verifica della versione
  • registro dei cookie
  • filtraggio degli script
  • revoca
  • pulizia dei valori di archiviazione dichiarati
  • Google Consent Mode v2

Questa logica viene mantenuta centralmente e messa a disposizione come modulo comune.

Sorgente dati

Il motore riceve tutte le informazioni specifiche del progetto tramite un'interfaccia definita. Tra queste, ad esempio:

  • versione del consenso
  • categorie
  • servizi
  • cookie e altri valori di archiviazione
  • testi per lingua
  • configurazioni degli script

Da dove provengano queste informazioni non è determinante per il motore. Possono trovarsi nel progetto stesso o essere fornite da un'altra sorgente dati.

Interfaccia

Banner e finestra delle impostazioni appartengono al singolo progetto. La presentazione riceve dal motore centrale i dati necessari e un insieme definito di azioni.

L'aspetto visivo può quindi cambiare completamente senza che la logica di consenso sottostante debba essere modificata.

04Dati, lingue e interfaccia

La logica di consenso non è legata a una determinata sorgente dati

Tra motore di consenso e configurazione si trova un'interfaccia definita. Il motore necessita di determinate informazioni, ma non è vincolato al luogo in cui vengono conservate.

Sono quindi possibili modelli diversi.

Definizione tecnica e traduzioni restano separate

Nomi dei cookie, identificativi, assegnazione alle categorie e durate di conservazione sono neutri rispetto alla lingua. Tutto ciò che i visitatori leggono può invece essere gestito per lingua.

Ne fanno parte ad esempio

  • denominazioni delle categorie
  • descrizioni delle categorie
  • informazioni sui servizi
  • finalità dei cookie
  • informazioni sui trasferimenti di dati
  • testi del banner
  • pulsanti
  • etichette per screen reader

Un valore di archiviazione viene così definito tecnicamente una sola volta e poi descritto in ogni lingua necessaria.

Nel progetto di riferimento Woop Art tedesco e inglese sono gestiti integralmente. Il sito di Woop Technology utilizza lo stesso motore con lingue aggiuntive.

Una logica comune, interfacce diverse

Il motore mette a disposizione un'interfaccia predefinita riutilizzabile, senza però imporne l'uso.

Un progetto può

  • adottare banner e finestra delle impostazioni senza modifiche
  • realizzare graficamente solo il banner
  • sostituire solo la finestra delle impostazioni
  • oppure realizzare entrambe le interfacce in modo interamente specifico

La logica di consenso resta invariata.

La presentazione può quindi essere adattata al design system del progetto senza reimplementare funzioni centrali come versionamento, registro o revoca.

Configurazione nel progetto

File versionati possono essere distribuiti direttamente insieme al codice sorgente. Non richiedono alcuna chiamata di rete aggiuntiva e attraversano lo stesso processo di build e deployment dell'applicazione.

API propria

Un'API può fornire le stesse informazioni di consenso in modo centrale a più applicazioni. Ciò consente di costruire configurazioni comuni o processi di amministrazione centralizzati.

CMS headless

I contenuti redazionali possono essere gestiti tramite un sistema di contenuti, mentre la definizione tecnica ne resta indipendente.

Configurazione tecnica e contenuto redazionale non devono quindi necessariamente provenire dalla stessa fonte.

Banner di consenso nel design del progetto di riferimento
Il banner appartiene visivamente al sito – non a un sistema esterno.
Finestra delle impostazioni con le categorie di consenso
La finestra delle impostazioni mostra categorie, servizi e cookie dichiarati. Riceve soltanto dati e callback dal motore centrale.
05Evidenza ed esercizio

Registrazione lato server delle decisioni

Oltre allo stato di consenso nel browser, ogni decisione salvata esplicitamente può essere registrata lato server.

Nel sistema attuale vengono registrati tra l'altro

  • ID del consenso
  • versione della configurazione
  • selezione effettuata
  • momento
  • user agent
  • indirizzo IP abbreviato

Gli indirizzi IPv4 vengono abbreviati dopo il secondo blocco, gli indirizzi IPv6 dopo il terzo segmento.

L'endpoint previsto accetta soltanto richieste della stessa origine e si trova su un percorso fisso, in modo da poter essere limitato in modo mirato anche a livello di infrastruttura.

Definiamo consapevolmente questa funzione come registrazione lato server delle decisioni di consenso e non come archiviazione a prova di revisione. La registrazione tecnica sostiene la tracciabilità di una decisione; non viene fornita alcuna ulteriore garanzia giuridica.

Un errore di registrazione non blocca l'applicazione

La decisione del visitatore ha effetto anzitutto nello stato di consenso dell'applicazione. Se il salvataggio aggiuntivo lato server fallisce, il sito resta utilizzabile.

L'errore viene registrato lato server, anziché esporre dettagli tecnici nel browser. La funzionalità del sistema di consenso non dipende quindi dalla disponibilità costante della registrazione aggiuntiva.

La funzione di consenso non richiede una CMP esterna

La configurazione del consenso e il motore centrale fanno parte dell'applicazione stessa. Per il sistema di consenso non è quindi necessario alcun fornitore CMP esterno.

Questo significa

  • nessuno script CMP aggiuntivo
  • nessuna chiamata di rete esterna per la funzione di consenso stessa
  • nessuna interfaccia di consenso di terze parti
  • nessuna dipendenza di piattaforma aggiuntiva solo per la gestione dei consensi

I servizi soggetti a consenso restano distinti e vengono caricati solo quando il consenso necessario è presente.

06Modulo riutilizzabile

Un modulo comune invece di soluzioni isolate per progetto

Il motore di consenso esiste come pacchetto autonomo e viene distribuito tramite il registro pacchetti privato di Woop Technology. Versioni e modifiche possono così essere gestite in modo tracciabile come qualsiasi altra dipendenza tecnica.

Un nuovo progetto aggiunge sostanzialmente quattro ambiti specifici.

Stato del consenso, versionamento, registro, filtraggio degli script e logica di revoca provengono invece dal modulo comune.

Un miglioramento al motore centrale può così essere adottato in più progetti tramite un aggiornamento versionato.

Dati

Categorie, servizi, valori di archiviazione e testi del progetto in questione.

Persistenza

La forma desiderata di archiviazione lato server delle decisioni di consenso.

Integrazioni

Ad esempio analytics o altri servizi esterni soggetti a consenso.

Design

L'interfaccia predefinita oppure componenti di banner e impostazioni propri.

07Inquadramento

Quando conviene un'architettura di consenso propria

Un'architettura di consenso propria non è necessaria per ogni progetto. Per un sito semplice con pochi servizi esterni, una piattaforma di consenso affermata può essere la soluzione più rapida ed economica.

Un modulo comune diventa interessante soprattutto quando si sommano più esigenze

  • applicazioni web su misura
  • più progetti con una base tecnica comune
  • interfacce diverse
  • multilinguismo
  • più integrazioni soggette a consenso
  • standard tecnici comuni
  • infrastruttura di hosting e deployment propria
  • stato del consenso come parte della logica applicativa

In questi casi un motore comune riduce le implementazioni specifiche per progetto e permette di sviluppare le funzioni centrali in un unico punto.

Il consenso può essere integrato direttamente nell'applicazione

Lo stato centrale del consenso è disponibile anche per il codice applicativo.

Un componente può così verificare ad esempio

  • Analytics è autorizzato?
  • Un video incorporato può essere caricato?
  • Serve un consenso prima di una mappa esterna?
  • La decisione memorizzata è ancora valida per la versione di consenso attuale?

In questo modo si possono realizzare anche soluzioni a due clic. Al posto di un servizio di terze parti non ancora autorizzato può essere mostrato dapprima un componente locale che informa sul servizio esterno e lo carica solo dopo una decisione corrispondente.

Il consenso non resta quindi limitato a banner e finestra delle impostazioni, ma può essere integrato direttamente nel flusso di un'applicazione.

Meno dipendenze aggiuntive

Una piattaforma di consenso esterna comporta un fornitore in più, script propri, una configurazione propria e di norma un'ulteriore dipendenza tecnica. Il nostro motore viene invece esercito insieme alle applicazioni esistenti e all'interno dell'infrastruttura prevista.

Questo non significa che le piattaforme di consenso esterne siano in linea di principio inadatte. La scelta dipende dall'ampiezza e dai requisiti del singolo progetto.

I dati di consenso restano nell'infrastruttura prevista

Per la gestione dei consensi non è necessario alcun ulteriore fornitore CMP. I relativi dati di consenso possono quindi essere trattati dove viene esercita l'applicazione.

Quali altri servizi esterni utilizzi un progetto concreto e quali dati vengano trasmessi in tale ambito viene definito e documentato separatamente, progetto per progetto.

08Risultato

Una base tecnica comune per il consenso

Il motore di consenso viene oggi impiegato come componente riutilizzabile di diverse applicazioni web. Le funzioni centrali vengono mantenute una sola volta, mentre dati, integrazioni, lingue e interfaccia restano specifici per progetto.

Logica di consenso centrale

Stato, versionamento, registro, filtraggio degli script e revoca vengono gestiti insieme.

Consenso prima dei servizi soggetti

Le relative integrazioni vengono caricate solo dopo il consenso necessario.

Decisioni versionate

I consensi memorizzati sono legati allo stato corrispondente della configurazione.

Integrazione flessibile

Sorgenti dati, lingue e interfacce possono essere costruite diversamente per ogni progetto.

Registrazione lato server

Le decisioni esplicite possono essere memorizzate in modo tracciabile con versione e momento.

Modulo riutilizzabile

I miglioramenti al motore possono essere adottati in più progetti tramite aggiornamenti versionati.

Panoramica tecnica

Di cosa è composto il sistema

Architettura
  • React
  • TypeScript
  • architettura a pacchetti
  • dependency injection
Consenso
  • consenso per categorie
  • versionamento
  • revoca
  • pulizia dei cookie
  • filtraggio degli script
Sorgenti dati
  • JSON nel progetto
  • API propria
  • CMS headless
Google
Consent Mode v2, filtraggio per GA4
Multilinguismo
contenuti di consenso localizzati, lingua di riserva definita
Interfaccia
UI predefinita inclusa, componenti di banner e impostazioni intercambiabili
Persistenza
  • cookie di consenso nel browser
  • registrazione lato server
  • indirizzi IP abbreviati
Integrazione
  • React hooks
  • iniezione controllata degli script
  • componenti dipendenti dal consenso
  • soluzioni a due clic
Esercizio
  • registro pacchetti privato
  • percorsi API definiti
  • verifica dell'origine
  • integrazione nell'infrastruttura esistente
Portfolio

Altri progetti

  • Web designSviluppoInfrastruttura

    Woop Art

    Uno spazio d'arte digitale che presenta le opere con grande efficacia e accompagna i visitatori attraverso la galleria senza sforzo.

    Woop Art
    Woop Art
  • Design UX/UISviluppo webMultilinguaPrenotazione & pagamento

    Ciklusfit — Cintia Németh

    Una piattaforma chiaramente strutturata per allenamento basato sul ciclo, consulenza nutrizionale e di stile di vita – con confronto delle offerte, richiesta di appuntamento e prenotazione.

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