Show Geo Campaign Modules by Visitor IP in Vue React

API explanation

A browser-side call checks the visitor IP and returns the visitor IP, country, region, and city. It is suitable for localized content display.

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

Use cases

These scenarios show the value of the IP information interface while clearly separating server IP from visitor IP.

• These scenarios show the value of the IP information interface while clearly separating server IP from visitor IP.
• Show Geo Campaign Modules by Visitor IP in Vue React
• API explanation
• SEO and UX recommendations

Implementation logic

Before implementation, identify the requester: server requests return server IP, while browser requests return visitor IP.

• Before implementation, identify the requester: server requests return server IP, while browser requests return visitor IP.
• A browser-side call checks the visitor IP and returns the visitor IP, country, region, and city. It is suitable for localized content display.
• All examples below use https://my.ipin.io/info directly, with localized comments and interface text.
• Default content should remain complete and readable, while regional content acts as an enhancement. Search engines can crawl stable content, and the page remains usable if the API fails.

Code example

All examples below use https://my.ipin.io/info directly, with localized comments and interface text.

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "Welcome. This is the default content.", url: "/signup" };
const campaignMap = { TW: { title: "Content for Taiwan visitors", url: "/tw" }, US: { title: "Content for United States visitors", url: "/us" }, JP: { title: "Content for Japan visitors", 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: "Welcome. This is the default content.", url: "/signup" };
const campaignMap = { TW: { title: "Content for Taiwan visitors", url: "/tw" }, US: { title: "Content for United States visitors", url: "/us" }, JP: { title: "Content for Japan visitors", 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 and UX recommendations

Default content should remain complete and readable, while regional content acts as an enhancement. Search engines can crawl stable content, and the page remains usable if the API fails.

Common mistakes

The following issues affect article accuracy, code usability, and the credibility of the API explanation.

• The following issues affect article accuracy, code usability, and the credibility of the API explanation.
• Default content should remain complete and readable, while regional content acts as an enhancement. Search engines can crawl stable content, and the page remains usable if the API fails.
• Before implementation, identify the requester: server requests return server IP, while browser requests return visitor IP.
• These scenarios show the value of the IP information interface while clearly separating server IP from visitor IP.

Summary

A browser-side call checks the visitor IP and returns the visitor IP, country, region, and city. It is suitable for localized content display.

FAQ

The questions below are written specifically for this article and are directly related to the implementation.