ブラウザのJavaScriptから訪問者の位置情報を取得する

始める前に

• Watch-IPアカウントと公開可能な訪問者用APIキー。
• テスト対象のページを含むように設定されたキーの許可オリジン。
• HTTP(S)で配信されるページ—file://オリジンは許可リストに追加できません。

1. エンドポイントを呼び出す

公開可能キーをX-Api-Keyヘッダーに設定してリクエストを送信します。このキーは公開可能であることを前提に設計されているため、ブラウザのネットワークタブに表示されるのは想定内です—用途を制限しているのは秘匿性ではなく、許可リストに登録されたオリジンです。

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. 読み込み中の表示、続いて結果を描画する

リクエストが解決するまではデフォルトのUIを表示したままにし、すべてのフィールドはnullになりうるものとして扱ってください。country、city、timezoneは多くの統合が最初に利用するフィールドです。

const statusEl = document.querySelector('#location-status');
statusEl.textContent = '地域を検出しています…';

try {
  const geo = await loadVisitorLocation();
  statusEl.textContent = geo.city && geo.country
    ? `${geo.city}、${geo.country}向けのコンテンツを表示しています`
    : 'デフォルトの地域を使用しています';
} catch {
  statusEl.textContent = 'デフォルトの地域を使用しています';
}

3. 訪問者の明示的な選択を優先する

提案された国や通貨を適用する前に保存済みの設定がないか確認し、まだ設定が存在しない場合にのみAPIの結果にフォールバックしてください。

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

エラーとエッジケース

許可されていないオリジンは、コードがレスポンスを目にする前にブラウザのCORSチェックで失敗します—これは通常、読み取り可能なJSON本文ではなく一般的なネットワークエラーとして現れるため、リクエストが無言で失敗する場合はまず許可オリジンの設定を確認してください。フィールドの欠落はエラーではありません:country、city、timezoneがnullの場合は「利用不可」として扱い、バグとはみなさないでください。

次のステップ

基本的なリクエストが動作したら、結果に対してアプリケーションがどう反応すべきかを決めましょう—ローカライズのパターンについては訪問者ジオロケーションの製品ページを、レスポンスに含まれうるすべてのフィールドについてはリファレンスページをご覧ください。