Zum Hauptinhalt springen
Woop Technology
Punktraster-Karte von Europa: die Schweiz hervorgehoben, darin der Firmenstandort Alt St. JohannAlt St. Johann
Alle Referenzen
Technische Case Study · Datenschutz & Architektur

Eine Consent-Architektur, die projektübergreifend funktioniert

Für unsere Webanwendungen entwickelten wir eine zentrale Consent-Engine, die Einwilligungen, zustimmungsabhängige Dienste und deklarierte Speicherwerte verwaltet.

Projektfakten
Art
Technische Case Study
Baustein
@woop-technology/consent
Referenzprojekt
Woop Art
Status
Im Einsatz, in laufender Weiterentwicklung
Integration
React, Next.js App Router
Bereitstellung
Private Paketverwaltung
Schwerpunkte
  • Consent-Architektur
  • Google Consent Mode v2
  • Cookie-Registry
  • versionierte Einwilligungen
  • Script-Gating
  • austauschbare Datenquellen
  • Mehrsprachigkeit
  • projektspezifische Oberflächen
  • serverseitige Protokollierung
Oberfläche
Banner und Einstellungen im Design des Projekts
  • Banner
  • Einstellungen
  • Standard-UI
  • Eigener Skin
Consent-Engine
Zustand, Versionierung, Registry, Gating
  • Consent-State
  • Versionierung
  • Cookie-Registry
  • Script-Gating
  • Widerruf
  • Consent Mode v2
Datenquelle
JSON, API oder CMS – austauschbar
  • JSON im Projekt
  • Eigene API
  • Headless CMS

Drei getrennte Ebenen: Die Engine in der Mitte verantwortet die Funktionsweise, die Datenquelle darunter ist austauschbar, die Oberfläche darüber gehört dem jeweiligen Projekt.

Projektumfang auf einen Blick

Eine Engine. Unterschiedliche Projekte.

1

zentrale Consent-Engine

3

Consent-Kategorien im Referenzprojekt

4

deklarierte Services

7

verwaltete Cookies

2

vollständig integrierte Sprachen

0

externe CMP-Scripts im Ladepfad

Die Zahlen beschreiben die Consent-Definition des Referenzprojekts woop-art.de. Sie stehen hier als Grössenordnung, nicht als Grenze: Kategorien, Services und Cookies sind Daten, und die Engine kennt keine Obergrenze dafür. Die letzte Zahl ist die wichtigste – für das Consent-System selbst wird kein fremdes Script geladen.

01Ausgangslage

Consent als Bestandteil der Anwendung

Webanwendungen binden häufig externe Dienste wie Analytics, Karten, Videos oder Terminbuchungen ein. Damit entstehen zusätzliche Datenflüsse und die Frage, unter welchen Bedingungen diese Dienste geladen werden dürfen.

Viele Consent-Lösungen werden als eigenständiges System nachträglich in eine Website integriert. Dadurch entstehen zusätzliche Abhängigkeiten: Konfiguration und Oberfläche liegen ausserhalb der eigentlichen Anwendung, externe Scripts werden Teil des technischen Ladewegs und die Kontrolle über einzelne Integrationen verteilt sich auf mehrere Systeme.

Für unsere Projekte wollten wir Consent deshalb direkt in die Anwendungsarchitektur integrieren.

Die Lösung sollte

  • Einwilligungen zentral verwalten
  • zustimmungsabhängige Dienste kontrolliert freischalten
  • Änderungen an der Consent-Konfiguration versionieren
  • deklarierte Speicherwerte zentral verwalten
  • unterschiedliche Datenquellen unterstützen
  • mehrere Sprachen abbilden
  • projektspezifische Oberflächen ermöglichen
  • und sich über unterschiedliche Anwendungen hinweg wiederverwenden lassen

Daraus entstand eine eigenständige Consent-Engine, die heute als gemeinsamer technischer Baustein eingesetzt wird.

02Architektur

Drei getrennte Ebenen für Logik, Daten und Darstellung

Das Consent-System trennt die zentrale Funktionslogik bewusst von den projektspezifischen Daten und der sichtbaren Oberfläche.

Dadurch kann dieselbe technische Grundlage in unterschiedlich aufgebauten Anwendungen eingesetzt werden, ohne Consent-State, Versionierung oder Script-Gating für jedes Projekt neu implementieren zu müssen.

So kann dieselbe Engine beispielsweise in einer Kunstplattform und auf einem Unternehmensauftritt eingesetzt werden, obwohl beide Oberflächen unterschiedlich gestaltet sind.

Consent-Engine

Die zentrale Engine verantwortet die Funktionen, die projektübergreifend gleich bleiben:

  • Consent-State
  • Versionsprüfung
  • Cookie-Registry
  • Script-Gating
  • Widerruf
  • Bereinigung deklarierter Speicherwerte
  • Google Consent Mode v2

Diese Logik wird zentral gepflegt und als gemeinsamer Baustein bereitgestellt.

Datenquelle

Die Engine erhält alle projektspezifischen Informationen über eine definierte Schnittstelle. Dazu gehören unter anderem:

  • Consent-Version
  • Kategorien
  • Services
  • Cookies und weitere Speicherwerte
  • Texte je Sprache
  • Script-Konfigurationen

Woher diese Informationen stammen, ist für die Engine nicht entscheidend. Sie können direkt im Projekt liegen oder über eine andere Datenquelle bereitgestellt werden.

Oberfläche

Banner und Einstellungsdialog gehören zum jeweiligen Projekt. Die Darstellung erhält die benötigten Daten und fest definierten Aktionen aus der zentralen Engine.

Dadurch kann sich das visuelle Erscheinungsbild vollständig verändern, ohne dass die zugrunde liegende Consent-Logik angepasst werden muss.

04Daten, Sprachen & Oberfläche

Die Consent-Logik ist nicht an eine bestimmte Datenquelle gebunden

Zwischen Consent-Engine und Konfiguration steht eine definierte Schnittstelle. Die Engine benötigt bestimmte Informationen, ist aber nicht daran gebunden, wo diese gespeichert werden.

Dadurch sind unterschiedliche Modelle möglich.

Technische Definition und Übersetzungen bleiben getrennt

Cookie-Namen, Kennungen, Kategorienzuordnung und Speicherdauern sind sprachneutral. Alles, was Besucher lesen, kann dagegen pro Sprache gepflegt werden.

Dazu gehören beispielsweise

  • Kategoriebezeichnungen
  • Kategoriebeschreibungen
  • Serviceinformationen
  • Cookie-Zwecke
  • Informationen zu Datenübermittlungen
  • Bannertexte
  • Schaltflächen
  • Screenreader-Beschriftungen

Ein Speicherwert wird dadurch technisch einmal definiert und anschliessend für jede benötigte Sprache beschrieben.

Im Referenzprojekt Woop Art sind Deutsch und Englisch vollständig gepflegt. Der Webauftritt von Woop Technology verwendet dieselbe Engine mit zusätzlichen Sprachen.

Eine gemeinsame Logik, unterschiedliche Oberflächen

Die Engine stellt eine wiederverwendbare Standard-Oberfläche bereit, schreibt deren Verwendung aber nicht vor.

Ein Projekt kann

  • Banner und Einstellungsdialog unverändert übernehmen
  • nur das Banner selbst gestalten
  • nur den Einstellungsdialog ersetzen
  • oder beide Oberflächen vollständig projektspezifisch umsetzen

Die Consent-Logik bleibt dabei unverändert.

So kann die Darstellung an das Designsystem des jeweiligen Projekts angepasst werden, ohne zentrale Funktionen wie Versionierung, Registry oder Widerruf neu implementieren zu müssen.

Konfiguration im Projekt

Versionierte Dateien können direkt gemeinsam mit dem Quellcode ausgeliefert werden. Sie benötigen keinen zusätzlichen Netzwerkabruf und durchlaufen denselben Build- und Deployment-Prozess wie die Anwendung.

Eigene API

Eine API kann dieselben Consent-Informationen zentral für mehrere Anwendungen bereitstellen. Damit lassen sich gemeinsame Konfigurationen oder zentrale Verwaltungsprozesse aufbauen.

Headless CMS

Redaktionelle Inhalte können über ein Content-System gepflegt werden, während die technische Definition weiterhin unabhängig davon bleibt.

Technische Konfiguration und redaktioneller Inhalt müssen damit nicht zwingend aus derselben Quelle stammen.

Consent-Banner im Design des Referenzprojekts
Das Banner gehört gestalterisch zur Website – nicht zu einem externen System.
Einstellungsmodal mit den Consent-Kategorien
Das Einstellungsmodal zeigt Kategorien, Services und deklarierte Cookies. Es erhält ausschliesslich Daten und Callbacks aus der zentralen Engine.
05Nachweis & Betrieb

Serverseitige Protokollierung von Entscheidungen

Neben dem Consent-Zustand im Browser kann jede ausdrücklich gespeicherte Entscheidung serverseitig protokolliert werden.

Dabei werden im aktuellen System unter anderem festgehalten

  • Consent-ID
  • Version der Konfiguration
  • getroffene Auswahl
  • Zeitpunkt
  • User-Agent
  • gekürzte IP-Adresse

IPv4-Adressen werden nach dem zweiten Block gekürzt, IPv6-Adressen nach dem dritten Segment.

Der dafür vorgesehene Endpunkt akzeptiert nur Anfragen von der eigenen Herkunft und liegt auf einem festen Pfad, damit er auch auf Infrastruktur-Ebene gezielt eingeschränkt werden kann.

Wir bezeichnen diese Funktion bewusst als serverseitige Protokollierung von Consent-Entscheidungen und nicht als revisionssichere Archivierung. Die technische Protokollierung unterstützt die Nachvollziehbarkeit einer Entscheidung; eine weitergehende rechtliche Zusicherung wird damit nicht gemacht.

Ein Fehler bei der Protokollierung blockiert die Anwendung nicht

Die Entscheidung des Besuchers wird zuerst im Consent-Zustand der Anwendung wirksam. Schlägt die zusätzliche serverseitige Speicherung fehl, bleibt die Website weiterhin nutzbar.

Der Fehler wird serverseitig protokolliert, statt technische Details im Browser offenzulegen. Damit hängt die Funktionsfähigkeit des Consent-Systems nicht davon ab, ob die zusätzliche Protokollierung in jedem Moment verfügbar ist.

Die Consent-Funktion benötigt keine externe CMP

Die Consent-Konfiguration und die zentrale Engine sind Bestandteil der eigenen Anwendung. Für das Consent-System selbst ist deshalb kein externer CMP-Anbieter erforderlich.

Das bedeutet

  • kein zusätzliches CMP-Script
  • kein externer Netzwerkabruf für die Consent-Funktion selbst
  • keine fremde Consent-Oberfläche
  • keine zusätzliche Plattformabhängigkeit allein für die Verwaltung der Einwilligungen

Zustimmungsabhängige Dienste bleiben davon getrennt und werden erst geladen, wenn die erforderliche Einwilligung vorliegt.

06Wiederverwendbarer Baustein

Ein gemeinsamer Baustein statt projektspezifischer Einzellösungen

Die Consent-Engine liegt als eigenes Package vor und wird über die private Paketverwaltung von Woop Technology bereitgestellt. Versionen und Änderungen können damit wie bei anderen technischen Abhängigkeiten nachvollziehbar verwaltet werden.

Ein neues Projekt ergänzt im Wesentlichen vier projektspezifische Bereiche.

Consent-State, Versionierung, Registry, Script-Gating und Widerrufslogik werden dagegen aus dem gemeinsamen Baustein übernommen.

Eine Verbesserung an der zentralen Engine kann dadurch über ein versioniertes Update in mehrere Projekte übernommen werden.

Daten

Die Kategorien, Services, Speicherwerte und Texte des jeweiligen Projekts.

Persistenz

Die gewünschte Form der serverseitigen Speicherung von Consent-Entscheidungen.

Integrationen

Beispielsweise Analytics oder andere zustimmungsabhängige externe Dienste.

Design

Die Standard-Oberfläche oder eigene Banner- und Einstellungskomponenten.

07Einordnung

Wann eine eigene Consent-Architektur sinnvoll ist

Eine eigene Consent-Architektur ist nicht für jedes Projekt notwendig. Für eine einfache Website mit wenigen externen Diensten kann eine etablierte Consent-Plattform die schnellere und wirtschaftlichere Lösung sein.

Ein gemeinsamer eigener Baustein wird insbesondere interessant, wenn mehrere Anforderungen zusammenkommen

  • individuelle Webanwendungen
  • mehrere Projekte mit gemeinsamem technischen Fundament
  • unterschiedliche Oberflächen
  • Mehrsprachigkeit
  • mehrere zustimmungsabhängige Integrationen
  • gemeinsame technische Standards
  • eigene Hosting- und Deployment-Infrastruktur
  • Consent-Zustand als Bestandteil der eigentlichen Anwendungslogik

In diesen Fällen reduziert eine gemeinsame Engine projektspezifische Implementierungen und ermöglicht es, zentrale Funktionen an einer Stelle weiterzuentwickeln.

Consent kann direkt in die Anwendung integriert werden

Der zentrale Consent-Zustand steht auch dem Anwendungscode zur Verfügung.

Eine Komponente kann dadurch beispielsweise prüfen

  • Ist Analytics freigegeben?
  • Darf ein eingebettetes Video geladen werden?
  • Muss vor einer externen Karte zunächst eine Einwilligung eingeholt werden?
  • Ist die gespeicherte Entscheidung für die aktuelle Consent-Version noch gültig?

Dadurch lassen sich auch Zwei-Klick-Lösungen umsetzen. Anstelle eines noch nicht freigegebenen Drittanbieters kann zunächst eine lokale Komponente angezeigt werden, die über den externen Dienst informiert und diesen erst nach einer entsprechenden Entscheidung lädt.

Consent bleibt damit nicht auf Banner und Einstellungsdialog beschränkt, sondern kann direkt in den Ablauf einer Anwendung integriert werden.

Weniger zusätzliche Abhängigkeiten

Eine externe Consent-Plattform bringt einen zusätzlichen Anbieter, eigene Scripts, eigene Konfiguration und üblicherweise eine weitere technische Abhängigkeit mit sich. Die eigene Engine wird dagegen gemeinsam mit den bestehenden Anwendungen und innerhalb der vorgesehenen Infrastruktur betrieben.

Das bedeutet nicht, dass externe Consent-Plattformen grundsätzlich ungeeignet sind. Die Entscheidung hängt vom Umfang und den Anforderungen des jeweiligen Projekts ab.

Consent-Daten bleiben innerhalb der vorgesehenen Infrastruktur

Für die Verwaltung der Einwilligungen selbst ist kein weiterer CMP-Anbieter erforderlich. Die entsprechenden Consent-Daten können damit dort verarbeitet werden, wo auch die Anwendung betrieben wird.

Welche weiteren externen Dienste ein konkretes Projekt verwendet und welche Daten dabei übertragen werden, wird unabhängig davon projektspezifisch definiert und dokumentiert.

08Ergebnis

Ein gemeinsames technisches Fundament für Consent

Die Consent-Engine wird heute als wiederverwendbarer Bestandteil unterschiedlicher Webanwendungen eingesetzt. Zentrale Funktionen werden einmal gepflegt, während Daten, Integrationen, Sprachen und Oberfläche projektspezifisch bleiben.

Zentrale Consent-Logik

State, Versionierung, Registry, Script-Gating und Widerruf werden gemeinsam verwaltet.

Consent vor zustimmungspflichtigen Diensten

Entsprechende Integrationen werden erst nach der erforderlichen Einwilligung geladen.

Versionierte Entscheidungen

Gespeicherte Einwilligungen sind an den jeweiligen Stand der Consent-Konfiguration gebunden.

Flexible Integration

Datenquellen, Sprachen und Oberflächen können je Projekt unterschiedlich aufgebaut sein.

Serverseitige Protokollierung

Ausdrückliche Consent-Entscheidungen können mit Version und Zeitpunkt nachvollziehbar gespeichert werden.

Wiederverwendbarer Baustein

Verbesserungen an der Engine können über versionierte Updates in mehrere Projekte übernommen werden.

Technischer Überblick

Woraus das System besteht

Architektur
  • React
  • TypeScript
  • Package-Architektur
  • Dependency Injection
Consent
  • kategoriebasierte Einwilligung
  • Versionierung
  • Widerruf
  • Cookie-Bereinigung
  • Script-Gating
Datenquellen
  • JSON im Projekt
  • eigene API
  • Headless CMS
Google
Consent Mode v2, Gating für GA4
Mehrsprachigkeit
lokalisierte Consent-Inhalte, definierte Ersatzsprache
Oberfläche
mitgelieferte Standard-UI, austauschbare Banner- und Einstellungskomponenten
Persistenz
  • Consent-Cookie im Browser
  • serverseitige Protokollierung
  • gekürzte IP-Adressen
Integration
  • React Hooks
  • kontrollierte Script-Injektion
  • Consent-abhängige Komponenten
  • Zwei-Klick-Lösungen
Betrieb
  • private Paketverwaltung
  • definierte API-Pfade
  • Herkunftsprüfung
  • Integration in die bestehende Infrastruktur
Portfolio

Weitere Projekte

  • WebdesignEntwicklungInfrastruktur

    Woop Art

    Ein digitaler Kunstraum, der Kunstwerke eindrucksvoll präsentiert und Besucher einfach durch die Galerie führt.

    Woop Art
    Woop Art
  • UX/UI DesignWebentwicklungMehrsprachigkeitBuchung & Zahlung

    Ciklusfit — Cintia Németh

    Eine klar strukturierte Plattform für zyklusorientiertes Training, Ernährungs- und Lebensstilberatung – mit Angebotsvergleich, Terminanfrage und Buchung.

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