Watch-IP

Besucherstandort aus JavaScript im Browser abfragen

Dieser Leitfaden fügt einer Webseite einen vollständigen GET /v1/geo-Aufruf hinzu: einen Ladezustand, ein erfolgreiches Ergebnis und einen Fallback für den Fall, dass die Anfrage fehlschlägt oder ein Feld fehlt.

Bevor Sie beginnen

  • Ein Watch-IP-Konto und ein veröffentlichbarer Besucher-API-Schlüssel.
  • Die erlaubten Origins des Schlüssels so konfiguriert, dass sie die Seite enthalten, von der aus Sie testen.
  • Eine über HTTP(S) ausgelieferte Seite — file://-Origins können nicht zu einer Zulassungsliste hinzugefügt werden.

1. Den Endpoint aufrufen

Senden Sie die Anfrage mit Ihrem veröffentlichbaren Schlüssel im X-Api-Key-Header. Da der Schlüssel dafür ausgelegt ist, veröffentlichbar zu sein, ist es zu erwarten, ihn im Netzwerk-Tab des Browsers zu sehen — der erlaubte Origin begrenzt seine Verwendung, nicht die Geheimhaltung.

JavaScript

async function loadVisitorLocation() {
  const response = await fetch('https://api.watch-ip.com/v1/geo', {
    headers: { 'X-Api-Key': 'YOUR_PUBLISHABLE_KEY' },
  });

  if (!response.ok) {
    throw new Error(`Visitor geolocation failed (${response.status})`);
  }

  return response.json();
}

2. Einen Ladezustand anzeigen, dann das Ergebnis

Halten Sie Ihre Standard-UI sichtbar, bis die Anfrage abgeschlossen ist, und behandeln Sie jedes Feld als potenziell null. Country, city und timezone sind die Felder, mit denen die meisten Integrationen beginnen.

JavaScript

const statusEl = document.querySelector('#location-status');
statusEl.textContent = 'Region wird ermittelt…';

try {
  const geo = await loadVisitorLocation();
  statusEl.textContent = geo.city && geo.country
    ? `Inhalte werden angezeigt für ${geo.city}, ${geo.country}`
    : 'Standardregion wird verwendet';
} catch {
  statusEl.textContent = 'Standardregion wird verwendet';
}

3. Eine explizite Entscheidung des Besuchers beibehalten

Prüfen Sie auf eine gespeicherte Präferenz, bevor Sie das vorgeschlagene Land oder die vorgeschlagene Währung anwenden, und greifen Sie nur dann auf das API-Ergebnis zurück, wenn noch keine Präferenz existiert.

JavaScript

const preferred = localStorage.getItem('preferredCountry');
const country = preferred ?? geo.country ?? 'US';

Fehler und Grenzfälle

Ein nicht erlaubter Origin schlägt bereits bei der CORS-Prüfung des Browsers fehl, bevor Ihr Code eine Antwort sieht — dies äußert sich meist als generischer Netzwerkfehler, nicht als lesbarer JSON-Text, prüfen Sie daher zuerst die Konfiguration der erlaubten Origins, wenn eine Anfrage stillschweigend fehlschlägt. Ein fehlendes Feld ist kein Fehler: Behandeln Sie einen null-Wert bei country, city oder timezone als „nicht verfügbar“, nicht als Bug.

Nächster Schritt

Sobald die Basisanfrage funktioniert, entscheiden Sie, wie Ihre Anwendung auf das Ergebnis reagieren soll — siehe die Produktseite zur Besucher-Geolokalisierung für das Lokalisierungsmuster und die Referenzseite für jedes Feld, das die Antwort enthalten kann.

Verwandte Seiten