Datenschutz auf einer Website ist kein einzelner Haken, den man setzt.

Es sind etwa zehn Stellen, an denen ohne Ihr Zutun Daten Ihrer Besucher an fremde Server gehen.

Dieser Beitrag geht sie der Reihe nach durch: die Grundlagen, das Zustimmungsbanner, das Kontaktformular, den Tag Manager, die Schriften und die kleinen Einbindungen, an die niemand denkt.

Ein Hinweis vorweg, der für den ganzen Beitrag gilt: wir sind Webdesigner und keine Rechtsanwälte.

Alles hier ist technische Praxis, keine Rechtsberatung, und für die Bewertung Ihres Einzelfalls brauchen Sie einen Anwalt.

Inhalt

Die Grundlagen

Fünf Punkte, die auf jeder Firmenwebsite sitzen müssen.

  1. Eine Datenschutzerklärung. Sie muss benennen, welche Daten Sie erheben, zu welchem Zweck, auf welcher Rechtsgrundlage, wie lange Sie sie speichern und welche Rechte der Besucher hat. Von jeder Seite aus erreichbar, üblicherweise im Fußbereich. Entscheidend ist, dass darin genau die Werkzeuge stehen, die Sie tatsächlich einsetzen. Eine Erklärung aus einem Generator, die zehn Dienste auflistet, von denen Sie zwei nutzen, und Ihren Tag Manager nicht erwähnt, ist schlechter als hilfreich.
  2. Ein vollständiges Impressum. Separate Seite, ebenfalls von überall erreichbar.
  3. Eine verschlüsselte Verbindung. Ohne Verschlüsselung geht jede Formulareingabe im Klartext über die Leitung. Das Zertifikat ist bei nahezu jedem Anbieter kostenlos enthalten, Sie müssen es nur aktivieren.
  4. Datensparsamkeit. Erheben Sie nur, was Sie zur Bearbeitung brauchen. Jedes Pflichtfeld, das Sie nicht benötigen, ist doppelt schädlich: es kostet Anfragen und es erhöht Ihre Pflichten.
  5. Aktuelle Software. Datenschutz ist auch Datensicherheit. Ein veraltetes Plugin mit bekannter Lücke ist der wahrscheinlichste Weg, auf dem Ihre Kundendaten abfließen.

Das Banner beim ersten Besuch ist nicht Dekoration, sondern die Stelle, an der Sie die Zustimmung einholen.

Was ein brauchbares Banner erfüllen muss

  • Es informiert verständlich, welche Arten von Cookies eingesetzt werden und wozu.
  • Ablehnen ist genauso leicht wie Zustimmen. Ein großer grüner Zustimmen-Knopf neben einem grauen Textlink erfüllt das nicht.
  • Nichts ist vorausgewählt, außer den technisch notwendigen Cookies.
  • Der Widerruf ist jederzeit möglich, über einen dauerhaft erreichbaren Punkt.
  • Und das Wichtigste: vor der Zustimmung lädt nichts. Genau hier scheitern die meisten Websites. Das Banner erscheint, und die Werkzeuge dahinter laufen längst.

Der letzte Punkt ist der einzige, der im Streitfall zählt.

Ein optisch perfektes Banner über einer Website, die ohnehin sofort alles lädt, erfüllt seinen Zweck nicht.

Die Anbieter im Vergleich

Die Preise ändern sich regelmäßig, prüfen Sie sie deshalb auf den Anbieterseiten nach.

„Cookiebot“ durchsucht Ihre Website automatisch nach Cookies und ordnet sie ein, was Ihnen die meiste Arbeit abnimmt.

Dazu viele Sprachen und weitreichende Anpassung des Aussehens.

Nachteil: kostenpflichtig, und bei Websites mit vielen Unterseiten steigt der Preis deutlich.

„Usercentrics“ ist stark in der Verzahnung mit anderen Werkzeugen, etwa dem Google Tag Manager, und liefert Auswertungen darüber, wie viele Besucher zustimmen.

Nachteil: der teuerste der drei, und beim Aussehen weniger frei.

„Borlabs Cookie“ ist ein WordPress-Plugin mit einmaliger Lizenz statt Monatsgebühr, einfach einzurichten und gut anpassbar.

Nachteil: nur für WordPress, und weniger Funktionen als die beiden anderen.

Für eine gewöhnliche Firmenwebsite auf WordPress ist die einmalige Lizenz meist die wirtschaftlichste Wahl.

Und es gibt kostenlose Lösungen, eine davon im nächsten Abschnitt.

Schritt für Schritt: ein Banner mit AdSimple

Dieser Anbieter hat ein kostenloses Paket, das für kleine Websites ausreicht.

  1. Konto anlegen und anmelden.
  2. Banner erstellen. Im Bereich für die Zustimmungsverwaltung geben Sie Ihre Domain ein, fügen sie hinzu, wählen ein Paket und aktivieren das kostenlose.
  3. Cookies einordnen. Der wichtigste Schritt. Das Werkzeug findet die Cookies Ihrer Website, und Sie ordnen jeden einer Kategorie zu: technisch notwendige unter „Notwendig“, Messwerkzeuge wie Google Analytics unter „Statistik“, Werbewerkzeuge unter „Marketing“. Am Ende sollte nichts mehr unter „Nicht kategorisiert“ stehen, denn ein nicht zugeordnetes Cookie wird auch nicht von der Zustimmung gesteuert.
  4. Aussehen anpassen. Farben, Stil, Position und Text. Achten Sie darauf, dass der Ablehnen-Knopf genauso sichtbar ist wie der Zustimmen-Knopf, sonst haben Sie die Anforderung mit dem Design wieder ausgehebelt.
  5. Code einbauen. Sie kopieren das angezeigte Skript und fügen es im Kopfbereich Ihrer Website ein, möglichst weit oben, damit das Banner vor allen anderen Werkzeugen lädt.
  6. Prüfen. In mehreren Browsern und auf dem Handy, jeweils nach dem Löschen der gespeicherten Daten, sonst erscheint das Banner nicht mehr.

Zum fünften Schritt eine Warnung, weil hier in vielen Anleitungen etwas Riskantes steht.

Oft wird empfohlen, den Code über den Theme-Editor im WordPress-Verwaltungsbereich direkt in die Datei header.php zu schreiben.

Davon raten wir ab, aus zwei Gründen.

Erstens ist dieser Eintrag beim nächsten Theme-Update überschrieben, und dann verschwindet Ihr Banner, ohne dass Sie es merken.

Zweitens legt ein Tippfehler in dieser Datei die ganze Website lahm, samt Anmeldeseite, und Sie können Ihren Fehler nicht mehr zurücknehmen.

Nutzen Sie stattdessen das Feld für Kopfbereich-Skripte, das viele Themes mitbringen, oder ein Plugin für Code-Schnipsel.

Beides übersteht jedes Update.

Und zum letzten Schritt: die eigentliche Prüfung besteht nicht darin, ob das Banner erscheint.

Öffnen Sie die Entwicklerwerkzeuge Ihres Browsers, lehnen Sie ab und sehen Sie nach, ob trotzdem Verbindungen zu fremden Servern aufgebaut werden.

Nur diese Prüfung sagt Ihnen, ob das Banner wirklich etwas steuert.

Das Kontaktformular

Zwei Dinge müssen vorher sitzen: die verschlüsselte Verbindung und eine Datenschutzerklärung, in der steht, was mit Anfragen passiert.

Mit „Contact Form 7“

  1. Installieren und aktivieren. Über Plugins im Verwaltungsbereich suchen und einrichten.
  2. Neues Formular anlegen und aussagekräftig benennen. Der Name ist nur für Sie sichtbar, hilft aber später, wenn mehrere Formulare existieren. Gehen Sie danach die Bereiche für den Mailversand und die Rückmeldungen durch.
  3. Felder anlegen, so wenige wie möglich. Name, Nachricht und ein Kontaktweg genügen fast immer. Alles andere erfragen Sie im Gespräch.
  4. Hinweis zum Datenschutz ergänzen, direkt am Formular, mit Verweis auf Ihre Datenschutzerklärung. Ein Satz genügt, etwa: die abgesendeten Daten werden nur zur Bearbeitung Ihres Anliegens verarbeitet.
  5. Absenden testen. Prüfen Sie, ob die Nachricht ankommt und nicht im Spam landet. Ein Formular, das seit Monaten ins Leere sendet, ist der teuerste Fehler auf einer Firmenwebsite, und niemand bemerkt ihn, weil keine Beschwerde kommt.

Wer die Absender in seiner Statistik sehen will, kann nach dem Absenden auf eine Dankesseite weiterleiten und diesen Aufruf als Ereignis zählen.

Das ist praktisch, aber optional.

Die Frage nach dem Zustimmungshaken

Hier ist die Lage weniger eindeutig, als viele Anleitungen behaupten.

Verbreitet ist die Empfehlung, ein Pflichtfeld einzubauen, mit dem der Besucher die Datenschutzerklärung bestätigt, bevor er absenden kann.

Contact Form 7 bringt dafür eigene Felder mit, etwa das Feld für eine Annahme.

Es gibt aber auch die Auffassung, dass ein solcher Haken nicht erforderlich ist.

Die Begründung: wer Ihnen eine Anfrage schickt, will eine Antwort, und die Verarbeitung zu genau diesem Zweck stützt sich nicht auf eine Einwilligung, sondern darauf, dass sie zur Bearbeitung des Anliegens nötig ist.

Ein erzwungener Haken kann dann sogar zum Problem werden, weil eine Einwilligung freiwillig sein muss und eine erzwungene keine ist.

Unstrittig ist dagegen dreierlei: ein Hinweis am Formular gehört dorthin, die Datenschutzerklärung muss verlinkt sein, und Sie dürfen diese Adresse nicht für Werbung verwenden.

Damit ist auch klar, wohin diese Frage gehört: zu einem Anwalt.

Die Captcha-Falle

Ein Punkt, bei dem viele Ratgeber das Gegenteil des Richtigen empfehlen.

Häufig steht dort, Sie sollten ein Captcha einbauen, um das Formular vor Bots zu schützen, und zwar als Datenschutzmaßnahme.

Gegen Spam hilft das.

Nur ist das bekannteste Captcha ein Dienst von Google, der beim Laden Daten Ihres Besuchers an Google überträgt, unter anderem die IP-Adresse.

Sie lösen also ein Spamproblem und schaffen dabei genau die Datenübermittlung, die Sie vermeiden wollten.

Was daraus folgt.

  • Ein solches Captcha braucht eine Zustimmung und muss in der Datenschutzerklärung benannt sein. Ein Captcha, das vor der Zustimmung lädt, ist dasselbe Problem wie ein Messwerkzeug, das vor der Zustimmung lädt.
  • Die einfachere Lösung ist ein unsichtbares Feld, das Menschen nicht sehen und Bots ausfüllen. Wird es ausgefüllt, verwerfen Sie die Nachricht. Kostet nichts, überträgt nichts, hält den größten Teil des Spams ab.
  • Oder eine schlichte Rechenaufgabe im Formular.
  • Und wenn es doch ein richtiges Captcha sein muss, nehmen Sie einen Anbieter, der die Prüfung ohne Übermittlung an Dritte erledigt.

Der Google Tag Manager

Der Tag Manager ist ein kostenloses Werkzeug, mit dem Sie Skripte auf Ihrer Website verwalten, ohne jedes Mal in den Quellcode zu gehen.

Er ist der Verteiler, nicht das Messwerkzeug selbst.

Oft liest man, er sei unproblematisch, weil er keine personenbezogenen Daten erhebe.

Das greift zu kurz.

Der Verteiler wird von einem Google-Server geladen, und dabei erfährt Google schon die IP-Adresse Ihres Besuchers.

Vor allem aber entscheidet er, was danach lädt, und genau dort sitzen Analyse- und Werbewerkzeuge, die eindeutig Daten erheben.

Drei Punkte für den Einsatz.

  1. Die Auslösung an die Zustimmung binden. Ihre Zustimmungslösung teilt dem Tag Manager mit, welche Kategorien freigegeben sind, und nur die zugehörigen Skripte starten. Der Tag Manager bringt dafür eine eigene Einwilligungssteuerung mit, und die einschlägigen Bannerlösungen greifen darauf zu.
  2. Jeden einzelnen Tag prüfen. Es genügt nicht, den Verteiler zu steuern und dann anzunehmen, alles darin sei geregelt. Gehen Sie die Liste durch und ordnen Sie jedem Skript eine Kategorie zu.
  3. Die Unterlagen in Ordnung halten. Datenschutzerklärung und die Verträge zur Datenverarbeitung mit den beteiligten Anbietern, Google eingeschlossen.

Google Fonts lokal einbinden

Schriften von Google werden standardmäßig bei jedem Seitenaufruf von Google-Servern geladen, und dabei geht die IP-Adresse Ihres Besuchers mit.

Das ist einer der häufigsten Abmahngründe überhaupt, weil es sich von außen in Sekunden prüfen lässt.

Die Lösung: die Schriftdateien auf Ihren eigenen Server legen.

Mit einem Plugin

Plugins wie „OMGF“ oder entsprechende Funktionen in Optimierungs-Plugins erledigen das selbst.

  1. Plugin installieren und aktivieren.
  2. In den Einstellungen die Funktion für lokale Schriften einschalten.
  3. Das Plugin lädt die verwendeten Schriften herunter und liefert sie danach vom eigenen Server aus.

Prüfen Sie danach nach, ob wirklich keine Verbindung mehr zu Google besteht.

Manche Themes und Plugins laden ihre Schriften eigenständig, und das übersieht ein solches Werkzeug gelegentlich.

Von Hand

Wenn das Plugin nicht greift, bleibt der manuelle Weg.

  1. Schriften herunterladen, entweder direkt bei Google Fonts oder über einen Dienst, der gleich das passende CSS mitliefert.
  2. Dateien hochladen, in einen eigenen Ordner Ihres Themes, etwa fonts.
  3. CSS ergänzen, mit einer Regel, die auf die hochgeladene Datei verweist.
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  src: url('/pfad/zur/schrift/open-sans.woff2') format('woff2');
}

Nehmen Sie das Format woff2 und nicht ttf, das ist deutlich kleiner und lädt schneller.

Und laden Sie nur die Schnitte, die Sie wirklich verwenden.

Eine Schriftfamilie in sechs Stärken und jeweils kursiv sind zwölf Dateien, von denen Sie meist drei brauchen.

Das CSS binden Sie über die Stildatei Ihres Child-Themes ein, nicht über einen Eintrag in der header.php, denn der wäre beim nächsten Update weg.

Sollten die Schriften danach trotzdem noch von Google geladen werden, hilft ein Plugin, das die Google-Schriften des Themes vollständig abschaltet.

Die kleinen Datensammler

Diese fünf Punkte werden fast immer übersehen, und sie sind alle in Minuten erledigt.

  • Schaltflächen zu sozialen Netzwerken. Die üblichen Knöpfe übertragen Daten an das Netzwerk, sobald die Seite lädt, also noch bevor jemand klickt. Verwenden Sie einfache Verweise auf Ihre Profile statt eingebetteter Knöpfe, dann passiert nichts, bis der Besucher klickt.
  • Gravatar. Bei Kommentaren lädt WordPress Profilbilder von einem fremden Dienst und überträgt dabei einen Wert, der aus der Mailadresse des Kommentierenden berechnet wird. Abschalten, wenn Sie es nicht brauchen.
  • Die Kommentarfunktion. Erhebt Name, Mailadresse und IP-Adresse. Brauchen Sie keine Kommentare, schalten Sie die Funktion ab, das erspart Ihnen gleich den Spam. Behalten Sie sie, gehört ein Hinweis unter das Formular und der Umgang mit diesen Daten in Ihre Datenschutzerklärung.
  • Eingebettete Karten. Eine Karte auf Ihrer Kontaktseite lädt von fremden Servern und überträgt die IP-Adresse. Zeigen Sie stattdessen ein Bild der Karte mit einem Verweis zur Routenplanung, oder laden Sie die Karte erst nach einem Klick des Besuchers.
  • Eingebettete Videos. Dasselbe Muster. Nutzen Sie die datenschutzfreundliche Einbettung des Anbieters oder eine Lösung, die erst nach dem Klick lädt.

Das Muster hinter allen fünf Punkten ist dasselbe.

Alles, was Ihre Seite von einem fremden Server nachlädt, überträgt dabei die Adresse Ihres Besuchers.

Wenn Sie diesen einen Satz verstanden haben, finden Sie die restlichen Stellen auf Ihrer Website selbst.

Fazit

Die Reihenfolge, wenn Sie heute anfangen: Verschlüsselung aktivieren, Datenschutzerklärung an die tatsächlich eingesetzten Werkzeuge anpassen, Schriften lokal einbinden, Karten und Videos erst nach Klick laden, dann das Zustimmungsbanner einrichten und zuletzt prüfen, ob vor der Zustimmung wirklich nichts lädt.

Der letzte Schritt ist der, der über alles entscheidet, und der einzige, den ein optisch fertiges Banner nicht beweist.

Sollten Sie nicht wissen, wo Ihre Website noch fremde Server anspricht, öffnen Sie die Entwicklerwerkzeuge Ihres Browsers und sehen Sie sich die Liste der Netzwerkanfragen an.

Jeder Eintrag, der nicht Ihre eigene Domain zeigt, ist eine Stelle, die Sie prüfen müssen, und damit haben Sie Ihre Arbeitsliste!