Ugrás a fő tartalomhoz
Woop Technology
Európa pontrácsos térképe: Svájc kiemelve, benne a cég székhelyével, Alt St. Johann-nalAlt St. Johann
Összes referencia
Technikai esettanulmány · Adatvédelem és architektúra

Hozzájárulási architektúra, amely projekteken átívelően működik

Webalkalmazásainkhoz központi hozzájárulás-motort fejlesztettünk, amely a hozzájárulásokat, a hozzájáruláshoz kötött szolgáltatásokat és a bejelentett tárolási értékeket kezeli.

Projektadatok
Típus
Technikai esettanulmány
Modul
@woop-technology/consent
Referenciaprojekt
Woop Art
Állapot
Használatban, folyamatos fejlesztés alatt
Integráció
React, Next.js App Router
Kiszolgálás
Privát csomagkezelés
Fókuszterületek
  • Hozzájárulási architektúra
  • Google Consent Mode v2
  • Cookie-nyilvántartás
  • verziózott hozzájárulások
  • szkriptszűrés
  • cserélhető adatforrások
  • többnyelvűség
  • projektenkénti felületek
  • szerveroldali naplózás
Felület
Sáv és beállítások a projekt saját arculatában
  • Sáv
  • Beállítások
  • Alapértelmezett felület
  • Saját arculat
Hozzájárulás-motor
Állapot, verziózás, nyilvántartás, szűrés
  • Hozzájárulási állapot
  • Verziózás
  • Cookie-nyilvántartás
  • Szkriptszűrés
  • Visszavonás
  • Consent Mode v2
Adatforrás
JSON, API vagy CMS – cserélhető
  • JSON a projektben
  • Saját API
  • Headless CMS

Három elkülönített réteg: középen a motor felel a működésért, alatta az adatforrás cserélhető, felette a felület az adott projekthez tartozik.

A projekt terjedelme egy pillantásra

Egy motor. Különböző projektek.

1

központi hozzájárulás-motor

3

hozzájárulási kategória a referenciaprojektben

4

bejelentett szolgáltatás

7

kezelt cookie

2

teljesen integrált nyelv

0

külső CMP-szkript a betöltési útvonalon

A számok a woop-art.de referenciaprojekt hozzájárulási definícióját írják le. Nagyságrendet jelölnek, nem korlátot: a kategóriák, szolgáltatások és cookie-k adatként szerepelnek, a motor nem szab rájuk felső határt. Az utolsó szám a legfontosabb – magához a hozzájárulási rendszerhez egyetlen idegen szkript sem töltődik be.

01Kiindulási helyzet

A hozzájárulás az alkalmazás része

A webalkalmazások gyakran építenek be külső szolgáltatásokat: analitikát, térképet, videót vagy időpontfoglalást. Ezzel további adatáramlások keletkeznek, és felmerül a kérdés, milyen feltételek mellett tölthetők be ezek a szolgáltatások.

Sok hozzájárulási megoldást utólag, önálló rendszerként illesztenek egy weboldalhoz. Ezzel további függőségek keletkeznek: a konfiguráció és a felület az alkalmazáson kívülre kerül, külső szkriptek épülnek be a technikai betöltési útvonalba, az egyes integrációk feletti kontroll pedig több rendszer között oszlik meg.

A saját projektjeinkben ezért a hozzájárulást közvetlenül az alkalmazás architektúrájába akartuk illeszteni.

A megoldásnak

  • központilag kell kezelnie a hozzájárulásokat
  • ellenőrzött módon kell engedélyeznie a hozzájáruláshoz kötött szolgáltatásokat
  • verziózni kell a hozzájárulási konfiguráció változásait
  • központilag kell kezelnie a bejelentett tárolási értékeket
  • támogatnia kell a különböző adatforrásokat
  • több nyelvet kell lefednie
  • lehetővé kell tennie a projektenkénti felületeket
  • és eltérő alkalmazásokban is újrafelhasználhatónak kell lennie

Ebből jött létre az önálló hozzájárulás-motor, amelyet ma közös technikai modulként használunk.

02Architektúra

Három elkülönített réteg a logikának, az adatoknak és a megjelenítésnek

A hozzájárulási rendszer tudatosan elválasztja a központi működési logikát a projektspecifikus adatoktól és a látható felülettől.

Így ugyanaz a technikai alap eltérő felépítésű alkalmazásokban is használható anélkül, hogy a hozzájárulási állapotot, a verziózást vagy a szkriptszűrést minden projektben újra kellene implementálni.

Ugyanaz a motor használható például egy művészeti platformon és egy vállalati weboldalon is, noha a két felület eltérően van kialakítva.

Hozzájárulás-motor

A központi motor felel mindazért, ami projekteken átívelően azonos marad:

  • hozzájárulási állapot
  • verzióellenőrzés
  • cookie-nyilvántartás
  • szkriptszűrés
  • visszavonás
  • a bejelentett tárolási értékek törlése
  • Google Consent Mode v2

Ezt a logikát központilag tartjuk karban, és közös modulként bocsátjuk rendelkezésre.

Adatforrás

A motor minden projektspecifikus információt egy meghatározott interfészen keresztül kap meg. Ide tartozik többek között:

  • hozzájárulási verzió
  • kategóriák
  • szolgáltatások
  • cookie-k és további tárolási értékek
  • nyelvenkénti szövegek
  • szkriptkonfigurációk

A motor szempontjából nem meghatározó, honnan származnak ezek az információk. Lehetnek közvetlenül a projektben, vagy származhatnak más adatforrásból is.

Felület

A sáv és a beállítási ablak az adott projekthez tartozik. A megjelenítés a szükséges adatokat és a rögzített műveleteket a központi motortól kapja.

A vizuális megjelenés így teljesen megváltozhat anélkül, hogy a mögöttes hozzájárulási logikát módosítani kellene.

04Adatok, nyelvek és felület

A hozzájárulási logika nem kötődik meghatározott adatforráshoz

A hozzájárulás-motor és a konfiguráció között meghatározott interfész áll. A motornak bizonyos információkra szüksége van, de nincs ahhoz kötve, hol tárolják ezeket.

Így különböző modellek lehetségesek.

A technikai definíció és a fordítások elkülönülnek

A cookie-nevek, azonosítók, kategóriabesorolások és tárolási idők nyelvsemlegesek. Minden, amit a látogatók olvasnak, ezzel szemben nyelvenként gondozható.

Ide tartozik például

  • kategórianevek
  • kategórialeírások
  • szolgáltatásinformációk
  • cookie-célok
  • adattovábbításra vonatkozó információk
  • sávszövegek
  • gombfeliratok
  • képernyőolvasó-feliratok

Egy tárolási értéket így technikailag egyszer definiálunk, majd minden szükséges nyelven leírunk.

A Woop Art referenciaprojektben a német és az angol nyelv teljes körűen gondozott. A Woop Technology weboldala ugyanezt a motort használja további nyelvekkel.

Közös logika, eltérő felületek

A motor újrafelhasználható alapértelmezett felületet biztosít, de nem írja elő a használatát.

Egy projekt

  • változatlanul átveheti a sávot és a beállítási ablakot
  • csak a sávot alakíthatja ki saját maga
  • csak a beállítási ablakot cserélheti le
  • vagy mindkét felületet teljesen projektspecifikusan valósíthatja meg

A hozzájárulási logika eközben változatlan marad.

A megjelenítés így az adott projekt designrendszeréhez igazítható anélkül, hogy olyan központi funkciókat kellene újraírni, mint a verziózás, a nyilvántartás vagy a visszavonás.

Konfiguráció a projektben

A verziózott fájlok közvetlenül a forráskóddal együtt szállíthatók. Nem igényelnek további hálózati hívást, és ugyanazon a build- és deployment-folyamaton mennek végig, mint az alkalmazás.

Saját API

Egy API ugyanezeket a hozzájárulási információkat központilag, több alkalmazás számára is biztosíthatja. Így közös konfigurációk vagy központi adminisztrációs folyamatok építhetők fel.

Headless CMS

A szerkesztői tartalmak tartalomkezelő rendszerben gondozhatók, miközben a technikai definíció ettől függetlenül marad.

A technikai konfigurációnak és a szerkesztői tartalomnak tehát nem feltétlenül kell ugyanabból a forrásból származnia.

Hozzájárulási sáv a referenciaprojekt arculatában
A sáv vizuálisan a weboldalhoz tartozik – nem egy külső rendszerhez.
Beállítási ablak a hozzájárulási kategóriákkal
A beállítási ablak kategóriákat, szolgáltatásokat és bejelentett cookie-kat mutat. Kizárólag adatokat és visszahívásokat kap a központi motortól.
05Igazolás és üzemeltetés

A döntések szerveroldali naplózása

A böngészőben tárolt hozzájárulási állapot mellett minden kifejezetten elmentett döntés szerveroldalon is naplózható.

A jelenlegi rendszerben többek között rögzítjük

  • a hozzájárulási azonosítót
  • a konfiguráció verzióját
  • a meghozott választást
  • az időpontot
  • a user agentet
  • a rövidített IP-címet

Az IPv4-címeket a második blokk után, az IPv6-címeket a harmadik szegmens után rövidítjük.

Az erre szolgáló végpont csak azonos eredetű kéréseket fogad el, és rögzített útvonalon található, hogy infrastruktúra szinten is célzottan korlátozható legyen.

Ezt a funkciót tudatosan a hozzájárulási döntések szerveroldali naplózásaként nevezzük meg, és nem revízióbiztos archiválásként. A technikai naplózás támogatja egy döntés nyomon követhetőségét; ezen túlmenő jogi garanciát nem jelent.

A naplózás hibája nem blokkolja az alkalmazást

A látogató döntése először az alkalmazás hozzájárulási állapotában lép érvénybe. Ha a kiegészítő szerveroldali mentés meghiúsul, a weboldal továbbra is használható marad.

A hiba szerveroldalon kerül naplózásra ahelyett, hogy technikai részletek jelennének meg a böngészőben. A hozzájárulási rendszer működőképessége így nem függ attól, hogy a kiegészítő naplózás minden pillanatban elérhető-e.

A hozzájárulási funkcióhoz nem szükséges külső CMP

A hozzájárulási konfiguráció és a központi motor a saját alkalmazás része. Magához a hozzájárulási rendszerhez ezért nincs szükség külső CMP-szolgáltatóra.

Ez azt jelenti

  • nincs további CMP-szkript
  • nincs külső hálózati hívás magához a hozzájárulási funkcióhoz
  • nincs idegen hozzájárulási felület
  • nincs további platformfüggőség pusztán a hozzájárulások kezelése miatt

A hozzájáruláshoz kötött szolgáltatások ettől elkülönülnek, és csak akkor töltődnek be, ha a szükséges hozzájárulás rendelkezésre áll.

06Újrafelhasználható modul

Közös modul projektenkénti egyedi megoldások helyett

A hozzájárulás-motor önálló csomagként létezik, és a Woop Technology privát csomagkezelésén keresztül érhető el. A verziók és a változások így ugyanolyan nyomon követhetően kezelhetők, mint bármely más technikai függőség.

Egy új projekt lényegében négy projektspecifikus területet egészít ki.

A hozzájárulási állapot, a verziózás, a nyilvántartás, a szkriptszűrés és a visszavonási logika ezzel szemben a közös modulból származik.

A központi motor egy fejlesztése így verziózott frissítéssel több projektbe is átvehető.

Adatok

Az adott projekt kategóriái, szolgáltatásai, tárolási értékei és szövegei.

Perzisztencia

A hozzájárulási döntések szerveroldali tárolásának kívánt formája.

Integrációk

Például analitika vagy más, hozzájáruláshoz kötött külső szolgáltatás.

Design

Az alapértelmezett felület vagy saját sáv- és beállításkomponensek.

07Elhelyezés

Mikor érdemes saját hozzájárulási architektúra

Saját hozzájárulási architektúra nem minden projekthez szükséges. Kevés külső szolgáltatást használó egyszerű weboldalnál egy bevált hozzájárulási platform lehet a gyorsabb és gazdaságosabb megoldás.

A közös saját modul főként akkor válik érdekessé, ha több igény találkozik

  • egyedi webalkalmazások
  • több projekt közös technikai alapon
  • eltérő felületek
  • többnyelvűség
  • több, hozzájáruláshoz kötött integráció
  • közös technikai szabványok
  • saját hosting- és deployment-infrastruktúra
  • a hozzájárulási állapot mint az alkalmazáslogika része

Ezekben az esetekben a közös motor csökkenti a projektspecifikus implementációkat, és lehetővé teszi, hogy a központi funkciókat egy helyen fejlesszük tovább.

A hozzájárulás közvetlenül beépíthető az alkalmazásba

A központi hozzájárulási állapot az alkalmazáskód számára is elérhető.

Egy komponens így például ellenőrizheti

  • Engedélyezett-e az analitika?
  • Betölthető-e egy beágyazott videó?
  • Szükséges-e hozzájárulás egy külső térkép előtt?
  • Érvényes-e még a tárolt döntés az aktuális hozzájárulási verzióhoz?

Ezáltal kétkattintásos megoldások is megvalósíthatók. A még nem engedélyezett harmadik fél helyett először egy helyi komponens jelenhet meg, amely tájékoztat a külső szolgáltatásról, és azt csak a megfelelő döntés után tölti be.

A hozzájárulás így nem korlátozódik a sávra és a beállítási ablakra, hanem közvetlenül beépíthető az alkalmazás folyamatába.

Kevesebb további függőség

Egy külső hozzájárulási platform további szolgáltatót, saját szkripteket, saját konfigurációt és rendszerint egy újabb technikai függőséget hoz magával. A saját motor ezzel szemben a meglévő alkalmazásokkal együtt, a tervezett infrastruktúrán belül üzemel.

Ez nem jelenti azt, hogy a külső hozzájárulási platformok alapvetően alkalmatlanok lennének. A döntés az adott projekt terjedelmétől és követelményeitől függ.

A hozzájárulási adatok a tervezett infrastruktúrán belül maradnak

Magához a hozzájárulások kezeléséhez nincs szükség további CMP-szolgáltatóra. A vonatkozó hozzájárulási adatok így ott dolgozhatók fel, ahol az alkalmazás is üzemel.

Azt, hogy egy konkrét projekt milyen további külső szolgáltatásokat használ, és eközben milyen adatok kerülnek továbbításra, ettől függetlenül, projektenként határozzuk meg és dokumentáljuk.

08Eredmény

Közös technikai alap a hozzájáruláshoz

A hozzájárulás-motort ma különböző webalkalmazások újrafelhasználható részeként használjuk. A központi funkciókat egyszer gondozzuk, miközben az adatok, az integrációk, a nyelvek és a felület projektspecifikusak maradnak.

Központi hozzájárulási logika

Az állapot, a verziózás, a nyilvántartás, a szkriptszűrés és a visszavonás közösen kezelt.

Hozzájárulás a kötött szolgáltatások előtt

A vonatkozó integrációk csak a szükséges hozzájárulás után töltődnek be.

Verziózott döntések

A tárolt hozzájárulások a hozzájárulási konfiguráció adott állapotához kötöttek.

Rugalmas integráció

Az adatforrások, a nyelvek és a felületek projektenként eltérően építhetők fel.

Szerveroldali naplózás

A kifejezett döntések verzióval és időponttal, nyomon követhetően tárolhatók.

Újrafelhasználható modul

A motor fejlesztései verziózott frissítésekkel több projektbe is átvehetők.

Technikai áttekintés

Miből áll a rendszer

Architektúra
  • React
  • TypeScript
  • csomagarchitektúra
  • dependency injection
Hozzájárulás
  • kategóriaalapú hozzájárulás
  • verziózás
  • visszavonás
  • cookie-törlés
  • szkriptszűrés
Adatforrások
  • JSON a projektben
  • saját API
  • headless CMS
Google
Consent Mode v2, szűrés a GA4-hez
Többnyelvűség
lokalizált hozzájárulási tartalmak, meghatározott tartaléknyelv
Felület
beépített alapértelmezett UI, cserélhető sáv- és beállításkomponensek
Perzisztencia
  • hozzájárulási cookie a böngészőben
  • szerveroldali naplózás
  • rövidített IP-címek
Integráció
  • React hookok
  • ellenőrzött szkriptbeillesztés
  • hozzájárulásfüggő komponensek
  • kétkattintásos megoldások
Üzemeltetés
  • privát csomagkezelés
  • meghatározott API-útvonalak
  • eredetellenőrzés
  • illeszkedés a meglévő infrastruktúrához
Portfólió

További projektek

  • WebdesignFejlesztésInfrastruktúra

    Woop Art

    Digitális művészeti tér, amely igényesen mutatja be a műveket, és könnyedén vezeti végig a látogatókat a galérián.

    Woop Art
    Woop Art
  • UX/UI designWebfejlesztésTöbbnyelvűségFoglalás & fizetés

    Ciklusfit — Németh Cintia

    Világosan strukturált platform ciklusfókuszú edzéshez, táplálkozási és életmód-tanácsadáshoz – ajánlat-összehasonlítással, időpontkéréssel és foglalással.

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