Definir link A e redirecionamento de button com base na localização por IP

2.1 Link A（usando id）：definir href de acordo com country

Cenário: há apenas um link principal na página e você quer que ele aponte para destinos diferentes por região. O exemplo abaixo mostra a lógica mais simples: se for TW, usa o link de TW; caso contrário, usa o link padrão.

<a id="geoLink" href="https://example.com/default">Ir agora</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    const a = document.getElementById("geoLink");
    if (a) a.href = target;
  } catch (e) {
    // Se falhar, mantém o href padrão
  }
})();
</script>

2.2 Link A（usando class）：definir href em lote de acordo com country

Cenário: há vários links na página que precisam de roteamento por região. O jeito mais simples é: dar a mesma class e atualizar todos juntos. O exemplo segue minimalista: TW usa o link de TW; as demais regiões usam o link padrão.

<a class="geo-link" href="https://example.com/default">Entrada de download</a>
<a class="geo-link" href="https://example.com/default">Entrada de compra</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    document.querySelectorAll(".geo-link").forEach(function (el) {
      el.href = target;
    });
  } catch (e) {}
})();
</script>

2.3 Button（usando id）：no clique, navegar de acordo com country

Cenário: botão não é link por si só, então você precisa vincular um evento de clique no frontend. O exemplo abaixo mantém apenas a lógica essencial: primeiro escolhe a URL de destino conforme country, depois no clique do botão navega para essa URL.

<button id="geoBtn" type="button">Clique para ir</button>

<script>
(async function () {
  let target = "https://example.com/default"; // URL padrão

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {
    // Se falhar, usa a URL padrão
  }

  const btn = document.getElementById("geoBtn");
  if (btn) btn.onclick = function () { window.location.href = target; };
})();
</script>

2.4 Button（usando class）：vincular navegação no clique em lote

Cenário: há vários botões na página e todos precisam navegar por região. O jeito mais simples: usar uma class comum e fazer um loop para vincular o clique. Atenção: botão não tem “href padrão”, então é recomendado preparar uma URL padrão no script para evitar que, quando a API falhar, o botão “não responda”.

<button class="geo-btn" type="button">Botão 1</button>
<button class="geo-btn" type="button">Botão 2</button>

<script>
(async function () {
  let target = "https://example.com/default"; // URL padrão

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {}

  document.querySelectorAll(".geo-btn").forEach(function (btn) {
    btn.onclick = function () { window.location.href = target; };
  });
})();
</script>

2.5.1 Para link A（id）：definir href diretamente

<a id="geoLink" href="https://example.com/default">Ir agora</a>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = map[info.country] || defaultUrl;

    document.getElementById("geoLink").href = target; // ✅ Chave: escrever target no href
  } catch (e) {
    // Se falhar, manter o href padrão
  }
})();
</script>

2.5.2 Para button（id）：ao clicar, navegar para target

<button id="geoBtn" type="button">Clique para ir</button>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };
  let target = defaultUrl;

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    target = map[info.country] || defaultUrl;
  } catch (e) {}

  document.getElementById("geoBtn").onclick = function () {
    window.location.href = target; // ✅ Chave: navegar com target no clique
  };
})();
</script>

3.1 WordPress

• Usar um plugin de “inserir scripts no header/footer” e colar o script no Header（vale para o site todo）
• Ou inserir antes de </head> no arquivo do tema header.php

3.2 Joomla! / Joomla

• No template atual, encontrar <head> em index.php e colar o script antes de </head>
• Ou usar a opção do template de “código head personalizado” (varia conforme o template)

3.3 Magento

• Adicionar o script no head global do tema（área head em theme/layout）
• Objetivo: saída unificada no site todo para facilitar a manutenção das regras de mapeamento por região

3.4 Shopify

• Online Store → Themes → Edit code
• Encontrar theme.liquid e colar o script antes de </head>（vale para o site todo）

3.5 Regra geral

• Qualquer sistema que permita editar o <head> global ou o arquivo de layout pode implementar “definir destino de links/botões por região IP” da mesma forma
• Recomenda-se manter uma URL padrão para que continue funcionando quando a API externa falhar