Eskiden beğendiğimiz şekilde internet siteleri üretiyor ve diğer insanlarında internet sitelerini beğenmesini umuyorduk. Neyse ki o günler geride kaldı. Artık tasarımın nasıl olacağına A/B testleri, ürünlerin hangi sırayla sunulacağına çeşitli kullanıcı hareketleri ve ürün açıklamalarının nasıl yazılacağına arama motorları karar veriyor.
İnsan bunu içinde derinlerde bir yerlerde her zaman biliyor ama ilk kez uyguladığı zaman aldığı sonuçları gördüğü zaman daha önce neden yapmadım diye soruyor kendine.
Çoğumuz internet sitemizde olup bitenleri ve dönüşümleri takip etmek için Google Analytics ve Yandex Metrica kullanıyoruz. Ancak Google Analytics 4 sürümü API henüz tamamlanmış değil. Ve bazen bu basit bilgileri kendi backend’imizde kayıt altına almak işleri oldukça hızlandırabiliyor. Bu yüzden internet sitemizde kullanıcıların yaptığı şeyleri GA4 benzeri bir sistem ile nasıl kaydedebileceğinizden bahsetmek istedim.
Örneğin e-ticaret sitenizde hangi ürünü kaç kez gösteriyorsunuz, gösterdiğiniz ürünler kaç kez seçiliyor, hangi ürünün detay sayfaları daha çok ziyaret ediliyor veya ürünlerin sepete eklenme oranı vs. gibi bilgileri oluştuğu anda kaydedeceğiz. Bir ürünü kaç kez gösterdiğinizi, kaç kez seçildiğini, kaç kez sepete eklendiğini ve kaç kez sattığınızı kaydettiğinizde bu bilgileri kullanarak ürünlerinizin müşteriye sunum sıralamasını değiştirebilir ve dönüşüm oranlarınızı %100’den fazla oranlarda arttırabilirsiniz.
İş sitede olup bitenleri kaydetmek olunca gidilecek yol sınırsız diyebiliriz. Ancak ben her bir hareket için ayrı table ve row açmaktansa örneği kolayca anlatmak için basit bir mimari oluşturmayı tercih ettim. Siz kendi ihtiyaçlarınıza göre bu mimariyi geliştirebilirsiniz.
Çok basit bir yapı oluşturacağız. Basitçe şöyle çalışacak. Bir JS Object oluşturacağız ve tıklama, görüntüleme gibi bilgileri bu eylemler oluştuğu anda JS Objectimize Push edeceğiz. Sonrasında bir listener yardımıyla JS Object her Push geldiğinde bir ajax request oluşturacak ve sunucu tarafında bu eventleri kaydedeceğiz.
Buradaki örnekte tüm takip etmek istediğim eventleri günlük olarak tek bir row’da tutmayı tercih ediyorum. Böylelikle hem son 15 günde hangi eylem kaç kez gerçekleşmiş bilgisini sorgulayabilecek, hemde çok fazla veri tutmak zorunda kalmayacağım. Tabiki siz IP ve kullanıcı verilerini de saklamak isterseniz mimariyi geliştirebilirsiniz.
Öncelikle içerisine eventleri pushlayacağımız objemizi oluşturalım.
PP = {
eventVariable: '',
aListener: function(val) {},
set push(val) {
this.eventVariable = val;
this.aListener(val);
},
get push() {
return this.eventVariable;
},
registerListener: function(listener) {
this.aListener = listener;
}
}Code language: JavaScript (javascript)Aslında işimiz bitti. Şimdi bu objenin içerisine her push olduğunda bir ajax request yapacağız ve gerçekleşen eylemi ve parametrelerini kaydetmek için backende göndereceğiz.
PP.registerListener(function(val) {
var request = new XMLHttpRequest();
request.open('POST', '/pp', true);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.setRequestHeader("x-csrf-token", "{{ csrf_token() }}");
request.send(JSON.stringify(val));
});Code language: JavaScript (javascript)Örneğin bir ürün detay görüntüleme bilgisini pushlayalım.
PP.push = {
event:"view_detail",
items: {{$data->id}}
};Code language: JavaScript (javascript)Bu kod çağırıldığı anda /pp bölümüne bir post request gönderilecek ve event: view_detail ve items değişkenlerini bu bölümde yakalayarak veritabanında ilgili kolona ve bugünün tarihini de işleyerek kaydedeceğiz.
Aynı şekilde gösterdiğiniz ürünlerin ID’lerini dizi olarak pushlayabilir ve ürünü kaç kez gösterdim bilgisini kayıt altına alabilirsiniz. Veya sepete ekleme formu gönderildiği anda e.preventDefault() benzeri bir yapıyla önce add_to_cart event’ini PP değişkeninize doğru parametreler ile pushlayarak sepete eklenme bilgisini kayıt altına alabilirsiniz.
Aslında burada yaptığımız Google’ın Analytics’deki dataLayer’ına çok benzer bir yapı, sadece bilgileri kendimiz kaydederek işimizi kolaylaştırıyoruz. Burada temelini verdiğim fikri deneyerek geliştirebilirsiniz. Eğer anlaşılmayan bir kısım varsa yorumlar bölümünden sorularınızı sorabilirsiniz. Eğer daha detaylı bir anlatım gerekirse ilerleyen zamanlarda gelen talepler doğrultusunda detaylı bir Youtube videosu yapabilirim.