Watch-IP

Bezoekerslocatie opvragen vanuit browser-JavaScript

Deze handleiding voegt een volledige GET /v1/geo-aanroep toe aan een webpagina: een laadtoestand, een geslaagd resultaat en een terugvaloptie voor wanneer het verzoek mislukt of een veld ontbreekt.

Voordat je begint

  • Een Watch-IP-account en een publiceerbare API-sleutel voor bezoekers.
  • De toegestane origins van de sleutel ingesteld zodat de pagina waarmee je test erbij zit.
  • Een pagina die via HTTP(S) wordt geserveerd — file://-origins kunnen niet aan een lijst met toegestane origins worden toegevoegd.

1. Het endpoint aanroepen

Stuur het verzoek met je publiceerbare sleutel in de X-Api-Key-header. Omdat de sleutel bedoeld is om publiceerbaar te zijn, is het verwacht dat je hem in het netwerktabblad van de browser ziet — de origin op de toegestane lijst is wat het gebruik beperkt, niet geheimhouding.

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. Een laadtoestand renderen, en dan het resultaat

Houd je standaard-UI zichtbaar totdat het verzoek is afgerond, en behandel elk veld als mogelijk null. Land, stad en tijdzone zijn de velden waarmee de meeste integraties beginnen.

JavaScript

const statusEl = document.querySelector('#location-status');
statusEl.textContent = 'Regio detecteren…';

try {
  const geo = await loadVisitorLocation();
  statusEl.textContent = geo.city && geo.country
    ? `Inhoud tonen voor ${geo.city}, ${geo.country}`
    : 'Standaardregio gebruiken';
} catch {
  statusEl.textContent = 'Standaardregio gebruiken';
}

3. Een expliciete keuze van de bezoeker bewaren

Controleer op een opgeslagen voorkeur voordat je het voorgestelde land of de voorgestelde valuta toepast, en val alleen terug op het API-resultaat wanneer er nog geen voorkeur bestaat.

JavaScript

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

Foutmeldingen en randgevallen

Een niet-toegestane origin faalt bij de CORS-controle van de browser voordat je code een antwoord te zien krijgt — dit uit zich meestal als een generieke netwerkfout, niet als een leesbare JSON-inhoud, dus controleer eerst de configuratie van de toegestane origins wanneer een verzoek stilletjes mislukt. Een ontbrekend veld is geen fout: behandel een null-waarde voor land, stad of tijdzone als 'niet beschikbaar', niet als een bug.

Volgende stap

Zodra het basisverzoek werkt, bepaal je hoe je applicatie op het resultaat moet reageren — zie de productpagina voor bezoekerslocatie voor het lokalisatiepatroon, en de referentiepagina voor elk veld dat het antwoord kan bevatten.

Gerelateerde pagina's