Ziyaretçi IP Adresi, Şehir ve Tarayıcı Bilgisini HTML ile Gösterme (Temaya Uyumlu)

 

Web sitenize gelen ziyaretçilerin IP adresi, bulunduğu şehir, ülke ve tarayıcı bilgilerini sade ve temaya uyumlu bir şekilde göstermek istiyorsanız, bu yazıda sizin için çalışan bir HTML & JavaScript çözümünü paylaşıyorum.

Aşağıdaki kod parçası sayesinde ziyaretçinizin konum bilgilerini ipapi.co üzerinden alabilir, tarayıcı bilgilerini de navigator.userAgent ile görüntüleyebilirsiniz. Üstelik ek bir tasarım eklemeye gerek kalmaz, tamamen mevcut temanıza uyumlu şekilde çalışır.

<div id="ziyaretci-bilgi">

  <p><strong>IP Adresi:</strong> <span id="ip">Yükleniyor...</span></p>

  <p><strong>Şehir:</strong> <span id="sehir">Yükleniyor...</span></p>

  <p><strong>Bölge:</strong> <span id="bolge">Yükleniyor...</span></p>

  <p><strong>Ülke:</strong> <span id="ulke">Yükleniyor...</span></p>

  <p><strong>Tarayıcı:</strong> <span id="tarayici">Yükleniyor...</span></p>

</div>

<script>

  async function ziyaretciBilgisiGetir() {

    try {

      const yanit = await fetch('https://ipapi.co/json/');

      const bilgi = await yanit.json();

      document.getElementById('ip').textContent = bilgi.ip || '-';

      document.getElementById('sehir').textContent = bilgi.city || '-';

      document.getElementById('bolge').textContent = bilgi.region || '-';

      document.getElementById('ulke').textContent = bilgi.country_name || '-';

      document.getElementById('tarayici').textContent = navigator.userAgent;

    } catch (hata) {

      document.getElementById('ziyaretci-bilgi').innerHTML = '<p style="color: red;">Ziyaretçi bilgileri alınamadı.</p>';

    }

  }

  ziyaretciBilgisiGetir();

</script>