Mostrar campañas por IP en Vue React

Explicación de la API

Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.

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

Casos de uso

Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.

• Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.
• Mostrar campañas geolocalizadas por IP en Vue React
• Explicación de la API
• Recomendaciones SEO y UX

Lógica de implementación

Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.

• Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
• Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.
• Todos los ejemplos siguientes usan directamente https://my.ipin.io/info, con comentarios y textos de interfaz localizados.
• El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.

Ejemplo de código

Todos los ejemplos siguientes usan directamente https://my.ipin.io/info, con comentarios y textos de interfaz localizados.

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "Bienvenido. Este es el contenido predeterminado.", url: "/signup" };
const campaignMap = { TW: { title: "Contenido para visitantes de Taiwán", url: "/tw" }, US: { title: "Contenido para visitantes de Estados Unidos", url: "/us" }, JP: { title: "Contenido para visitantes de Japón", 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: "Bienvenido. Este es el contenido predeterminado.", url: "/signup" };
const campaignMap = { TW: { title: "Contenido para visitantes de Taiwán", url: "/tw" }, US: { title: "Contenido para visitantes de Estados Unidos", url: "/us" }, JP: { title: "Contenido para visitantes de Japón", 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>

Recomendaciones SEO y UX

El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.

Errores comunes

Los siguientes puntos afectan la precisión del artículo, la utilidad del código y la credibilidad de la explicación de la API.

• Los siguientes puntos afectan la precisión del artículo, la utilidad del código y la credibilidad de la explicación de la API.
• El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.
• Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
• Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.

Resumen

Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.

Preguntas frecuentes

Las preguntas siguientes fueron redactadas específicamente para este artículo y se relacionan directamente con la implementación.