Afficher des campagnes par IP visiteur dans Vue React

Explication de l’API

Un appel côté navigateur vérifie l’IP du visiteur et renvoie son IP, son pays, sa région et sa ville. Ce modèle convient au contenu localisé.

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

Cas d’utilisation

Ces scénarios montrent la valeur de l’interface d’information IP tout en séparant clairement IP serveur et IP visiteur.

• Ces scénarios montrent la valeur de l’interface d’information IP tout en séparant clairement IP serveur et IP visiteur.
• Afficher des campagnes géolocalisées par IP dans Vue React
• Explication de l’API
• Recommandations SEO et UX

Logique d’implémentation

Avant l’implémentation, identifiez le demandeur : une requête serveur renvoie l’IP serveur, une requête navigateur renvoie l’IP visiteur.

• Avant l’implémentation, identifiez le demandeur : une requête serveur renvoie l’IP serveur, une requête navigateur renvoie l’IP visiteur.
• Un appel côté navigateur vérifie l’IP du visiteur et renvoie son IP, son pays, sa région et sa ville. Ce modèle convient au contenu localisé.
• Tous les exemples ci-dessous utilisent directement https://my.ipin.io/info, avec commentaires et textes d’interface localisés.
• Le contenu par défaut doit rester complet et lisible, tandis que le contenu régional sert d’amélioration. Les moteurs indexent un contenu stable et la page reste utilisable si l’API échoue.

Exemple de code

Tous les exemples ci-dessous utilisent directement https://my.ipin.io/info, avec commentaires et textes d’interface localisés.

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "Bienvenue. Ceci est le contenu par défaut.", url: "/signup" };
const campaignMap = { TW: { title: "Contenu pour les visiteurs de Taïwan", url: "/tw" }, US: { title: "Contenu pour les visiteurs des États-Unis", url: "/us" }, JP: { title: "Contenu pour les visiteurs du Japon", 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: "Bienvenue. Ceci est le contenu par défaut.", url: "/signup" };
const campaignMap = { TW: { title: "Contenu pour les visiteurs de Taïwan", url: "/tw" }, US: { title: "Contenu pour les visiteurs des États-Unis", url: "/us" }, JP: { title: "Contenu pour les visiteurs du Japon", 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>

Recommandations SEO et UX

Le contenu par défaut doit rester complet et lisible, tandis que le contenu régional sert d’amélioration. Les moteurs indexent un contenu stable et la page reste utilisable si l’API échoue.

Erreurs fréquentes

Les points suivants influencent la précision de l’article, l’exploitabilité du code et la crédibilité de l’explication de l’API.

• Les points suivants influencent la précision de l’article, l’exploitabilité du code et la crédibilité de l’explication de l’API.
• Le contenu par défaut doit rester complet et lisible, tandis que le contenu régional sert d’amélioration. Les moteurs indexent un contenu stable et la page reste utilisable si l’API échoue.
• Avant l’implémentation, identifiez le demandeur : une requête serveur renvoie l’IP serveur, une requête navigateur renvoie l’IP visiteur.
• Ces scénarios montrent la valeur de l’interface d’information IP tout en séparant clairement IP serveur et IP visiteur.

Résumé

Un appel côté navigateur vérifie l’IP du visiteur et renvoie son IP, son pays, sa région et sa ville. Ce modèle convient au contenu localisé.

FAQ

Cette FAQ est spécifique à cet article et n’est pas répétée dans tous les articles.