Nutzerstandort

Mit der Geolocation API können Sie den Standort eines Nutzers ermitteln, sofern er seine Einwilligung erteilt hat.

Paul Kinlan

Mit der Geolocation API können Sie mit Einwilligung des Nutzers den Standort ermitteln. Sie können diese Funktion beispielsweise verwenden, um Nutzer zu ihrem Ziel zu führen und von Nutzern erstellte Inhalte mit Geo-Tags zu versehen, z. B. um zu kennzeichnen, wo ein Foto aufgenommen wurde.

Mit der Geolocation API kannst du außerdem sehen, wo sich der Nutzer befindet, und ihn während der Navigation im Blick behalten – immer mit der Zustimmung des Nutzers (und nur während die Seite geöffnet ist). Dadurch ergeben sich viele interessante Anwendungsfälle, wie z. B. die Einbindung in Back-End-Systeme zur Vorbereitung einer Bestellung für die Abholung, wenn sich der Nutzer in der Nähe befindet.

Wenn Sie die Geolocation API verwenden, müssen Sie mit vielen Dingen vertraut sein. In diesem Leitfaden werden häufige Anwendungsfälle und Lösungen erläutert.

Zusammenfassung

• Verwenden Sie die Standortbestimmung, wenn dies für den Nutzer von Vorteil ist.
• Bitten Sie um Erlaubnis als eindeutige Antwort auf eine Nutzergeste.
• Verwenden Sie die Funktionserkennung, falls der Browser eines Nutzers die Standortbestimmung nicht unterstützt.
• Sie lernen nicht nur, wie Sie die Standortbestimmung implementieren, sondern auch, wie Sie sie am besten nutzen.
• Testen Sie die Standortbestimmung auf Ihrer Website.

Wann Sie die Standortbestimmung verwenden sollten

• Ermitteln Sie, wo sich der Nutzer am nächsten an einem bestimmten physischen Standort befindet, um die Nutzererfahrung anzupassen.
• Passen Sie Informationen (z. B. Nachrichten) an den Standort des Nutzers an.
• Die Position eines Nutzers auf einer Karte anzeigen
• Taggen Sie Daten, die in Ihrer Anwendung erstellt wurden, mit dem Standort des Nutzers (d. h. einem Bild mit einem Geotag versehen).

Frage verantwortungsvoll um Erlaubnis fragen

Aktuelle Nutzerstudien haben gezeigt, dass Nutzer Websites misstrauen, wenn sie sie beim Seitenaufbau einfach auffordern, ihre Position anzugeben. Was sind also die Best Practices?

Angenommen, Nutzer geben ihren Standort nicht an

Viele Ihrer Nutzer möchten Ihnen ihren Standort nicht vorgeben, sodass Sie einen defensiven Entwicklungsstil wählen müssen.

1. Bearbeiten Sie alle Fehler aus der Geolocation API heraus, damit Sie Ihre Website an diese Bedingung anpassen können.
2. Machen Sie deutlich, dass Sie den Standort benötigen.
3. Verwenden Sie bei Bedarf eine Fallback-Lösung.

Fallback verwenden, wenn Standortbestimmung erforderlich ist

Wir empfehlen, für Ihre Website oder Anwendung keinen Zugriff auf den aktuellen Standort des Nutzers zu benötigen. Erfordert Ihre Website oder Anwendung jedoch den aktuellen Standort des Nutzers, gibt es Drittanbieterlösungen, mit denen Sie den aktuellen Standort des Nutzers ermitteln können.

Bei diesen Lösungen wird häufig die IP-Adresse des Nutzers betrachtet und den physischen Adressen zugeordnet, die in der RIPE-Datenbank registriert sind. Diese Standorte sind oft nicht sehr genau und geben normalerweise die Position des Telekommunikations-Hubs oder Mobilfunkmasts an, der dem Nutzer am nächsten ist. In vielen Fällen treffen sie möglicherweise nicht einmal so genau zu, insbesondere wenn der Nutzer ein VPN oder einen anderen Proxy-Dienst verwendet.

Bei einer Nutzergeste immer Zugriff auf den Standort anfordern

Achte darauf, dass Nutzer verstehen, warum du nach ihrem Standort fragst und welchen Nutzen sie haben. Wenn Nutzer sofort beim Laden der Website dazu auffordern, dies zu tun, ist die Nutzererfahrung schlecht.

Zeigen Sie dem Nutzer stattdessen einen klaren Call-to-Action oder weisen Sie darauf hin, dass ein Vorgang Zugriff auf seinen Standort benötigt. Der Nutzer kann dann die Systemaufforderung für den Zugriff leichter mit der gerade initiierten Aktion verknüpfen.

Geben Sie deutlich an, dass für eine Aktion der Standort angefordert wird

In einer Studie des Google Ads-Teams wurde ein Nutzer aufgefordert, für eine anstehende Konferenz auf einer bestimmten Hotelwebsite ein Hotelzimmer in Boston zu buchen. Daraufhin wurde ihm nach dem Tippen auf den Call-to-Action „Finden und buchen“ auf der Startseite direkt sein GPS-Standort mitgeteilt.

In einigen Fällen war der Nutzer frustriert, weil ihm nicht klar war, warum ihm Hotels in San Francisco angezeigt wurden, wenn er ein Zimmer in Boston buchen wollte.

Idealerweise sollten Nutzer verstehen, warum Sie nach ihrem Standort fragen. Fügen Sie einen bekannten Unterzeichner hinzu, der auf allen Geräten verwendet wird, z. B. einen Entfernungsmesser, oder einen expliziten Call-to-Action wie „In meiner Nähe suchen“.

Nutzer leicht dazu bewegen, ihren Standort um Erlaubnis zu legen

Sie haben keinen Zugriff auf Aktivitäten von Nutzern. Sie wissen genau, wann Nutzer den Zugriff auf ihre Standorte verweigert haben, Sie wissen jedoch nicht, wann sie Ihnen Zugriff gewährt haben. Sie wissen nur, dass Sie Zugriff erhalten haben, wenn Ergebnisse angezeigt werden.

Es empfiehlt sich, Nutzer zum Ausführen einer Aktion anzuregen.

Unsere Empfehlung:

1. Richten Sie einen Timer ein, der nach kurzer Zeit ausgelöst wird. 5 Sekunden sind ein guter Wert.
2. Wenn Sie eine Fehlermeldung erhalten, zeigen Sie dies dem Nutzer an.
3. Wenn Sie eine positive Antwort erhalten, deaktivieren Sie den Timer und verarbeiten Sie die Ergebnisse.
4. Wenn Sie nach Ablauf des Zeitlimits keine positive Antwort erhalten haben, zeigen Sie dem Nutzer eine Benachrichtigung an.
5. Wenn die Antwort später eintrifft und die Benachrichtigung noch vorhanden ist, entfernen Sie sie vom Bildschirm.

button.onclick = function () {
  var startPos;
  var nudge = document.getElementById('nudge');

  var showNudgeBanner = function () {
    nudge.style.display = 'block';
  };

  var hideNudgeBanner = function () {
    nudge.style.display = 'none';
  };

  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);

  var geoSuccess = function (position) {
    hideNudgeBanner();
    // We have the location, don't display banner
    clearTimeout(nudgeTimeoutId);

    // Do magic with location
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    switch (error.code) {
      case error.TIMEOUT:
        // The user didn't accept the callout
        showNudgeBanner();
        break;
    }
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

Unterstützte Browser

Die meisten Browser unterstützen mittlerweile die Geolocation API. Es empfiehlt sich jedoch, immer zuerst zu prüfen, ob eine solche Unterstützung auch tatsächlich möglich ist.

Sie können die Kompatibilität leicht prüfen, indem Sie das Vorhandensein des Geolocation-Objekts testen:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
} else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

Ermitteln des aktuellen Standorts des Nutzers

Die Geolocation API bietet eine einfache Methode, um den Standort des Nutzers abzurufen: getCurrentPosition(). Durch den Aufruf dieser Methode wird der aktuelle Standort des Nutzers asynchron gemeldet.

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  navigator.geolocation.getCurrentPosition(geoSuccess);
};

Wenn eine Anwendung in dieser Domain zum ersten Mal Berechtigungen angefordert hat, prüft der Browser normalerweise die Nutzereinwilligung. Je nach Browser kann es auch Einstellungen geben, die die Suche nach Berechtigungen immer zulassen oder nicht zulassen. In diesem Fall wird der Bestätigungsprozess umgangen.

Abhängig vom Standortgerät, das Ihr Browser verwendet, kann das Positionsobjekt viel mehr als nur Breiten- und Längengrad enthalten, beispielsweise eine Höhe oder eine Richtung. Die zusätzlichen Informationen, die dieses Standortsystem verwendet, können Sie erst dann erkennen, wenn die Daten tatsächlich zurückgegeben werden.

Standort des Nutzers beobachten

Mit der Geolocation API können Sie den Standort des Nutzers (mit Einwilligung des Nutzers) mit einem einzigen Aufruf von getCurrentPosition() abrufen.

Wenn Sie den Standort des Nutzers kontinuierlich beobachten möchten, verwenden Sie die Geolocation API-Methode watchPosition(). Sie funktioniert ähnlich wie getCurrentPosition(), wird jedoch mehrmals als Positionierungssoftware ausgelöst:

1. Erhält eine genauere Sperre für den Nutzer.
2. Bestimmt, dass sich die Position der Nutzenden ändert.

var watchId = navigator.geolocation.watchPosition(function (position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Wann die Standortbestimmung verwendet werden sollte, um den Standort von Nutzern zu beobachten

• Sie möchten den Nutzerstandort genauer sperren.
• Ihre Anwendung muss die Benutzeroberfläche basierend auf neuen Standortinformationen aktualisieren.
• Ihre Anwendung muss die Geschäftslogik aktualisieren, wenn der Nutzer eine bestimmte definierte Zone betritt.

Best Practices für die Standortbestimmung

Immer leeren und den Akku schonen

Die Überwachung auf Änderungen an einem Standort ist nicht kostenlos. Auch wenn Betriebssysteme möglicherweise Plattformfunktionen einführen, mit denen sich Anwendungen in das Geo-Subsystem einbinden lassen, wissen Sie als Webentwickler nicht, welche Unterstützung das Gerät des Nutzers für die Überwachung des Nutzerstandorts bietet. Und während Sie sich eine Position ansehen, binden Sie das Gerät mit viel zusätzlichen Verarbeitungsvorgängen ein.

Wenn Sie die Position des Nutzers nicht mehr erfassen müssen, rufen Sie clearWatch auf, um die Systeme zur Standortbestimmung zu deaktivieren.

Fehler ordnungsgemäß beheben

Leider sind nicht alle Standortsuchen erfolgreich. Vielleicht konnte kein GPS-Standort gefunden werden oder der Nutzer hat plötzlich die Standortsuche deaktiviert. Im Falle eines Fehlers wird ein zweites, optionales Argument für getCurrentPosition() aufgerufen, mit dem Sie den Nutzer innerhalb des Callbacks benachrichtigen können:

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };
  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

Geringerer Aufwand für die Einrichtung der Standortbestimmung mit Hardware

In vielen Anwendungsfällen benötigen Sie nicht den aktuellen Standort des Nutzers, sondern nur eine grobe Schätzung.

Mit der optionalen Eigenschaft maximumAge teilen Sie dem Browser mit, dass ein kürzlich erfasstes Geolocation-Ergebnis verwendet werden soll. Dies gibt nicht nur schneller eine Antwort zurück, wenn der Nutzer die Daten zuvor angefordert hat, sondern verhindert auch, dass der Browser die Hardwareschnittstellen zur Standortbestimmung wie die WLAN-Triangulation oder GPS startet.

window.onload = function () {
  var startPos;
  var geoOptions = {
    maximumAge: 5 * 60 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

Nutzer nicht warten lassen, Zeitlimit festlegen

Sofern Sie kein Zeitlimit festlegen, wird Ihre Anfrage für die aktuelle Position möglicherweise nie zurückgegeben.

window.onload = function () {
  var startPos;
  var geoOptions = {
    timeout: 10 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

Einen ungefähren Standort gegenüber einem genauen Standort bevorzugen

Wenn Sie das nächstgelegene Geschäft für einen Nutzer finden möchten, benötigen Sie wahrscheinlich keine Genauigkeit von einem Meter. Die API ist so konzipiert, dass ein grober Standort angegeben wird, der so schnell wie möglich zurückgegeben wird.

Wenn Sie jedoch ein hohes Maß an Genauigkeit benötigen, können Sie die Standardeinstellung mit der Option enableHighAccuracy überschreiben. Verwenden Sie dies sparsam, da die Auflösung länger dauert und mehr Akkuenergie verbraucht.

window.onload = function () {
  var startPos;
  var geoOptions = {
    enableHighAccuracy: true,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

Standortbestimmung mit Chrome-Entwicklertools emulieren

Nachdem Sie die Standortbestimmung eingerichtet haben, sollten Sie Folgendes tun:

• Testen Sie, wie Ihre App an verschiedenen geografischen Standorten funktioniert.
• Achten Sie darauf, dass die Funktion „Graceful Degradation“ Ihrer App beeinträchtigt, wenn die Standortbestimmung nicht verfügbar ist.

Beides ist in den Chrome-Entwicklertools möglich.

1. Öffnen Sie die Chrome-Entwicklertools.
2. Drücken Sie die Esc, um die Konsolenleiste zu öffnen.
3. Menü der Console-Leiste öffnen
4. Klicken Sie auf die Option Sensoren, um den Tab „Sensoren“ aufzurufen.

Hier können Sie den Standort durch eine voreingestellte Großstadt überschreiben, einen benutzerdefinierten Standort eingeben oder die Standortbestimmung deaktivieren, indem Sie die Überschreibung auf Standort nicht verfügbar setzen.

Feedback