Mostrar campanhas por IP no Vue React

Explicação da API

A chamada no navegador verifica o IP do visitante e retorna o IP, país, região e cidade dele. É adequada para conteúdo regional.

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

Cenários de aplicação

Esses cenários mostram o valor da interface de informações IP e separam claramente IP do servidor e IP do visitante.

• Esses cenários mostram o valor da interface de informações IP e separam claramente IP do servidor e IP do visitante.
• Mostrar campanhas geolocalizadas por IP no Vue React
• Explicação da API
• Recomendações de SEO e UX

Lógica de implementação

Antes de implementar, identifique quem faz a requisição: requisições do servidor retornam IP do servidor, requisições do navegador retornam IP do visitante.

• Antes de implementar, identifique quem faz a requisição: requisições do servidor retornam IP do servidor, requisições do navegador retornam IP do visitante.
• A chamada no navegador verifica o IP do visitante e retorna o IP, país, região e cidade dele. É adequada para conteúdo regional.
• Todos os exemplos abaixo usam diretamente https://my.ipin.io/info, com comentários e textos de interface localizados.
• O conteúdo padrão deve permanecer completo e legível, enquanto o conteúdo regional atua como melhoria. Buscadores rastreiam conteúdo estável e a página continua utilizável se a API falhar.

Exemplo de código

Todos os exemplos abaixo usam diretamente https://my.ipin.io/info, com comentários e textos de interface localizados.

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "Bem-vindo. Este é o conteúdo padrão.", url: "/signup" };
const campaignMap = { TW: { title: "Conteúdo para visitantes de Taiwan", url: "/tw" }, US: { title: "Conteúdo para visitantes dos Estados Unidos", url: "/us" }, JP: { title: "Conteúdo para visitantes do Japão", 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: "Bem-vindo. Este é o conteúdo padrão.", url: "/signup" };
const campaignMap = { TW: { title: "Conteúdo para visitantes de Taiwan", url: "/tw" }, US: { title: "Conteúdo para visitantes dos Estados Unidos", url: "/us" }, JP: { title: "Conteúdo para visitantes do Japão", 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>

Recomendações de SEO e UX

O conteúdo padrão deve permanecer completo e legível, enquanto o conteúdo regional atua como melhoria. Buscadores rastreiam conteúdo estável e a página continua utilizável se a API falhar.

Erros comuns

Os pontos abaixo afetam a precisão do artigo, a usabilidade do código e a credibilidade da explicação da API.

• Os pontos abaixo afetam a precisão do artigo, a usabilidade do código e a credibilidade da explicação da API.
• O conteúdo padrão deve permanecer completo e legível, enquanto o conteúdo regional atua como melhoria. Buscadores rastreiam conteúdo estável e a página continua utilizável se a API falhar.
• Antes de implementar, identifique quem faz a requisição: requisições do servidor retornam IP do servidor, requisições do navegador retornam IP do visitante.
• Esses cenários mostram o valor da interface de informações IP e separam claramente IP do servidor e IP do visitante.

Resumo

A chamada no navegador verifica o IP do visitante e retorna o IP, país, região e cidade dele. É adequada para conteúdo regional.

Perguntas frequentes

As perguntas abaixo foram escritas especificamente para este artigo e estão diretamente ligadas à implementação.