Ausgangssituation
GetTerms ist ein Cookie-Consent-Tool, das Webseitenbetreibern hilft, DSGVO-konform Einwilligungen einzuholen. Das Besondere an GetTerms: Der Banner wird nicht nur auf einer Plattform eingesetzt, sondern in völlig unterschiedlichen Umgebungen — Shopify-Shops, WordPress-Seiten, Webflow-Projekte, statische Seiten und komplett custom entwickelte Webanwendungen.
Der bestehende Banner war in Plain JavaScript geschrieben. Funktional, aber über die Zeit immer schwerer wartbar geworden. Neue Features hinzuzufügen war riskant, weil es keine klare Komponentenstruktur gab. Die Codebasis war ein monolithisches Skript, das bei jeder Änderung umfassend getestet werden musste — auf jeder einzelnen Zielplattform.
Die Herausforderung
Universelle Kompatibilität
Die größte technische Herausforderung bei GetTerms ist nicht der Banner selbst — es ist die Tatsache, dass er überall funktionieren muss. Ein Cookie-Banner, der in einem Shopify-Theme eingebettet wird, läuft in einer völlig anderen Umgebung als einer, der in eine WordPress-Seite oder eine Nuxt-Anwendung integriert wird.
Jede Plattform hat eigene Quirks: unterschiedliche DOM-Ready-Events, verschiedene Script-Loading-Strategien, potenzielle CSS-Konflikte, verschiedene Content Security Policies. Ein Cookie-Banner, der in einer Umgebung perfekt funktioniert, kann in einer anderen komplett brechen.
Das bedeutet: Der Code muss nicht nur korrekt sein, sondern robust genug, um in Umgebungen zu funktionieren, die man nicht kontrolliert. Keine Annahmen über das Host-System machen. Keine globalen Styles verschmutzen. Keine Konflikte mit anderen Skripten erzeugen.
Wartbarkeit und Feature-Velocity
GetTerms entwickelt sich ständig weiter. Neue DSGVO-Anforderungen, neue Browser-APIs, neue Plattformen — das Tool muss Schritt halten. Mit der alten Plain-JavaScript-Codebasis war jedes neue Feature ein Risiko. Es fehlte an Struktur, an Testbarkeit, an einer klaren Trennung von UI und Logik.
Die Lösung
Refactoring zu Vue.js
Das komplette Frontend wurde von Grund auf in Vue.js neu aufgebaut. Die Entscheidung für Vue.js mag auf den ersten Blick ungewöhnlich erscheinen — schließlich muss das Ergebnis ein einzelnes, einbettbares Skript sein. Aber genau hier liegt der Vorteil: Vue.js als Build-Time-Framework liefert eine saubere Komponentenarchitektur für die Entwicklung, kompiliert aber zu einem schlanken, eigenständigen Bundle für die Auslieferung.
Die neue Architektur teilt den Banner in klar definierte Komponenten auf:
- Consent-UI: Die visuelle Darstellung des Banners — vollständig anpassbar, aber in sich gekapselt
- Script-Manager: Steuert, welche Skripte basierend auf der Einwilligung geladen oder blockiert werden
- Storage-Layer: Verwaltet die Speicherung der Consent-Entscheidung — Cookie-basiert, mit Fallbacks
- Platform-Adapter: Abstrahiert plattformspezifische Unterschiede
Diese Trennung macht es möglich, Features isoliert zu entwickeln und zu testen, ohne das Gesamtsystem zu destabilisieren.
Cross-Domain Tracking
Eines der komplexeren Features, die nach dem Refactoring entwickelt wurden: Cross-Domain Cookie Tracking. Viele Unternehmen betreiben ihre Hauptseite und ihren Shop auf unterschiedlichen Subdomains — beispielsweise www.example.com und shop.example.com. Ohne Cross-Domain-Support müssten Besucher ihre Cookie-Einwilligung auf jeder Subdomain erneut erteilen.
Die Implementierung synchronisiert die Consent-Entscheidung über Subdomains hinweg, sodass ein Besucher seine Einwilligung nur einmal geben muss. Klingt simpel — ist aber technisch anspruchsvoll, weil Browser zunehmend restriktiver mit Cross-Domain-Cookies umgehen und verschiedene Browser unterschiedliche Regeln anwenden.
iframe- und Script-Blocking
Ein Cookie-Consent-Tool, das Skripte erst nach Einwilligung lädt, muss auch mit eingebetteten Inhalten umgehen können. YouTube-Videos, Google Maps, Social-Media-Widgets — all das lädt über iframes externe Ressourcen und setzt potenziell Cookies, bevor der Nutzer eingewilligt hat.
GetTerms blockiert diese iframes proaktiv und zeigt stattdessen einen Platzhalter mit einem Hinweis auf die benötigte Einwilligung. Erst nach explizitem Consent werden die tatsächlichen Inhalte nachgeladen. Dasselbe Prinzip gilt für Drittanbieter-Skripte: Sie werden durch Typ-Attribute am Laden gehindert und erst nach Einwilligung aktiviert.
Technische Besonderheiten
Was GetTerms von anderen Cookie-Consent-Tools unterscheidet, ist die Tiefe der Integration. Es reicht nicht, einfach einen Banner anzuzeigen und ein Cookie zu setzen. Ein ernst gemeintes Consent-Tool muss:
- Skripte tatsächlich blockieren — nicht nur dokumentieren, dass man um Einwilligung gebeten hat
- Dynamisch nachgeladene Inhalte erkennen — auch Skripte und iframes, die erst nach dem initialen Pageload eingefügt werden
- Revokation unterstützen — wenn ein Nutzer seine Einwilligung widerruft, müssen bereits gesetzte Cookies entfernt und laufende Tracking-Skripte gestoppt werden
- Plattformübergreifend funktionieren — ohne Annahmen über das Host-System
Jeder dieser Punkte ist für sich genommen eine technische Herausforderung. In Kombination — und mit dem Anspruch, auf jeder Plattform zu funktionieren — ergibt sich ein Projekt, das weit über einen einfachen Banner hinausgeht.
Ergebnis
Nach einem sechsmonatigen Kernprojekt und fortlaufender Weiterentwicklung ist GetTerms heute ein deutlich leistungsfähigeres und wartbareres Produkt. Die Vue.js-Architektur ermöglicht es, neue Features schnell und sicher zu entwickeln. Cross-Domain Tracking, iframe-Blocking und Script-Management funktionieren zuverlässig über alle unterstützten Plattformen hinweg.
Das Projekt zeigt, wie man mit einem durchdachten Refactoring nicht nur technische Schulden abbauen, sondern gleichzeitig die Grundlage für deutlich schnellere Feature-Entwicklung schaffen kann. Die Investition in eine saubere Architektur zahlt sich bei jedem einzelnen Feature zurück, das danach entwickelt wird.
