Définir un lien A et la redirection d’un bouton selon la localisation IP

2.1 Lien A (avec id) : définir href selon country

Scénario : il n’y a qu’un lien clé sur la page, et tu veux qu’il pointe vers des adresses différentes selon la région. L’exemple ci-dessous montre la logique la plus simple : si c’est TW, utiliser le lien TW ; sinon utiliser le lien par défaut.

<a id="geoLink" href="https://example.com/default">Aller maintenant</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) {
    // En cas d’échec, conserver le href par défaut
  }
})();
</script>

2.2 Liens A (avec class) : définir href en lot selon country

Scénario : plusieurs liens sur la page doivent être routés par région. La méthode la plus simple : leur donner la même class, puis les mettre à jour en une fois. L’exemple reste minimal : TW utilise le lien TW, les autres régions utilisent le lien par défaut.

<a class="geo-link" href="https://example.com/default">Entrée téléchargement</a>
<a class="geo-link" href="https://example.com/default">Entrée achat</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 (avec id) : rediriger après clic selon country

Scénario : un bouton n’est pas un lien en soi, il faut donc lier un événement de clic côté frontend. L’exemple ci-dessous garde uniquement la logique essentielle : d’abord choisir l’URL cible selon country, puis rediriger vers cette URL au clic du bouton.

<button id="geoBtn" type="button">Cliquer pour rediriger</button>

<script>
(async function () {
  let target = "https://example.com/default"; // URL par défaut

  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) {
    // En cas d’échec, utiliser l’URL par défaut
  }

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

2.4 Buttons (avec class) : lier les redirections au clic en lot

Scénario : plusieurs boutons sur la page doivent rediriger selon la région. La méthode la plus simple : une class commune, puis lier l’événement de clic dans une boucle. Remarque : un bouton n’a pas de « href par défaut », il est donc recommandé de préparer une URL par défaut dans le script, afin d’éviter un bouton « sans réaction » quand l’API échoue.

<button class="geo-btn" type="button">Bouton 1</button>
<button class="geo-btn" type="button">Bouton 2</button>

<script>
(async function () {
  let target = "https://example.com/default"; // URL par défaut

  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 Multi-régions (TW, US…) : « définir directement l’URL cible » avec une table de mapping (version la plus courte utilisable)

La règle la plus simple : préparer d’abord une URL par défaut, puis l’écraser via une table de mapping map selon le code pays. S’il y a un mapping, on l’utilise ; sinon, on garde le défaut. Le point clé : une fois target calculé, il faut immédiatement l’appliquer au href d’un lien A ou au gestionnaire de clic d’un bouton.

<a id="geoLink" href="https://example.com/default">Aller maintenant</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; // ✅ Clé : écrire target dans href
  } catch (e) {
    // En cas d’échec, on garde le href par défaut
  }
})();
</script>

<button id="geoBtn" type="button">Cliquer pour aller</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; // ✅ Clé : naviguer avec target au clic
  };
})();
</script>

3.1 WordPress

• Utiliser un plugin “insertion de scripts header/footer” et coller le script dans le Header (global)
• Ou insérer le script avant </head> dans le fichier de thème header.php

3.2 Joomla! / Joomla

• Dans le template courant index.php, trouver <head> et coller le script avant </head>
• Ou utiliser l’entrée “code head personnalisé” fournie par le template (selon le template)

3.3 Magento

• Ajouter le script dans le head global du thème (zone head du theme/layout)
• L’objectif est un affichage global sur tout le site pour maintenir facilement les règles de mapping par région

3.4 Shopify

• Online Store → Themes → Edit code
• Trouver theme.liquid et coller le script avant </head> (global)

3.5 Règle générale

• Tout système permettant d’éditer le <head> global ou le fichier de layout peut mettre en œuvre « définir la destination des liens/boutons selon la région IP » de la même manière
• Conserver une URL par défaut pour que la page reste utilisable si l’API externe échoue