Wie HWLP Studio diese Website DSGVO-konform macht -Schritt für Schritt erklärt.
Diese Website nutzt bewusst Drittanbieter-Dienste wie Google Fonts, Counter.dev Analytics, YouTube und Google Maps. HWLP Studio sorgt dafür, dass alle einwilligungspflichtigen Scripts erst nach Zustimmung des Besuchers geladen werden -vollautomatisch, ohne Backend-Logik auf der Website selbst.
Tracking-Scripts starten als type="text/plain" und werden vom Browser ignoriert.
HWLP Studio zeigt das Consent-Banner mit den konfigurierten Kategorien.
Alle akzeptieren, ablehnen oder einzelne Kategorien wählen.
Nur die genehmigten Scripts werden durch echte Script-Elemente ersetzt und ausgeführt.
Ein einziges Script-Tag im <head> genügt. Es muss als erstes Script
auf der Seite stehen, damit es blockierte Scripts erkennt bevor der Browser sie verarbeitet.
Das Widget lädt die Konfiguration (Kategorien, Texte, Design) von der HWLP Studio API und rendert das Banner als Shadow-DOM-Element -vollständig isoliert vom CSS der Website. Konfiguriert wird alles zentral in HWLP Studio, nicht im HTML.
<head>
<!-- MUSS als ERSTES Script stehen -->
<script
src="https://consent.hwlpstudio.com
/widget/f020a11f-...-019431.js"
async></script>
<!-- Danach: Meta-Tags, Stylesheets etc. -->
<link rel="stylesheet" href="style.css">
</head>Dieses Script wird auf jeder Seite der Website eingebunden.
Der Trick ist einfach aber wirkungsvoll: Statt type="text/javascript"
setzen wir type="text/plain". Der Browser erkennt das Script
nicht als ausführbaren Code und ignoriert es komplett.
Zusätzlich markiert das Attribut data-hwlp-category, welche
Einwilligungskategorie nötig ist. So weiß das Consent-Widget genau, welches Script
zu welcher Kategorie gehört.
<!-- BLOCKIERT: Läuft erst nach Einwilligung -->
<script
type="text/plain" <!-- nicht ausführbar -->
data-hwlp-category="statistics" <!-- Kategorie -->
src="https://cdn.counter.dev/script.js"
data-id="fa1b137e-..."
data-utcoffset="1">
</script>
<!-- NICHT BLOCKIERT: Direkt geladen -->
<link
href="https://fonts.googleapis.com/css2?..."
rel="stylesheet"> <!-- Kein data-hwlp-category -->Script wird vom Browser ignoriert
<script type="text/plain" ...>
Neues Script-Element wird erstellt und ausgeführt
<script src="..." >
Jeder Drittanbieter auf dieser Website ist einer Kategorie zugeordnet. Besucher können pro Kategorie entscheiden.
| Drittanbieter | Kategorie | Einwilligung nötig? | Blockiert mit |
|---|---|---|---|
| Google Fonts fonts.googleapis.com |
Funktional | Nein | Kein Blocking nötig |
| Counter.dev cdn.counter.dev |
Statistik | Ja | data-hwlp-category="statistics" |
| YouTube youtube.com/embed |
Marketing | Ja | data-hwlp-category="marketing" |
| Google Maps google.com/maps/embed |
Marketing | Ja | data-hwlp-category="marketing" |
Google Fonts wird als funktional eingestuft, weil es für die korrekte Darstellung der Website nötig ist. Es setzt keine Cookies und überträgt nur die IP-Adresse des Besuchers an Google-Server -das ist nach aktueller Rechtsprechung über das berechtigte Interesse (Art. 6 Abs. 1 lit. f DSGVO) abgedeckt, solange es in der Datenschutzerklärung transparent dokumentiert wird.
Alternative: Wer auf Nummer sicher gehen will, kann Google Fonts selbst hosten. In der Datenschutzerklärung von HWLP Studio wird der Einsatz automatisch dokumentiert.
YouTube-Embeds und Google Maps laden umfangreiche Tracking-Scripts,
setzen Cookies (z.B. VISITOR_INFO1_LIVE, YSC) und erstellen
detaillierte Nutzerprofile über Googles Werbenetzwerk.
Das geht weit über die reine Funktionalität hinaus und erfordert nach DSGVO eine ausdrückliche Einwilligung des Besuchers. Deshalb werden diese Embeds als "Marketing" kategorisiert und erst nach Zustimmung geladen.
Die Entscheidung des Besuchers wird als Cookie gespeichert - nicht auf einem Server, sondern direkt im Browser des Besuchers.
Beim nächsten Seitenaufruf liest das Widget den Cookie und aktiviert die genehmigten Scripts sofort, ohne das Banner erneut anzuzeigen. Der Cookie ist 365 Tage gültig.
Zusätzlich wird ein anonymes Consent-Log an die HWLP Studio API gesendet -ohne personenbezogene Daten. So kann der Website-Betreiber nachweisen, dass und wann Einwilligungen erteilt wurden (Rechenschaftspflicht nach Art. 5 Abs. 2 DSGVO).
Beispiel: Besucher hat Statistik akzeptiert, aber Marketing abgelehnt.
Die Datenschutzerklärung wird nicht manuell geschrieben, sondern von HWLP Studio automatisch generiert. Sie basiert auf den vom Scanner erkannten Drittanbietern und wird dynamisch in die Seite geladen.
Ein leeres <div> mit der ID hwlp-privacy-policy dient
als Container. Das Embed-Script lädt den passenden HTML-Inhalt von der API und fügt
ihn dort ein. Ändert sich die Website (z.B. neuer Drittanbieter), aktualisiert sich
die DSE automatisch -ohne Codeanpassung.
<!-- Container für die Datenschutzerklärung -->
<div id="hwlp-privacy-policy"></div>
<!-- Embed-Script lädt den Inhalt -->
<script
src="https://policy.hwlpstudio.com
/embed/f020a11f-...-019431.js"
async></script>
<!-- Das Script:
1. Extrahiert die Website-ID aus der URL
2. Ruft die generierte DSE von der API ab
3. Rendert den HTML-Inhalt im Container
4. Styling wird automatisch injiziert -->So sieht eine vollständig integrierte Seite aus -nur die HWLP-relevanten Teile:
<!DOCTYPE html>
<html lang="de">
<head>
<!-- 1. Consent-Banner als ERSTES Script -->
<script src="https://consent.hwlpstudio.com
/widget/{websiteId}.js" async></script>
<!-- 2. Funktionale Drittanbieter (kein Blocking) -->
<link href="https://fonts.googleapis.com/..." rel="stylesheet">
</head>
<body>
<!-- ... Seiten-Inhalt ... -->
<!-- 3. Einwilligungspflichtige Scripts blockieren -->
<script
type="text/plain"
data-hwlp-category="statistics"
src="https://cdn.counter.dev/script.js">
</script>
<!-- 4. Nur auf der Datenschutz-Seite: -->
<div id="hwlp-privacy-policy"></div>
<script src="https://policy.hwlpstudio.com
/embed/{websiteId}.js" async></script>
</body>
</html>Die manuelle Methode oben funktioniert. Aber was, wenn Sie WordPress nutzen, 20 Plugins haben oder schlicht keine Lust auf HTML-Edits? Auto-Blocking übernimmt alles automatisch.
Bei der manuellen Methode muss jedes einzelne Script im HTML angepasst werden:
type="text/plain" setzen, data-hwlp-category hinzufügen.
Das funktioniert bei einer einfachen Website. Aber bei WordPress mit Plugins,
Shopify-Themes oder Seiten, die Sie nicht selbst programmiert haben, ist das
oft nicht praktikabel oder sogar unmöglich.
Außerdem: Wenn ein Plugin ein neues Tracking-Script hinzufügt, müssen Sie das manuell finden und blockieren. Vergessen Sie es, laden Sie unbemerkt einen Drittanbieter ohne Einwilligung.
Mit Auto-Blocking müssen Sie nichts am HTML Ihrer Website ändern. Sie binden nur das HWLP Studio Widget ein. Alles andere passiert automatisch:
<head>
<script src="https://consent.hwlpstudio.com
/widget/{websiteId}.js"></script>
<!-- Kein type="text/plain" nötig -->
<!-- Kein data-hwlp-category nötig -->
<!-- Nichts sonst ändern -->
</head>So läuft das Zusammenspiel zwischen Ihnen und HWLP Studio - Schritt für Schritt.
Ihr HWLP-Berater legt Ihre Website in HWLP Studio an, konfiguriert das Consent-Banner (Farben, Texte, Position) und startet den ersten Scan. Sie müssen hier nichts tun.
HWLP Studio scannt Ihre Website vollautomatisch und erkennt alle Drittanbieter: Welche Scripts laufen? Welche Cookies werden gesetzt? Welche iframes sind eingebettet? Der Scanner durchsucht jede Seite und identifiziert jeden externen Dienst - Sie bekommen einen vollständigen Überblick, was auf Ihrer Website passiert.
Viele bekannte Drittanbieter werden automatisch erkannt und der richtigen Consent-Kategorie zugeordnet (Statistik, Marketing, Funktional). Wenn ein Anbieter nicht automatisch erkannt wird, analysieren und kategorisieren unsere Experten diesen für Sie. So ist sichergestellt, dass wirklich alles korrekt zugeordnet ist.
Aus den Scan-Ergebnissen wird automatisch eine Blockliste erstellt: Welche Domains brauchen eine Einwilligung? Diese Liste wird an das Widget übermittelt. Gleichzeitig wird die Datenschutzerklärung automatisch generiert - mit exakt den Drittanbietern, die auf Ihrer Website tatsächlich gefunden wurden.
Sie erhalten von Ihrem HWLP-Berater ein einziges Script-Tag. Dieses fügen Sie
in den <head> Ihrer Website ein.
Bei WordPress: in die Theme-Einstellungen oder header.php.
Bei Shopify: in die theme.liquid. Das war's - mehr müssen Sie nicht tun.
Das Consent-Banner erscheint. Tracking-Scripts und iframes werden automatisch blockiert, bis der Besucher zustimmt. Die Datenschutzerklärung ist immer aktuell. HWLP Studio führt regelmäßig neue Scans durch - neue Drittanbieter werden automatisch erkannt und blockiert, ohne dass Sie etwas tun müssen.
Das Widget blockiert Drittanbieter auf drei Ebenen - für maximale Sicherheit ab der ersten Sekunde.
Im Widget ist eine Liste mit ca. 50 bekannten Tracking-Domains fest eingebaut. Google Analytics, Facebook Pixel, YouTube, Hotjar und viele weitere werden sofort blockiert - noch bevor die API antwortet. Das funktioniert auch offline und ohne vorherigen Scan.
Nach dem ersten Scan liefert die HWLP Studio API eine website-spezifische Blockliste. Diese ist präziser als die Standardliste, weil sie nur die Domains enthält, die tatsächlich auf Ihrer Website gefunden wurden - inklusive der richtigen Kategorie-Zuordnung.
Fürexotische Drittanbieter, die nicht in der Standardliste stehen, kann Ihr HWLP-Berater Domains manuell einer Kategorie zuordnen. Diese Zuordnungen fließen in die Blockliste ein und werden beim nächsten Seitenaufruf automatisch angewendet.
Der Ablauf in Echtzeit - von der ersten Millisekunde bis zur fertigen Seite.
Das Script wird als erstes Element im <head> ausgeführt. Die eingebaute Standardliste mit ~50 bekannten Tracker-Domains ist sofort aktiv.
Ein DOM-Beobachter überwacht ab sofort jedes neue Element, das in die Seite eingefügt wird. Scripts und iframes werden in Echtzeit abgefangen, noch bevor der Browser sie laden kann.
Gleichzeitig fragt das Widget die HWLP Studio API nach der website-spezifischen Konfiguration: Welche Domains wurden gescannt? Welche Kategorien gelten? Wie soll das Banner aussehen? Timeout: max. 3 Sekunden.
Alle Scripts und iframes, die bereits im HTML stehen, werden gegen die Blockliste geprüft. Treffer werden sofort blockiert: Scripts bekommen type="text/plain", iframes werden durch einen Platzhalter ersetzt.
Sobald die API antwortet, wird die Standardliste durch die präzisere Scan-Blockliste ersetzt. Das Consent-Banner wird mit dem konfigurierten Design gerendert.
Der Besucher sieht das Banner und entscheidet: Alles akzeptieren, alles ablehnen oder einzelne Kategorien wählen. Die Entscheidung wird als Cookie gespeichert (365 Tage gültig).
Nur die Kategorien, denen zugestimmt wurde, werden freigeschaltet. Blockierte Scripts werden durch neue, ausführbare Elemente ersetzt. Blockierte iframes erhalten ihre Original-URL zurück und laden den Inhalt. Abgelehnte Kategorien bleiben blockiert.
Anders als bei Scripts, die unsichtbar im Hintergrund laufen, sind iframes für den Besucher sichtbar (Videos, Karten). Deshalb zeigt das Widget an deren Stelle einen informativen Platzhalter, der erklärt, warum der Inhalt blockiert ist und wie er freigeschaltet werden kann.
Der Besucher kann direkt im Platzhalter die entsprechende Kategorie akzeptieren. Der iframe lädt dann sofort, ohne dass die Seite neu geladen werden muss.
YouTube-Video ist blockiert
Akzeptieren Sie "Marketing", um dieses Video anzusehen.
Beide Methoden schützen Ihre Besucher. Auto-Blocking macht es nur deutlich einfacher.
| Aspekt | Manuelles Blocking | Auto-Blocking |
|---|---|---|
| Einrichtung | Jedes Script einzeln anpassen | Ein Script-Tag einbinden |
| Neue Drittanbieter | Manuell finden und blockieren | Automatisch erkannt |
| WordPress / Shopify | Schwierig bis unmöglich | Funktioniert sofort |
| Iframe-Blockierung | Nicht möglich (nur Scripts) | YouTube, Maps etc. mit Platzhalter |
| Ohne Scan / API | Funktioniert immer | Standardliste als Fallback |
| Kontrolle | Volle Kontrolle pro Script | Automatisch (manuell überschreibbar) |
Besuchen Sie die Startseite und beobachten Sie, wie das Consent-Banner die Scripts kontrolliert.
Zur Startseite Datenschutzerklärung ansehen