Watch-IP

Meminta lokasi pengunjung dari browser JavaScript

Panduan ini menambahkan panggilan GET /v1/geo yang lengkap ke sebuah halaman web: kondisi loading, hasil yang berhasil, dan fallback untuk saat request gagal atau sebuah field hilang.

Sebelum Anda mulai

  • Akun Watch-IP dan publishable visitor API key.
  • Allowed origins key tersebut sudah dikonfigurasi untuk mencakup halaman yang Anda gunakan untuk menguji.
  • Halaman yang disajikan lewat HTTP(S) — origin file:// tidak bisa ditambahkan ke allow-list.

1. Panggil endpoint

Kirim request dengan publishable key Anda di header X-Api-Key. Karena key ini memang dirancang untuk publishable, munculnya di tab network browser adalah hal yang wajar — origin yang di-allow-list itulah yang membatasi penggunaannya, bukan kerahasiaan.

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. Render kondisi loading, lalu hasilnya

Jaga agar UI default Anda tetap terlihat sampai request selesai, dan perlakukan setiap field sebagai kemungkinan null. Country, city, dan timezone adalah field yang biasanya menjadi awal bagi kebanyakan integrasi.

JavaScript

const statusEl = document.querySelector('#location-status');
statusEl.textContent = 'Mendeteksi wilayah Anda…';

try {
  const geo = await loadVisitorLocation();
  statusEl.textContent = geo.city && geo.country
    ? `Menampilkan konten untuk ${geo.city}, ${geo.country}`
    : 'Menggunakan wilayah default';
} catch {
  statusEl.textContent = 'Menggunakan wilayah default';
}

3. Pertahankan pilihan eksplisit pengunjung

Periksa dulu apakah ada preferensi yang tersimpan sebelum menerapkan country atau currency yang disarankan, dan hanya jatuh kembali ke hasil API saat belum ada preferensi.

JavaScript

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

Error dan kasus khusus

Origin yang tidak diizinkan gagal pada pemeriksaan CORS browser sebelum kode Anda melihat respons apa pun — ini biasanya muncul sebagai error jaringan generik, bukan isi JSON yang bisa dibaca, jadi periksa dulu konfigurasi allowed-origins saat request gagal secara diam-diam. Field yang hilang bukan error: perlakukan nilai country, city, atau timezone yang null sebagai "tidak tersedia", bukan sebagai bug.

Langkah berikutnya

Setelah request dasar berfungsi, tentukan bagaimana aplikasi Anda seharusnya bereaksi terhadap hasilnya — lihat halaman produk geolokasi pengunjung untuk pola lokalisasinya, dan halaman referensi untuk setiap field yang bisa dimuat responsnya.

Halaman terkait