Configurar un enlace A y la redirección de un botón según la ubicación por IP

2.1 Enlace A (usando id): establecer href según country

Escenario: solo hay un enlace clave en la página y quieres que apunte a diferentes destinos según la región. El ejemplo de abajo muestra la lógica más simple: si es TW, usa el enlace de TW; si no, usa el enlace por defecto.

<a id="geoLink" href="https://example.com/default">Ir ahora</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) {
    // Si falla, mantener el href por defecto
  }
})();
</script>

2.2 Enlaces A (usando class): establecer href en lote según country

Escenario: hay varios enlaces en la página que necesitan geo-routing. La forma más simple es: darles la misma class y actualizarlos juntos. El ejemplo sigue siendo minimalista: TW usa el enlace de TW; otras regiones usan el enlace por defecto.

<a class="geo-link" href="https://example.com/default">Entrada de descarga</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): redirigir al hacer clic según country

Escenario: un botón no es un enlace por sí mismo, así que necesitas vincular un evento de clic en el frontend. El ejemplo de abajo mantiene solo la lógica esencial: primero elige la URL objetivo según country, y luego redirige a esa URL cuando se hace clic en el botón.

<button id="geoBtn" type="button">Clic para redirigir</button>

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

  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) {
    // Si falla, usar la URL por defecto
  }

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

2.4 Buttons (usando class): vincular redirecciones en lote

Escenario: hay varios botones en la página que deben redirigir por región. La forma más simple: una class común y luego vincular los eventos de clic en un bucle. Nota: los botones no tienen “href por defecto”, así que se recomienda preparar primero una URL por defecto en el script para evitar que el botón “no responda” cuando la API falle.

<button class="geo-btn" type="button">Botón 1</button>
<button class="geo-btn" type="button">Botón 2</button>

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

  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 enlace A (id): establecer href directamente

<a id="geoLink" href="https://example.com/default">Ir ahora</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; // ✅ Clave: escribir target en href
  } catch (e) {
    // Si falla, mantener el href por defecto
  }
})();
</script>

2.5.2 Para botón (id): navegar a target al hacer clic

<button id="geoBtn" type="button">Hacer clic 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; // ✅ Clave: navegar con target al hacer clic
  };
})();
</script>

3.1 WordPress

• Usar un plugin de “insertar scripts en header/footer” y pegar el script en el Header (global)
• O insertar el script antes de </head> en el archivo del tema header.php

3.2 Joomla! / Joomla

• En el template actual index.php, encontrar <head> y pegar el script antes de </head>
• O usar la opción de “código head personalizado” del template (varía según el template)

3.3 Magento

• Agregar el script al head global del tema (área head de theme/layout)
• El objetivo es que se renderice en todo el sitio para poder mantener fácilmente las reglas de mapeo por región

3.4 Shopify

• Online Store → Themes → Edit code
• Encontrar theme.liquid y pegar el script antes de </head> (global)

3.5 Regla general

• Cualquier sistema que permita editar el <head> global o el archivo de layout puede implementar “definir el destino de enlaces/botones según la región IP” de la misma manera
• Mantener una URL por defecto para que la página siga siendo utilizable cuando falle la API externa