Watch-IP

Solicitar la ubicación del visitante desde JavaScript en el navegador

Esta guía añade una llamada completa a GET /v1/geo en una página web: un estado de carga, un resultado exitoso y una alternativa para cuando la solicitud falla o falta un campo.

Antes de empezar

  • Una cuenta de Watch-IP y una clave de API de visitante publicable.
  • Los orígenes permitidos de la clave configurados para incluir la página desde la que estás probando.
  • Una página servida por HTTP(S); los orígenes file:// no se pueden añadir a una lista de permitidos.

1. Llama al endpoint

Envía la solicitud con tu clave publicable en el encabezado X-Api-Key. Como la clave está diseñada para ser publicable, es normal verla en la pestaña de red del navegador: lo que limita su uso es el origen permitido, no el secreto.

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. Renderiza un estado de carga y luego el resultado

Mantén visible tu interfaz predeterminada hasta que la solicitud se resuelva, y trata cada campo como potencialmente nulo. Country, city y timezone son los campos con los que la mayoría de las integraciones empieza.

JavaScript

const statusEl = document.querySelector('#location-status');
statusEl.textContent = 'Detectando tu región…';

try {
  const geo = await loadVisitorLocation();
  statusEl.textContent = geo.city && geo.country
    ? `Mostrando contenido para ${geo.city}, ${geo.country}`
    : 'Usando la región predeterminada';
} catch {
  statusEl.textContent = 'Usando la región predeterminada';
}

3. Preserva una elección explícita del visitante

Comprueba si existe una preferencia almacenada antes de aplicar el país o la moneda sugeridos, y recurre al resultado de la API solo cuando todavía no exista ninguna preferencia.

JavaScript

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

Errores y casos límite

Un origen no permitido hace que la verificación CORS del navegador falle antes de que tu código vea una respuesta; esto normalmente aparece como un error de red genérico, no como un cuerpo JSON legible, así que revisa primero la configuración de orígenes permitidos cuando una solicitud falla silenciosamente. Un campo faltante no es un error: trata un valor nulo de country, city o timezone como 'no disponible', no como un error.

Siguiente paso

Una vez que la solicitud básica funcione, decide cómo debe reaccionar tu aplicación ante el resultado: consulta la página del producto de geolocalización de IP de visitantes para el patrón de localización, y la página de referencia para conocer todos los campos que puede contener la respuesta.

Páginas relacionadas