GTM Element Visibility ile Sanal Sayfa Entegrasyonu (Bonus: JavaScript)

Herkese merhabalar 🙂

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.

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)

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

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.

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.

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.

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.

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

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:

Elementi:

Triggerı:

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 🙂