Watch-IP

Demander la position du visiteur depuis JavaScript navigateur

Ce guide ajoute un appel GET /v1/geo complet à une page web : un état de chargement, un résultat réussi, et un repli pour le cas où la requête échoue ou où un champ est manquant.

Avant de commencer

  • Un compte Watch-IP et une clé API visiteur publiable.
  • Les origines autorisées de la clé configurées pour inclure la page depuis laquelle vous testez.
  • Une page servie en HTTP(S) — les origines file:// ne peuvent pas être ajoutées à une liste d'autorisation.

1. Appeler le point de terminaison

Envoyez la requête avec votre clé publiable dans l'en-tête X-Api-Key. Comme la clé est conçue pour être publiable, la voir dans l'onglet réseau du navigateur est normal — c'est l'origine autorisée qui limite son usage, pas le secret.

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. Afficher un état de chargement, puis le résultat

Gardez votre interface par défaut visible jusqu'à ce que la requête aboutisse, et traitez chaque champ comme potentiellement null. Country, city et timezone sont les champs par lesquels la plupart des intégrations commencent.

JavaScript

const statusEl = document.querySelector('#location-status');
statusEl.textContent = 'Détection de votre région…';

try {
  const geo = await loadVisitorLocation();
  statusEl.textContent = geo.city && geo.country
    ? `Affichage du contenu pour ${geo.city}, ${geo.country}`
    : 'Utilisation de la région par défaut';
} catch {
  statusEl.textContent = 'Utilisation de la région par défaut';
}

3. Conserver un choix explicite du visiteur

Vérifiez l'existence d'une préférence enregistrée avant d'appliquer le pays ou la devise suggérés, et ne vous rabattez sur le résultat de l'API que si aucune préférence n'existe encore.

JavaScript

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

Erreurs et cas limites

Une origine non autorisée échoue au contrôle CORS du navigateur avant que votre code ne voie une réponse — cela se manifeste généralement par une erreur réseau générique, pas un corps JSON lisible, donc vérifiez d'abord la configuration des origines autorisées lorsqu'une requête échoue silencieusement. Un champ manquant n'est pas une erreur : traitez une valeur country, city ou timezone à null comme « indisponible », pas comme un bug.

Étape suivante

Une fois la requête de base fonctionnelle, décidez comment votre application doit réagir au résultat — voir la page produit de géolocalisation du visiteur pour le modèle de localisation, et la page de référence pour chaque champ que la réponse peut contenir.

Pages associées