JavaScript ile Ziyaretçi Bilgilerini Detaylı Öğrenelim

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
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

Ş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ı
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ı
Şimdi ise bunu canlı olarak test edelim.