world map with pins

3 Wege um Maps DSGVO-Konform im MyListing Theme zu nutzen

Vorwort

Das MyListing Theme bietet von Haus aus die Einbindung von GoogleMaps und Mapbox über deren API an. Zweifelsohne, das ist praktisch und funktioniert, ist aber leider nicht DSVO konform. Warum? Sobald ein Benutzer eine Seite aufruft, in der GoogleMaps oder Mapbox, eingebunden ist, wird zumindest seine IP Adresse an deren Server (Standort: US) weitergeleitet.
Spätestens seit dem der Europäische Gerichtshof das EU-US Privacy Shield abkommen für ungültig erklärt hat, ist dies enorm problematisch.

Schauen wir uns mal die drei Möglichkeiten der Datenschutzkonformen Einbindung an. (Achtung, ich biete hier keine Rechtsberatung. Ich schildere hier meine persönlichen Einschätzungen)

Einbindung von Maps erst nach Zustimmung

Diverse “Consent – Management” bzw. Cookie Tools bieten die Möglichkeit einen sogenannten Content Blocker einzurichten.

Dadurch wird das Laden der Karte unterbunden, solange bis der Besucher deiner Webseite dem Verbindungsaufbau mit dem fremden Server zugestimmt hat.

Content Blocker

Mögliche Plugins für Wordpress für diesen Zweck sind zum Beispiel: Borelabs Cookie oder Real Cookie Banner.

Es gibt nur einen Haken, die Einbindung der Karten Dienste weicht im MyListingTheme vom “Standard” ab. Die Maps werden von beinen Plugins nicht erkannt und die Content-Blocker müssen somit manuell eingerichtet werden. Das erfordert, zumindest ein bisschen, Entwickler Kenntnisse.

1. neuen Service anlegen

Lege einen neuen Service in der Kategorie “Funktional” an.
Fülle alle Felder aus, und aktiviere die Option “Dieser Service setzt keine technischen Cookies auf dem Client des Besuchers, aber bindet z. B. ein Script ein.”

2. Content Blocker anlegen

Unter Content Blocker > Content Blocker hinzufügen legst du einen neuen Blocker an. Fülle den Bereich “Allgemeine Content Blocker Konfiguration” aus.

Spannend wird es jetzt in der Sektion “Technische Definition”. Im Feld “URLs / Zu blockierende Elemente” ist folgendes anzugeben:

*api.tiles.mapbox.com*
div[class*="contact-map"]
*wp-content/themes/my-listing/assets/dist/maps/mapbox*

Im Feld “Verbundene Services” wählst du noch den unter Punkt 1 angelegten Service aus.

Die kommenden Einstellungen betreffen das Aussehen des Content Blockers und können nach belieben übernommen werden.

Und somit werden die Karten, eingebunden über mapbox.com, erst nach Zustimmung des Besuchers geladen.

OpenStreetMaps

Mit ein bisschen mehr Aufwand kann man OpenStreetMaps (OSM) im Theme integrieren.
Ich nutze dafür das Plugin Leaflet Maps.
Mittels Leaflet Maps kann man OpenStreetMaps Karten via Shortcode integrieren.
Ist aber auch erstmal doof, da OSM Server in England stehen, und England ja bekanntlich nicht mehr zur EU gehört.
Auf Github gibt es eine Erweiterung dafür, dass auch hier das Laden der Karte unterbunden wird bis der Besucher ausdrücklich zugestimmt hat.

OpenStreet Maps Proxy/Cache

Ich mag keine Content-Blocker und muss auch sonst für keine Cookies eine Einwilligung einholen, so dass die zwei obigen Varianten für mich wegfallen.
Ich bin einen anderen Weg gegangen so das ich die OSM Karten für den Benutzer vollkommen (meine Meinung) DSGVO Konform einbinden kann.

Hier meine Step-by-Step Anleitung:

Step 1: Das OSM Proxy/Cache Script

Auf einer Subdomain meines MyListing Projektes habe ich mir diesen Tile Proxy installiert.
Er ist wirklich simple und dient dazu das der Besucher der Webseite (Client) nicht mehr selbst mit dem OSM Server kommunizieren muss, sondern nur noch mit meiner Subdomain.
Zusätzlich kann dieses Script auch einen Kartenbereich für eine einstellbare Zeit Cachen (Stichwort OSM bounding box).

Step 2: Wordpress Plugin Leaflet Maps

Wie auch schon weiter oben, kommt hier das Wordpress Plugin Leaflet Maps zum Einsatz.
Dessen Einstellungen müssen noch kurz angepasst werden:
Im Wordpress Backend unter Leaflet Map Settings müssen wir die Kartenkachel-Url ändern.
Im Orignal steht hier die URL des OSM Servers drin.

leaflet_kartenkachelurl
Step 3: leaflet.js lokal hosten (optional)

Das Plugin verwendet (logischerweise, bei dem Namen) die leaflet.js Bibliothek.
Standardmäßig wird diese über das Content Delivery Network (cdn) unpkg.com ausgeliefert.
Ich möchte auch diese Bibliothek (und die zughörige CSS-Datei) lokal hosten.
Also das Packet von leafletjs.com runterladen und auf dem eigen Webspace entpacken.
Anschließend wieder in den Plugin Einstellungen die Javascript und CSS URL anpassen:

Leaflet JSS URL
Step 4: OSM in den MyListing Listing Type integrieren

Wir müssen den Listing Typ bearbeiten und Single Page > Content & Tabs einen Shortcode Block einfügen. (Die Leaflet Maps Shortcodes sind alle unter Leaflet Map > Shordcodes Helper erläutert.)
Mein Shortcode Block sieht so aus:

Shortcode Block
Step 5: Aufrufe zu Mapbox/GoogleMaps unterbinden (optional aber wichtig)

Vorher hatte ich die Mapbox API in den MyListing Theme Optionen aktiviert.
Obwohl ich den API Schlüssel gelöscht habe, gab es trotzdem noch Requests zu Mapbox.
Diese habe ich schlussendlich mit dem Script-Manger von Perfmatters.io unterbunden.

Du hast Fragen oder Anregungen? Schreib es in die Kommentare.

8 Kommentare

  1. Hallo Ole,
    kannst du mir bitte helfen? Ich habe das MyListing Theme und dort wird Google Maps nicht geblockt. Könntest du mir eine Anleitung schicken wie ich das mit Borlabs und Google Maps hinbekomme?

    Gruß Stephan

    • Hallo Stephan,

      lustig, gerade habe ich deinen Beitrag in einer Facebook Gruppe gesehen.

      Nein, leider kann ich dir mit Borlabs und den Google Maps aus dem MyListing Theme nicht weiterhelfen.
      Ich hatte es selber nicht hinbekommen und bin dann für den Fall auf Mapbox und Real Cookie Banner ausgewichen.

      Ich hab gerade mal im Support Forum vom MyListin Theme gestöbert, und selbst die Dev’s von 27collective habe es nicht hinbekommen.
      Beste Grüße
      Ole

  2. Hallo Ole,

    es gab jetzt ein neues Update mit openstreetmap. Jetzt ist die Lösung ähnlich wie du mit Mapbox beschrieben hattest. Kannst du mal bitte gucken wie man das jetzt mit der neuen Variante auch DSGVO Konform bekommt?

    • Hallo Stephan,
      das Gute ist schon mal das die benötigte js Datei vom MyListing Theme bereits lokal gehostet wird (Step 3, nur das sie hier nicht mehr leaflet.js sondern openstreetmap.js heißt).

      Man müsste jetzt nur noch den Aufruf zu tile.openstreetmap.org durch einen Content Blocker bis zur Einwilligung blockieren.

      Oder man benutzt wieder einen OSM Proxy/Cache und ändert in der Datei /wp-content/themes/my-listing/assets/dist/maps/openstreetmap/openstreetmap.js die URL des Tile Servers tile.openstreetmap.org gegen die eigene URL ab. Dummerweise lässt sich diese Datei nicht ins Child Theme verschieben, so dass man diese Änderung nach jedem Theme Update neu machen müsste.

      Ich hätte gerne im Helpdesk nach einer anderen Möglichkeit gefragt, aber mein Support ist abgelaufen und nur dafür möchte ich ihn nicht verlängern.

    • Hallo Stephan,
      Im heutigen Update wurde (auf meine Anregung) wohl eine Einstellung für die Angabe eines benutzerdefinierten Tile Server eingebaut. Somit müsste man die Proxy Adresse eingeben lassen. Ich hab es mir noch nicht angeschaut/getestet.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert