Herkese merhabalar 🙂

Image for post

Sitemizde sayfanın url’i değişmeden içeriğinin değiştiği (SPA de olabilir, normal web sitesi de) durumlar olabilir. Kullanıcıların site içi etkileşimlerini daha iyi ölçebilmek veya daha detaylı kırılımda funnel kurulumları yapabilmek için ek sayfa ölçümlemelerine ihtiyaç duyabiliyoruz. Böylece kullanıcının site içerisindeki akışını daha detaylı görüntüleyip buna göre zorluk yaşadığı adımları belirleyip A/B test önerileri sunabiliriz.

Sanal sayfa nedir:

#1 Tamamen SPA (Single Page Application) olan bir sitede, site ilk açıldığında bütün kaynak kodları tek bir kere yüklenir ve kullanıcılara yeni sayfalar ön yüzdeki kodlar çalıştırılarak gösterilir. Bunun artısı her sayfa geçişinde sayfalar tekrar yüklenmez dolayısıyla tekrar kaynak kodlarının yüklenmesi beklenmez ve site hızı artar. Olumsuz etkisi ise SPA sitelerde kaynak takibinin bozulması olabiliyor buna da rogue referrer ismini veriyoruz.

#2 Sayfa geçişlerinde sayfa yenilenmesi olan sitelerde ise site içerisinde görüntülenen bazı alanları ölçmek ve bunları funnelda kullanmak isteyebiliriz. Ek olarak bu sitelerde tüm sayfa geçişlerinde sayfa yenilenmesi olmayabilir. Bu sitelerdeki sayfa sayımı entegrasyonunda GTM üzerinden all pages triggerı kullanıldıysa bu sayfalar Analytics tarafından ölçülmez çünkü all pages triggerı sadece her sayfa yenilenmesi durumunda bir kez tetiklenir.

Image for post

Yukarıda bahsettiğim durumlardaki sayfalara sanal sayfa diyoruz.

SPA nedir diyenler için daha detaylı yazıya buradan ulaşabilirsiniz.

Sanal sayfaların sitemizde kullanılabileceği bazı alanlar:

#1 Sanal sepetler (sepet adımına gitmeden yandan pencere şeklinde açılan sepet özetleri)

Image for post

#2 Lead generation sitelerinde sıkça kullanılan sms gönderim ve onay popup alanları

Bu entegrasyonu yapmanın birden fazla yolu var. Birkaçından bahsetmek gerekirse;

İlk olarak yazılımcıdan event göndermesini isteyebiliriz bunun için native veya GTMli versiyon üzerinden ilerleyebiliriz, ikinci olarak GTM üzerinden element visibility triggerını kullanabiliriz bu yöntem için GTM’in sitemizde ekli olması gerekiyor. Üçüncü olarak yine GTM’in built-in triggerı olarak bulunan history change özelliğini kullanabiliriz.

Yukarıda bahsettiğim örnek 2 durum için bu blog yazısında GTM’in bize sağladığı element visibility trigger’ını kullanacağız. Dolayısıyla biraz da bu trigger’dan bahsetmek istiyorum. GTM’in bize sunduğu bu trigger ile 3 farklı durumda tagin tetiklenmesini sağlayabiliriz.

Temel olarak bu trigger’ı seçtiğimizde GTM üzerinde bizi şöyle bir ekran karşılıyor.

Image for post
Image for post

Burada selection method isimli alandan, kullanacağımız selector için tip seçmemiz gerekiyor. Eğer ID seçersek sayfada bulunan elementin id’sini alıp yazmak yeterlidir. Eğer id dışında bir selector seçeceksek bu alandan CSS seçmemiz gerekiyor. (ID seçtiğimizde de yine CSS seçip bu inputa #id şeklinde yazabiliyoruz.)

Bu triggerın sayfada üç şekilde tetiklenmesini sağlayabiliriz.

  1. Once per page ile trigger sayfada sadece bir kere tetiklensin diyebiliriz. Böylece kullanıcı bir popup gördüğünde her seferinde Analytics’e hit göndermek yerine sadece bir kere gönderilmesini sağlayabiliriz.
  2. Once per element seçip element başına bir kere tetiklensin diyebiliriz. Bunu da örneğin SMS adımında onay popupını gördük ancak hatalı girdik sonra tekrar popup açıldığında tekrar sayfa sayımı yapmak istiyorsak bu seçeneği seçmeliyiz.
  3. Every time an element appears on screen seçip kullanıcı her seferinde en az % minimum percent visible alanına girdiğimiz değer kadarını gördüğünde tetiklensin diyebiliriz.

Minimum percent visible ise seçtiğimiz selector’ün sayfada yüzdelik olarak en az ne kadarı görüntülendiğinde tetiklensin diyebildiğimiz alandır. (Örneğin; 50 girersek bu alanın en az yüzde ellisi görüntülendiğinde tetiklensin demiş oluyoruz.)

İstersek minimum on screen duration alanını seçip örneğin 1000 (ms cinsinden değer yazıyoruz) yazdığımızda kullanıcı, selectorünü seçtiğimiz alanı sayfada en az 1 sn gördükten sonra trigger tetiklensin diyebiliyoruz.

Seçtiğimiz selector eğer sayfada sonradan ortaya çıkıyorsa Observe dom changes denilen özelliği seçmemiz gerekiyor ancak görüntülenmesini istediğimiz alan, sayfa yüklendiğinden beri sayfada bulunan bir alansa bu özelliği seçmemize gerek yok.

#1 Sanal Sepet

Öncelikle bir selector seçmemiz gerekiyor bunun için görüntülenen alanın üzerine gelip Elements kısmından kontrol ediyoruz.

Console tabını açmak için ekrana sağ tıklayıp İncele diyebiliriz.

Image for post

Bu örnekte belirli bir id olmadığı için classlar üzerinden gitmemiz gerekiyor.

Site üzerinde elementlerin değişmesi olasılığına karşılık bu alanı kapsayacak en sade ve unique selector’ü seçmemiz gerekiyor.

Bu alan için kullanacağımız selector şu olacak: Bu da modal__body classı altındaki basket-modal classını seçmek anlamına geliyor.

Image for post

Seçtiğimiz selector’ün sayfada tek olduğunu ve sadece bu sepetin görüntülenmesine ait olduğunu kontrol etmemiz gerekiyor. Bunun için de aşağıdaki gibi selector ismini console’a yazıp kontrol etmemiz yeterlidir. Length değerinin 1 olması bu selectörün sayfada sadece 1 alana ait olduğunu gösteriyor.

Image for post

Trigger’ı tamamladıktan sonra tag’in oluşturulmasına geçiyoruz. Sayfa sayımı yapacağımız için pageview tipinde bir hit gönderiyoruz ve Analytics’te gördüğümüz page değerinin sayfanın url’inden (location) almaması için fields to set ile override ediyoruz ve kendi istediğimiz sayfa ismini ve başlığını page ve title alanının değeri olarak gönderiyoruz.

Image for post
Image for post

#2 SMS Modal

Funnel kurarken SMS adımı olan kısımlar bazen farklı sayfada gösterilmeyip popup olarak kullanıcıya gösteriliyor ve sayfa sayımı yapılmadığı zaman kullanıcıların ne kadarı sms adımından funnelı terk ediyor analiz edemiyoruz.

Bunun için SMS modalı görüntülendiğinde pageview gönderip bu adımı da funnela ekleyip analiz edebiliyoruz.

Image for post
Image for post

Bonus: Her zaman id veya class seçmek zorunda değiliz. Sayfadaki elementin attribute’larını da selector olarak seçebiliriz.

Örneğin; sitemizde popüler kampanyaların olduğu alanın görüntülenmesini takip etmek istiyoruz ve seçeceğimiz selector’ün unique olması doğru ölçümlememiz için çok önemlidir.

Alan:

Image for post

Elementi:

Image for post

Triggerı:

Image for post

Burada kullandığımız selector section alanı içerisinde genericProductList id’sine sahip elementin attribute’ü olarak data-ga-creative seçiyoruz ve içerisinde Popüler Kampanyalar geçen bu attribute’ün altındaki m-flex classını seçmiş oluyoruz. Bence unique olmuştur. 🙂

Görüşürüz 🙂

Image for post

Diğer içeriklerimize de göz atın.

08/04/2021 in Dönüşüm Optimizasyonu, Dönüşüm Optimizasyonu

Google Optimize Callback Özelliği Nasıl Kullanılır?

Bu yazıda, A/B testleri ve kişiselleştirme tool’u olarak sıklıkla kullandığımız Google Optimize’daki Callback fonksiyonun kullanımından bahsedeceğim.  Optimize Callback nedir? Optimize Callback, belirttiğimiz geri çağrım (callback) fonksiyonunu kullanarak kendi yazdığımız JavaScript…
Read More
17/08/2021 in Başarı Hikayeleri, Veri Odaklı Reklam Yönetimi

Responsive Search Ads’te “Excellent Strength” Gücü ile Tıklama Oranında %47’lik Artış – BluTV Case Study

Hype Proje Sahipleri: Sezgin Zambak, Baran Atıcı Mobil kullanımının %90'lara geldiği bir dünyada maximum görünürlük elde etmek ve markanın tıklama oranı hedefleri doğrultusunda search yayınlarının tıklama oranlarını arttırma hedefimiz vardı.…
Read More
25/08/2020 in Genel

Single Page Application’larda A/B Testi Nasıl Yapılır?

Web sitesi üzerinde yapılan A/B testleri istenilen hedefin tamamlanma sayısını veya herhangi başka bir metriği iyileştirmek için oldukça önemli aksiyonlardır.
Read More

Hype

Esentepe Mahallesi
Ecza Sokak 6/1
Levent, İstanbul

+90 (532) 744 4943
[email protected]