Watch-IP

Tarayıcı JavaScript'inden ziyaretçi konumu isteme

Bu kılavuz, bir web sayfasına eksiksiz bir GET /v1/geo çağrısı ekler: bir yükleme durumu, başarılı bir sonuç ve isteğin başarısız olması ya da bir alanın eksik olması durumunda kullanılacak bir yedek.

Başlamadan önce

  • Bir Watch-IP hesabı ve yayınlanabilir bir ziyaretçi API anahtarı.
  • Anahtarın izin verilen origin'lerinin, test ettiğiniz sayfayı da içerecek şekilde yapılandırılmış olması.
  • HTTP(S) üzerinden sunulan bir sayfa — file:// origin'leri izin listesine eklenemez.

1. Endpoint'i çağırın

İsteği, yayınlanabilir anahtarınızı X-Api-Key başlığında göndererek yapın. Anahtar yayınlanabilir olacak şekilde tasarlandığından, tarayıcının ağ (network) sekmesinde görünmesi beklenen bir durumdur — kullanımını sınırlayan şey gizlilik değil, izin listesindeki origin'dir.

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. Bir yükleme durumu, ardından sonucu render edin

İstek sonuçlanana kadar varsayılan arayüzünüzü görünür tutun ve her alanı olası bir şekilde null kabul edin. country, city ve timezone, çoğu entegrasyonun başlangıçta kullandığı alanlardır.

JavaScript

const statusEl = document.querySelector('#location-status');
statusEl.textContent = 'Bölgeniz belirleniyor…';

try {
  const geo = await loadVisitorLocation();
  statusEl.textContent = geo.city && geo.country
    ? `${geo.city}, ${geo.country} için içerik gösteriliyor`
    : 'Varsayılan bölge kullanılıyor';
} catch {
  statusEl.textContent = 'Varsayılan bölge kullanılıyor';
}

3. Ziyaretçinin açık tercihini koruyun

Önerilen country veya currency'yi uygulamadan önce kayıtlı bir tercih olup olmadığını kontrol edin ve yalnızca henüz bir tercih yokken API sonucuna geri dönün.

JavaScript

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

Hatalar ve uç durumlar

İzin verilmeyen bir origin, kodunuz bir yanıt görmeden önce tarayıcının CORS kontrolünde başarısız olur — bu genellikle okunabilir bir JSON gövdesi değil, genel bir ağ hatası olarak ortaya çıkar; bu yüzden bir istek sessizce başarısız olduğunda önce izin verilen origin yapılandırmasını kontrol edin. Eksik bir alan hata değildir: null bir country, city veya timezone değerini bir hata olarak değil, 'kullanılamıyor' olarak değerlendirin.

Sonraki adım

Temel istek çalıştıktan sonra, uygulamanızın sonuca nasıl tepki vermesi gerektiğine karar verin — yerelleştirme deseni için ziyaretçi konum belirleme ürün sayfasına, yanıtın içerebileceği her alan için ise referans sayfasına bakın.

İlgili sayfalar