Bei der Einbindung des JavaScript-Echtzeit-Tickers gibt es aus Sicht der DSGVO einen zentralen Knackpunkt: Die dynamische IP-Adresse des Website-Besuchers. [1] Da das Skript (fetch und WebSocket) direkt im Browser des Nutzers ausgeführt wird, verbindet sich das Endgerät des Besuchers ohne Umwege mit dem Mastodon-Server. Dabei wird die IP-Adresse automatisch an den Instanzbetreiber übermittelt. Da IP-Adressen als personenbezogene Daten gelten (EuGH-Urteil), handelt es sich hierbei um eine datenschutzrelevante Drittland- oder Drittanbieter-Übermittlung. [1, 2, 3] Um den Ticker rechtssicher zu betreiben, musst du folgende vier Bereiche beachten:
1. Das Problem mit der Rechtsgrundlage (Einwilligung vs. Berechtigtes Interesse)
Ähnlich wie beim berüchtigten Urteil zu Google Fonts oder externen YouTube-Embeds argumentieren Aufsichtsbehörden oft, dass das ungefragte Laden von Drittanbieter-Skripten, die IP-Adressen abgreifen, nicht ohne Weiteres über das „Berechtigte Interesse“ (Art. 6 Abs. 1 lit. f DSGVO) abgedeckt ist. Ein Ticker ist für den rein technischen Betrieb deiner Hugo-Website meistens nicht „zwingend erforderlich“. [3] Zwei Lösungswege stehen dir zur Auswahl:
Da Hugo ein statischer Website-Generator ist, generiert er die Seiten im Voraus. Um einen Echtzeit-Ticker für Event-Absagen einzubinden, müssen wir die Statik von Hugo aufbrechen und die Daten im Browser des Nutzers via JavaScript live von Mastodon streamen. [1, 2] Da Absagen sofort sichtbar sein müssen (ohne dass der Nutzer die Seite neu lädt), nutzen wir hierfür die Mastodon Streaming API (via WebSockets). [3] Hier ist die Schritt-für-Schritt-Anleitung, wie du den Ticker nahtlos und sauber in dein Hugo-Projekt integrierst.
Schritt 1: Das HTML-Layout anlegen (Partial)
Erstelle ein neues Partial-Layout für deinen Ticker. Dadurch bleibt dein Code modular. Erstelle die Datei layouts/partials/live-ticker.html und füge folgenden Code ein:
Der Proxy-Ansatz ist für ein statisches System wie Hugo die eleganteste Lösung. Der große Vorteil: 100 % DSGVO-Konformität ohne Cookie-Banner. Die IP-Adressen deiner Besucher verbleiben vollständig auf deinem Webserver und werden niemals an die Mastodon-Instanz übermittelt [🔍]. Da Hugo-Seiten meistens auf modernen Hosting-Plattformen oder klassischen PHP-Webspace-Paketen liegen, gibt es zwei Wege, den Proxy umzusetzen. Wähle einfach die Variante, die besser zu deiner Hosting-Infrastruktur passt:
Variante A: Der PHP-Proxy (Für klassischen Webspace)
Wenn deine Hugo-Seite auf einem normalen Webspace (z. B. bei Strato, Ionos, All-In-One) liegt, kannst du eine winzige PHP-Datei als Tunnel nutzen.