Vue Reactで訪問者IP別の地域キャンペーンを表示する方法

APIの説明

ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

利用シーン

これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。

• これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。
• Vue Reactで訪問者IP別の地域キャンペーンを表示する方法
• APIの説明
• SEOとUXの推奨事項

実装ロジック

実装前にリクエスト元を確認します。サーバーリクエストはサーバーIP、ブラウザリクエストは訪問者IPを返します。

• 実装前にリクエスト元を確認します。サーバーリクエストはサーバーIP、ブラウザリクエストは訪問者IPを返します。
• ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。
• 以下の例はすべて https://my.ipin.io/info を直接使用し、コメントと画面文言も現地語化しています。
• デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。

コード例

以下の例はすべて https://my.ipin.io/info を直接使用し、コメントと画面文言も現地語化しています。

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "ようこそ。これはデフォルトのコンテンツです。", url: "/signup" };
const campaignMap = { TW: { title: "台湾訪問者向けコンテンツ", url: "/tw" }, US: { title: "米国訪問者向けコンテンツ", url: "/us" }, JP: { title: "日本訪問者向けコンテンツ", url: "/jp" } };
export default function GeoCampaign() {
  const [campaign, setCampaign] = useState(defaultCampaign);
  useEffect(() => {
    let cancelled = false;
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { if (!cancelled) setCampaign(campaignMap[info.country] || defaultCampaign); })
      .catch(() => { if (!cancelled) setCampaign(defaultCampaign); });
    return () => { cancelled = true; };
  }, []);
  return <a href={campaign.url}>{campaign.title}</a>;
}

Vue

<template>
  <a :href="campaign.url">{{ campaign.title }}</a>
</template>
<script>
const defaultCampaign = { title: "ようこそ。これはデフォルトのコンテンツです。", url: "/signup" };
const campaignMap = { TW: { title: "台湾訪問者向けコンテンツ", url: "/tw" }, US: { title: "米国訪問者向けコンテンツ", url: "/us" }, JP: { title: "日本訪問者向けコンテンツ", url: "/jp" } };
export default {
  data() { return { campaign: defaultCampaign }; },
  mounted() {
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { this.campaign = campaignMap[info.country] || defaultCampaign; })
      .catch(() => { this.campaign = defaultCampaign; });
  }
};
</script>

SEOとUXの推奨事項

デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。

よくあるミス

以下の問題は、記事の正確性、コードの実用性、API説明の信頼性に影響します。

• 以下の問題は、記事の正確性、コードの実用性、API説明の信頼性に影響します。
• デフォルト内容は完全で読みやすく保ち、地域別内容は拡張として扱います。検索エンジンは安定した内容を取得でき、API失敗時もページは利用できます。
• 実装前にリクエスト元を確認します。サーバーリクエストはサーバーIP、ブラウザリクエストは訪問者IPを返します。
• これらの利用シーンはIP情報インターフェースの価値を示し、サーバーIPと訪問者IPを明確に区別します。

まとめ

ブラウザ側呼び出しは訪問者IPを確認し、訪問者のIP、国、地域、都市を返します。地域別表示に適しています。

よくある質問

以下の質問はこの記事専用に整理しており、実装内容と直接関係しています。