JavaScript ile Ziyaretçi Bilgilerini Detaylı Öğrenelim

Sitemizi ziyaret eden kullanıcıya ait elde edebileceğimiz çeşitli bilgileri öğrenmek için güzel bir makale ile sizlerleyiz

Bildiğiniz üzere ziyareçiler web sitelerini ziyaret ettiklerinde kullandıkları tarayıcı çeşitli bilgiler barındırır. Böylece o kullanıcıya ait sınırlı bilgileri site sahipleri öğrenmiş olur. Bunun bir örneği olarak Google Analytics ve Yandex Metrika'yı örnek verebiliriz. Tabi o sistemlerinde benzer şekilde kendine has özellikleri de var. Biz onlar kadar gelişmiş olmasa da güzel bir şekilde kullanıcıdan aldığımız bilgileri değerlendirip kullanıcı profili hakkında iyice fikir edinebiliriz.
Kodlarımıza geçelim.
Kullanıcının cihaz bilgisini öğrenmek için kullanıcıdan alacağımız tarayıcı bilgisini veritabani.json dosyası içerisindeki "cihazlar" adlı düğüm sayesinde arayıp bulmaya çalışacağız.
Cihaz Bilgileri
JavaScript ile Ziyaretçi Bilgilerini Detaylı Öğrenelim

Kullanıcının işletim sistemi bilgisini öğrenmek için kullanıcıdan alacağımız tarayıcı bilgisini veritabani.json dosyası içerisindeki "isletim_sistemleri" adlı düğüm sayesinde arayıp bulmaya çalışacağız.
İşletim Sistemleri Bilgileri
JavaScript ile Ziyaretçi Bilgilerini Detaylı Öğrenelim

Şimdi ise bu json dosyasını JavaScript ile okuyalım.
Fonksiyondaki Bilgiler
async function fnAjax() {
    var arrSonuc = [];
    var marka = "Marka Bulunamadı";
    var model = "Model Bulunamadı";
    var isletim_sistemi = "İşletim Sistemi Bulunamadı";
    var referans = document.referrer;
    var tarayici_bilgileri = navigator.userAgent;
    await fetch("veritabani.json").then(cikti => cikti.json()).then((jsonDegerler) => {
        var cihazlarDugum = jsonDegerler.cihazlar;
        for (i = 0; i < cihazlarDugum.length; i++) {
            var strAnahtar_Kelime = cihazlarDugum[i].anahtar_kelime;
            if (tarayici_bilgileri.indexOf(strAnahtar_Kelime) > -1) {
                marka = cihazlarDugum[i].marka;
                model  = cihazlarDugum[i].model;
                break;
            }
        }
        var isletimsistemiDugum = jsonDegerler.isletim_sistemleri;
        for (let i = 0; i < isletimsistemiDugum.length; i++) {
            var strAnahtar_Kelime = isletimsistemiDugum[i].anahtar_kelime;
            if (tarayici_bilgileri.indexOf(strAnahtar_Kelime) > -1) {
                isletim_sistemi = isletimsistemiDugum[i].isletim_sistemi;
                break;
            }
        }
    }).catch(hata => 
    { 
        alert("JSON dosyası yüklenirken bir hata oluştu!\nHata detayları:\n" + hata);
    });
    arrSonuc[0] = marka;
    arrSonuc[1] = model;
    arrSonuc[2] = isletim_sistemi;
    arrSonuc[3] = referans;
    arrSonuc[4] = tarayici_bilgileri;
    return arrSonuc;
}

Okumuş olduğumuz bu JSON dosyasından alınan bilgiler fnAjax adlı fonksiyonu bir array (dizi) olarak aktarılmıştır. Bu dizinin içerisinde neler olduğunu görmek için aşağıdaki kod ile fonksiyonu çağırıp değerleri okuyalım.
Fonksiyondaki Bilgileri Okuyalım
fnAjax();

Metodumuzu çağırdık sıra geldi tarayıcı konsolunda neler elde ettiğimize bakmaya.
Değerlerin Konsol Çıktısı
JavaScript ile Ziyaretçi Bilgilerini Detaylı Öğrenelim

Görüldüğü gibi dizi olarak ve Promise niteliğine sahip olarak konsol ekranında veriler ortaya çıktı. Bu promise tipindeki geridönüş metodlarından veri almaya çalışalım.
Promise Çıktısı Elde Etmek
var ajaxsonuc = fnAjax();
var veri = Promise.resolve(ajaxsonuc);
veri.then(function(deger) {
    alert("- Marka: " + deger[0] + "\n- Model: " + deger[1] + "\n- İşletim Sistemi: " + deger[2] + "\n- Referans: " + deger[3] + "\n- Tarayıcı Bilgileri: " + deger[4]);
});

Sonuç olarak yaptığım testin ekran görüntüsünü sizlerle paylaşayım.
Değerlerin Konsol Çıktısı
JavaScript ile Ziyaretçi Bilgilerini Detaylı Öğrenelim

Şimdi ise bunu canlı olarak test edelim.
Örnek

Yorumlar

  • Gürkan

    Gürkan:

    2 ay önce

    Çok teşekkürler baya yararlı oldu bu. Süpersiniz.
    7 cevapla

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

INSTAGRAM VIDEO İNDİR

Instagram Video İndirme Aracı

EN

  • Popüler
  • Yeni
  • Son Yorum