Basierend auf dem IP-Standort A-Link setzen, Button-Weiterleitung

2.1 A-Link (mit id): href anhand von country setzen

Szenario: Auf der Seite gibt es nur einen wichtigen Link, und du möchtest, dass er je nach Region auf unterschiedliche Ziele zeigt. Das folgende Beispiel demonstriert nur die einfachste Logik: Wenn TW, dann den TW-Link verwenden, sonst den Standard-Link.

<a id="geoLink" href="https://example.com/default">Jetzt öffnen</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) {
    // Bei Fehler den Standard-href beibehalten
  }
})();
</script>

2.2 A-Links (mit class): href gesammelt anhand von country setzen

Szenario: Auf der Seite gibt es mehrere Links, die Geo-Routing benötigen. Die einfachste Methode ist: allen dieselbe class geben und dann gemeinsam aktualisieren. Das Beispiel bleibt minimal: TW nutzt den TW-Link, andere Regionen nutzen den Standard-Link.

<a class="geo-link" href="https://example.com/default">Download-Einstieg</a>
<a class="geo-link" href="https://example.com/default">Kauf-Einstieg</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 (mit id): nach Klick anhand von country weiterleiten

Szenario: Ein Button ist nicht selbst ein Link, daher musst du im Frontend ein Click-Event binden. Das folgende Beispiel behält ebenfalls nur die Kernlogik: Zuerst wird anhand von country die Ziel-URL gewählt, und beim Button-Klick wird zu dieser URL weitergeleitet.

<button id="geoBtn" type="button">Klicken zum Weiterleiten</button>

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

  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) {
    // Bei Fehler die Standardadresse verwenden
  }

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

2.4 Buttons (mit class): Klick-Weiterleitung gesammelt binden

Szenario: Auf der Seite gibt es mehrere Buttons, die je Region weiterleiten sollen. Die einfachste Lösung: eine gemeinsame class und dann im Loop die Click-Events binden. Hinweis: Buttons haben kein „Standard-href“, daher empfiehlt es sich, im Skript zuerst eine Standard-URL vorzubereiten, damit bei API-Fehlern der Button nicht „ohne Reaktion“ bleibt.

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

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

  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 Mehrere Regionen (TW, US…): Ziel-URL per Mapping-Tabelle „direkt setzen“ (kürzeste brauchbare Version)

Die einfachste Regel: zuerst eine Standard-URL festlegen, dann per Mapping-Tabelle map anhand des Ländercodes überschreiben. Gibt es ein Mapping, wird es genutzt; sonst die Standard-URL. Der entscheidende Punkt: nachdem target berechnet ist, muss es sofort auf das href eines A-Links oder auf den Click-Handler eines Buttons angewendet werden.

<a id="geoLink" href="https://example.com/default">Jetzt öffnen</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; // ✅ Wichtig: target in href schreiben
  } catch (e) {
    // Bei Fehler: Standard-href beibehalten
  }
})();
</script>

<button id="geoBtn" type="button">Klicken zum Öffnen</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; // ✅ Wichtig: beim Klick mit target navigieren
  };
})();
</script>

3.1 WordPress

• Mit einem Plugin zum „Einfügen von Header/Footer-Skripten“ das Skript in den Header einfügen (siteweit)
• Oder das Skript in der Theme-Datei header.php vor </head> einfügen

3.2 Joomla! / Joomla

• In der aktuellen Template-Datei index.php das <head> finden und das Skript vor </head> einfügen
• Oder einen Template-Optionseintrag für „Custom Head Code“ nutzen (je nach Template unterschiedlich)

3.3 Magento

• Das Skript in den globalen Head des Themes einfügen (Head-Bereich in Theme/Layout)
• Ziel ist eine siteweite Ausgabe, damit du Regions-Mapping-Regeln zentral pflegen kannst

3.4 Shopify

• Online Store → Themes → Edit code
• theme.liquid finden und das Skript vor </head> einfügen (siteweit)

3.5 Allgemeine Regel

• Jedes System, das das Bearbeiten des globalen <head> oder der Layout-Datei erlaubt, kann „Ziele für Links/Buttons nach IP-Region setzen“ auf die gleiche Weise umsetzen
• Eine Standard-URL beibehalten, damit die Seite bei Ausfall der externen API weiterhin nutzbar bleibt