Skip to main content
Woop Technology
Dot-grid map of Europe: Switzerland highlighted, with the company location Alt St. Johann inside itAlt St. Johann
All references
Technical Case Study · Privacy & Architecture

A consent architecture that works across projects

For our web applications we developed a central consent engine that manages consent, consent-dependent services and declared storage values.

Project facts
Type
Technical case study
Module
@woop-technology/consent
Reference project
Woop Art
Status
In use, under continuous development
Integration
React, Next.js App Router
Distribution
Private package registry
Focus areas
  • Consent architecture
  • Google Consent Mode v2
  • Cookie registry
  • versioned consent
  • script gating
  • interchangeable data sources
  • multilingual content
  • project-specific interfaces
  • server-side logging
Interface
Banner and settings in the project's own design
  • Banner
  • Settings
  • Default UI
  • Custom skin
Consent engine
State, versioning, registry, gating
  • Consent state
  • Versioning
  • Cookie registry
  • Script gating
  • Withdrawal
  • Consent Mode v2
Data source
JSON, API or CMS – interchangeable
  • JSON in the project
  • Your own API
  • Headless CMS

Three separate layers: the engine in the middle owns how the system works, the data source below it is interchangeable, and the interface above belongs to the individual project.

Project scope at a glance

One engine. Different projects.

1

central consent engine

3

consent categories in the reference project

4

declared services

7

managed cookies

2

fully integrated languages

0

external CMP scripts in the loading path

These figures describe the consent definition of the reference project woop-art.de. They are an order of magnitude, not a limit: categories, services and cookies are data, and the engine imposes no ceiling on them. The last figure is the important one – no third-party script is loaded for the consent system itself.

01Starting point

Consent as part of the application

Web applications frequently embed external services such as analytics, maps, videos or appointment booking. That creates additional data flows and raises the question of the conditions under which those services may load at all.

Many consent solutions are integrated into a website afterwards, as a system of their own. That creates additional dependencies: configuration and interface sit outside the actual application, external scripts become part of the technical loading path, and control over individual integrations is spread across several systems.

For our projects we therefore wanted to integrate consent directly into the application architecture.

The solution had to

  • manage consent centrally
  • release consent-dependent services in a controlled way
  • version changes to the consent configuration
  • manage declared storage values centrally
  • support different data sources
  • cover several languages
  • allow project-specific interfaces
  • and be reusable across different applications

The result is a standalone consent engine that is used today as a shared technical module.

02Architecture

Three separate layers for logic, data and presentation

The consent system deliberately separates the central functional logic from project-specific data and the visible interface.

As a result, the same technical foundation can be used in applications that are built very differently, without having to reimplement consent state, versioning or script gating for every project.

The same engine can therefore be used in an art platform and on a corporate website, even though the two interfaces are designed differently.

Consent engine

The central engine is responsible for everything that stays the same across projects:

  • consent state
  • version check
  • cookie registry
  • script gating
  • withdrawal
  • clean-up of declared storage values
  • Google Consent Mode v2

This logic is maintained centrally and provided as a shared module.

Data source

The engine receives all project-specific information through a defined interface. This includes, among other things:

  • consent version
  • categories
  • services
  • cookies and other storage values
  • texts per language
  • script configurations

Where that information comes from is not decisive for the engine. It can live in the project itself or be provided by another data source.

Interface

Banner and settings dialog belong to the respective project. The presentation receives the data it needs and a fixed set of actions from the central engine.

This means the visual appearance can change completely without the underlying consent logic having to be adjusted.

04Data, languages & interface

The consent logic is not tied to a particular data source

A defined interface sits between the consent engine and the configuration. The engine needs certain information but is not tied to where that information is stored.

This makes different models possible.

Technical definition and translations remain separate

Cookie names, identifiers, category assignment and storage durations are language-neutral. Everything visitors read, by contrast, can be maintained per language.

This includes, for example

  • category labels
  • category descriptions
  • service information
  • cookie purposes
  • information on data transfers
  • banner texts
  • buttons
  • screen reader labels

A storage value is therefore defined technically once and then described for every language required.

In the reference project Woop Art, German and English are fully maintained. The Woop Technology website uses the same engine with additional languages.

Shared logic, different interfaces

The engine provides a reusable default interface but does not prescribe its use.

A project can

  • adopt banner and settings dialog unchanged
  • design only the banner itself
  • replace only the settings dialog
  • or implement both interfaces entirely on its own terms

The consent logic remains unchanged throughout.

The presentation can therefore be adapted to the design system of the respective project without reimplementing central functions such as versioning, registry or withdrawal.

Configuration in the project

Versioned files can be delivered directly alongside the source code. They need no additional network request and pass through the same build and deployment process as the application.

Your own API

An API can provide the same consent information centrally for several applications. This makes shared configurations or central administration processes possible.

Headless CMS

Editorial content can be maintained through a content system while the technical definition remains independent of it.

Technical configuration and editorial content therefore do not necessarily have to come from the same source.

Consent banner in the design of the reference project
The banner belongs to the website visually – not to an external system.
Settings dialog showing the consent categories
The settings dialog lists categories, services and declared cookies. It receives nothing but data and callbacks from the central engine.
05Evidence & operation

Server-side logging of decisions

In addition to the consent state in the browser, every explicitly saved decision can be logged server-side.

In the current system, what is recorded includes

  • consent ID
  • version of the configuration
  • the selection made
  • timestamp
  • user agent
  • truncated IP address

IPv4 addresses are truncated after the second block, IPv6 addresses after the third segment.

The endpoint provided for this accepts requests from its own origin only and sits on a fixed path, so that it can also be restricted deliberately at infrastructure level.

We deliberately call this server-side logging of consent decisions rather than audit-proof archiving. Technical logging supports the traceability of a decision; no further legal assurance is made by it.

A logging failure does not block the application

The visitor's decision takes effect in the application's consent state first. If the additional server-side storage fails, the website remains usable.

The error is logged server-side instead of exposing technical details in the browser. The consent system's ability to function therefore does not depend on the additional logging being available at every moment.

The consent function needs no external CMP

The consent configuration and the central engine are part of the application itself. No external CMP provider is therefore required for the consent system.

That means

  • no additional CMP script
  • no external network request for the consent function itself
  • no third-party consent interface
  • no additional platform dependency solely for managing consent

Consent-dependent services remain separate from this and load only once the required consent is in place.

06Reusable module

One shared module instead of project-specific one-offs

The consent engine exists as a package of its own and is provided through the private package registry of Woop Technology. Versions and changes can therefore be managed as traceably as any other technical dependency.

A new project essentially adds four project-specific areas.

Consent state, versioning, registry, script gating and withdrawal logic, by contrast, come from the shared module.

An improvement to the central engine can therefore reach several projects through a versioned update.

Data

The categories, services, storage values and texts of the respective project.

Persistence

The desired form of server-side storage for consent decisions.

Integrations

Analytics, for example, or other consent-dependent external services.

Design

The default interface, or custom banner and settings components.

07Where it fits

When a consent architecture of your own makes sense

A consent architecture of your own is not necessary for every project. For a simple website with few external services, an established consent platform can be the faster and more economical solution.

A shared module of your own becomes interesting in particular when several requirements come together

  • custom web applications
  • several projects on a shared technical foundation
  • different interfaces
  • multilingual content
  • several consent-dependent integrations
  • shared technical standards
  • your own hosting and deployment infrastructure
  • consent state as part of the actual application logic

In those cases a shared engine reduces project-specific implementations and makes it possible to develop central functions further in one place.

Consent can be integrated directly into the application

The central consent state is available to application code as well.

A component can therefore check, for example

  • Is analytics released?
  • May an embedded video be loaded?
  • Does consent need to be obtained before an external map?
  • Is the stored decision still valid for the current consent version?

This also makes two-click solutions possible. Instead of a third party that has not yet been released, a local component can be shown first, informing about the external service and loading it only after a corresponding decision.

Consent is therefore not limited to banner and settings dialog but can be integrated directly into the flow of an application.

Fewer additional dependencies

An external consent platform brings an additional provider, its own scripts, its own configuration and usually one more technical dependency. Our own engine, by contrast, is operated together with the existing applications and within the intended infrastructure.

This does not mean that external consent platforms are generally unsuitable. The decision depends on the scope and requirements of the respective project.

Consent data stays within the intended infrastructure

No further CMP provider is required for managing consent itself. The corresponding consent data can therefore be processed where the application is operated.

Which other external services a specific project uses, and which data is transferred in the process, is defined and documented project by project, independently of this.

08Result

A shared technical foundation for consent

The consent engine is used today as a reusable part of different web applications. Central functions are maintained once, while data, integrations, languages and interface remain project-specific.

Central consent logic

State, versioning, registry, script gating and withdrawal are managed together.

Consent before consent-dependent services

The corresponding integrations load only after the required consent.

Versioned decisions

Stored consent is bound to the respective state of the consent configuration.

Flexible integration

Data sources, languages and interfaces can be built differently for each project.

Server-side logging

Explicit consent decisions can be stored traceably with version and timestamp.

Reusable module

Improvements to the engine can reach several projects through versioned updates.

Technical overview

What the system consists of

Architecture
  • React
  • TypeScript
  • package architecture
  • dependency injection
Consent
  • category-based consent
  • versioning
  • withdrawal
  • cookie clean-up
  • script gating
Data sources
  • JSON in the project
  • your own API
  • headless CMS
Google
Consent Mode v2, gating for GA4
Languages
localised consent content, defined fallback language
Interface
bundled default UI, interchangeable banner and settings components
Persistence
  • consent cookie in the browser
  • server-side logging
  • truncated IP addresses
Integration
  • React hooks
  • controlled script injection
  • consent-dependent components
  • two-click solutions
Operation
  • private package registry
  • defined API paths
  • origin check
  • integration into the existing infrastructure
Portfolio

More projects

  • Web designDevelopmentInfrastructure

    Woop Art

    A digital art space that presents artworks impressively and guides visitors effortlessly through the gallery.

    Woop Art
    Woop Art
  • UX/UI designWeb developmentMultilingualBooking & payment

    Ciklusfit — Cintia Németh

    A clearly structured platform for cycle-based training, nutrition and lifestyle coaching – with offer comparison, appointment requests and booking.

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