Google Tag Manager İçin JavaScript İle Sayfadan Veri Alma

Google Tag Manager İçin JavaScript İle Sayfadan Veri Alma

Google Tag Manager İçin JavaScript İle Sayfadan Veri Alma

Herkese selamlar. Bu başlık altında Google Adwords kullanıcılarının en çok ihtiyaç duyduğu, e-ticaret işiyle uğraşanların, ürün satışı sonrası Adwords ile gelen kullanıcının hangi ürünü aldığını ve kaç adet satıldığını öğrenmemizi sağlayacak JavaScript ile sayfadan veri çekme methodunu paylaşacağım. Özellikle Google Tag Manager panelinize ekleyerek dilediğiniz sayfadan dilediğiniz veriyi rahatlıkla alabileceksiniz.

Verileri Nasıl Bir Sayfadan Çekeceğim?

Öncelikle en sağlıklı veri akışını sağlamak için bildiğiniz gibi genellikle ürün satışları veya rezervasyon / randevu formları sonrasında “teşekkürler” sayfası bulunmaktadır. Bu sayfa içerisinde kimi site sadece siparişiniz alındı / randevunuz oluşturuldu ibaresi koyarken kimi firma ise işlem sonrası pek çok bilgiyi barındırmaktadır. Öncelikle işlem sonrası yönlendirilen bir sayfanın mutlaka olması gerekiyor. Eğer bu sayfa yoksa ve tüm işlemler Ajax ile gerçekleşiyorsa, bu noktada “GET” methoduyla satına alınan ürün ve fiyat bilgisi URL’e gönderilebilir ancak bu veriyi işlemek ve Tag Manager’da göstermek epey uğraştırıcı olacağından, en sağlıklı yöntem; işlem sonrası bir sonuç sayfasının olmasıdır.

Sonuç Sayfasından Veri Nasıl Alınır?

Diyelim ki sizin hizmet verdiğiniz bir e-ticaret firması var veya kendi e-ticaret firmanızda, yayınladığınız Adwords ve Sosyal Medya reklamlarından kaç kişinin geri dönüş yapıp, hangi ürünü satın aldığını ve totalde ne kadarlık satış yaptığınızı hesaplamak istiyorsunuz. Bunun için öncelikle işlem sonrası sonuç sayfanızda yer alması gereken bazı unsurlar var:
 

  • Satın Alma / Rezervasyon işlemini yapan kişinin bilgileri,
  • Satın Alınan Ürün / Rezervasyon Yapılan Hizmet bilgileri,
  • Satın Alınan Ürün / Rezervasyon Yapılan Hizmet fiyat bilgileri


Bu üç veri, en net ve sağlıklı veri analizini gerçekleştirmemizi sağlayacak verilerdir. Mutlaka “Sonuç / Teşekkürler” sayfanızda bu verilerin yer alıyor olması gerekiyor. Şimdi canlı bir örnek üzerinden ilerleyelim ve daha iyi anlayalım ne yapmaya çalıştığımızı.

Tag Manager İçin JavaScript Veri Kodu Pratiği

Diyelim ki bizim bir e-ticaret firmamız var ve firmamızın e-ticaret sitesinde giyim ürünleri satıyoruz. Yakın zamanda da Adwords ile reklamlar yayınlamaya başladık ve firmamızın yaptığı satışlardan dönüşleri Google Tag Manager ile almak ve değerlendirmek istiyorum. Ürün satışı sonrasında, eğer satış / ödeme başarılı olduysa kullanıcıyı şöyle bir teşekkür sayfasına yönlendiriyorum:

tag-manager-tesekkurler-sayfasi

Şimdi böyle bir teşekkürler sayfamız olduğunu varsayalım. Kullanıcı ürünü satın aldıktan sonra ürün ve kullanıcı bilgilerinin yer aldığı sayfam. Ben bu sayfadan hem ürün bilgilerini hem de satın alan kişiyi ve fiyatı, Tag Manager’a çekmek istiyorum. Bunun için önce yapmamız gereken, sayfaya sağ tıklayıp > öğeyi denetle/incele dememiz. Bunu yaptığımız zaman sayfa kaynak kodlarında aşağıdaki gibi, almak istediğimiz kısımların id/class isimlerini göreceğiz.

tag-manager-js-veri-cekme

Sayfa kaynağımı incelediğim zaman görüyorum ki:

  • Ürün İsminin Id’si: urunadi
  • Ürün Kodunun Id’si: urunkodu
  • Ürün Fiyatının Id’si: urunfiyati
  • Müşteri Bilgisinin Id’si: satinalankisi

Sıra geldi JavaScript ile bu idlerdeki bilgileri sayfadan almaya. Google Tag Manager’a eklediğimiz js takip kodumuzu oluşturmaya başlayalım!

var urunadi = document.getElementById('urunadi').textContent; 

var urunkodu = document.getElementById('urunkodu').textContent;

var urunfiyati = document.getElementById('urunfiyati').textContent;

var satinalankisi = document.getElementById('satinalankisi').textContent;

console.log(urunadi, urunkodu, urunfiyati, satinalankisi);


Burada öncelikle urunadi, urunkodu, urunfiyati ve satinalankisi adında 4 farklı nesne açtım ve her nesne için dedim ki: Şu “ID”ye sahip elementin text alanında yazan bilgiyi getir. Örneğin: urunadi id’sinin textContent’ini getir. Ardından test için getirdiği verileri console.log() komutu ile sayfa kaynağına yazdırdım. console.log() nasıl kullanılacağını öğrenmek için console.log() kullanımı « yazımızı okuyabilirsiniz. Şimdi kontrolümüzü sağlayalım:

tag-manager-urun-bilgisi-cekme

Harika! Başarılı bir şekilde almak istediğim tüm bilgileri aldım! Artık dilediğim sayfadan dilediğim veriyi alarak Tag Manager ve Adwords yönetimimi başarıyla gerçekleştirebilirim! Aklınıza takılan her şeyi bu başlık altında sorabilirsiniz. İyi çalışmalar dileriz! :)

0 Yorum

Yorum Bırak