Google Tag Manager, web sayfamızdaki sayfa görüntüleme etkinliği dışında istemcinin erişilebilir olarak sunduğu verileri kullanarak pek çok işlem gerçekleştirebilme imkanı sunmakta.
Tag Manager ile ilgili temel bilgiler ve kurulum işlemleri için Google Tag Manager Nedir? başlıklı yazımı okuyabilirsiniz. Ayrıca, Google Tag Manager: Başlangıç Eğitimi ile temel kurulum adımlarını videolar halinde takip edebilirsiniz.
Peki bu yazıda nelerden bahsedeceğim?
windowve elementscrolletkinliklerinin yakalanması 1- Google Tag Manager scroll etkinliklerinin kullanımı
- Scroll etkinliklerinin Google Analytics’e iletilmesi 2
İlerleyen yazılarda ise Google Analytics ile topladığımız bu verileri Looker Studio raporlarında kullanacağız.
Bu yazıda bahsi geçen işlemler Looker Studio Kullanıcı Etkileşim Raporu’nun bir parçasıdır.
Scroll Etkinlikleri
addEventListener fonksiyonu bize click gibi sıklıkla kullanılan etkinlikler dışında window ve HTML elemanlarının X ve Y eksenlerindeki hareketlerini yakalama imkanı da verir. Window temelinde bu işlemi Window Object property’lerinden pageXOffset, pageYOffset ve scrollX, scrollY ile gerçekleştirebiliriz3.
window.addEventListener("scroll", function () {
console.log(`pageXOffset: ${window.pageXOffset}`);
console.log(`pageYOffset: ${window.pageYOffset}`);
console.log(`scrollX: ${window.scrollX}`); // alias: pageXOffset
console.log(`scrollY: ${window.scrollY}`); // alias: pageYOffset
});Ancak, iframe dışındaki HTML elemanları scroll etkinlikleri için farklı property’lerden faydalanmamız gerekir. iframe özelinde ek bir açıklama düşmek gerekirse, bir sayfa içerisinde iframe etiketi kullanıldığında internet tarayıcısı HTML belgesi için ayrı, iframe için ayrı window nesnesi yaratır. Bu nedenle iframe işlemlerini ayrı bir şekilde planlamak gerekir. Biz örnekler için textarea ve div gibi elemanları temel alabiliriz.
DOM özelliklerine baktığımızda scroll ile ilgili şu property’leri görmekteyiz; scrollHeight, scrollLeft, scrollLeftMax, scrollTop, scrollTopMax, scrollWidth. Bu tanımlar arasından ise X ve Y ekseninde hareketleri yakalamak için scrollTop ve scrollLeft ile işlemler gerçekleştiririz.
document.querySelector("div").addEventListener("scroll", function () {
console.log(`scrollTop: ${this.scrollTop}`);
console.log(`scrollLeft: ${this.scrollLeft}`);
});Google Tag Manager ve Scroll Etkinliği
Google Tag Manager bize Scroll Depth Threshold, Scroll Depth Units ve Scroll Direction değişkenlerini ve Kullanıcı Katılımı başlığı altında Scroll Depth (Kaydırma Derinliği) tetikleyicisini sunar.
Scroll Depth Threshold, tetikleyicinin (trigger) etkinleşmesine neden olan kaydırma derinliğini gösteren sayısal bir değer. Yüzde eşikleri (25, 50, 75, 100 vb.) için bu sayısal bir değer (0-100) olacaktır. Pikseller için ise, eşik olarak belirtilen piksel sayısını temsil eden sayısal bir değer alır.
Scroll Depth Units, tetikleyicinin etkinleşmesine neden olan eşik için belirtilen birimi pikseller (pixels) veya yüzde (percent) olarak ifade eder.
Scroll Direction, tetikleyicinin etkinleşmesine neden olan eşiğin dikey (vertical) veya yatay (horizontal) olduğu bilgisini verir.
Scroll etkinliğini gtm.js, gtm.dom veya gtm.load ile birlikte işleme alınabilir. Ancak, sayfanın yüklenmesi sürecinde eklenecek elemanlar, görseller gibi sayfa derinliğini etkileyecek unsurlar sebebiyle sayfanın tamamının yüklenmesinin ardından işlem gerçekleştirmek, yani gtm.load önerilir.
Scroll dinamik olarak değişkenlik gösteriyorsa (scroll infinitely) scroll etkinliği yerine öğe görünürlüğü tetikleyicisi (element visibility trigger) kullanabilirsiniz 4.
Yüklenme sürecinde Scroll Depth Threshold değerine bağlı olarak bir işlem
gerekleştiriyorsanız, sayfanın yüklenmesi sırasında bu değere ulaşılırsa
(kullanıcı etkileşimi olmaksızın) tetikleme gerçekleşir4.
Google Analytics’e Scroll Etkinliğinin İletilmesi
Tahmin edeceğiniz üzere bir sayfanın görüntülemesi sürecinde en çok gerçekleştirilen etkinliklerden biri scroll etkinliğidir. Bu nedenle, scroll etkinliğini belirli bir amaç doğrultusunda değerlendirmenizi ve değerleri diğer etkinlik değerlerinden kolayca ayrıştırılabilecek şekilde iletmenizi öneririm. Amacınız sadece görüntülenen sayfanın ziyaretçiler tarafından ne ölçüde değerlendirildiğini öğrenmek ise tavsiyem Hotjar ile ısı haritası olacaktır5. Bu size daha anlamlı gözlemler gerçekleştirme ve fikirler üretme imkanı sunacaktır.
Değerlendirmenizi yaptınız ve kararınızı GTM aracılığı ile özel etkinlik olarak scroll hareketlerini Google Analytics’e aktarma yönünde verdiniz. O halde devam edelim.
Amacımız, sayfa bağlamında scroll derinliğini gözlemlemek olsun. Bu durumda, en basit haliyle şu değişkenlere ihtiyacımız olacak; {{Page Path}}, {{Scroll Depth Threshold}}.
Yeni bir Google Analytics etiketi oluşturup, İzleme Türü olarak Etkinlik seçimini yapalım.
Az önce tanımladığımız etiketin tetiklenmesi için bir tetikleyiciye ihtiyacımız var. Bu amaçla scroll hareketini kullanacağız. Dolayısıyla, tetikleyici olarak Kaydırma Derinliği seçimini yapmamız gerekiyor.
Elbette işlemi koşullarla sınırlandırabilirsiniz. Örneğin, sadece landing page özelinde scroll derinliğini gözlemlemek isteyebilirsiniz. Yukarıdaki örnek görselde scroll derinliğini yatay ve dikeyde, yüzdelik dilimler halinde değerlendirmekte. Sayfanızın X ekseninde hareketini gerektiren bir durum mevcut değilse önerim sadece dikey (Y ekseni) kaydırma etkinliğini değerlendirmeniz olacaktır.
Yukarıdaki işlemlerin ardından kısa zaman içerisinde scroll etkinlik değerlerini Google Analytics gerçek zamanlı etkinlikler alanında ve Davranış > Etkinlikler altındaki raporlarda görebilirsiniz. Bundan sonrası artık bu verileri ne amaçla kullanacağınıza göre değişkenlik gösterir. Örneğin, aşağıdaki rapor kesitinde scroll etkinliğinin funnel olarak sunulduğunu görebilir, değerlendirme sonucunda sadece sayfaların %56’sının tamamen görüntülendiği sonucuna ulaşabilirsiniz.
Grafiğin bize gösterdiği sonuçlardan biri, sayfanın alt bölümünde (footer) çok kritik bilgiler bulundurmamamız gerektiğini yönünde olacaktır.
Bu Yaklaşımın Sınırları
GTM Scroll Depth trigger’ı ve yukarıda bahsedilen yöntem, scroll derinliğini ölçmenin temel yollarından biridir. Ancak birkaç önemli sınırlaması vardır:
- Threshold-based: Kullanıcının %75’e ulaştığını bilirsiniz ama o bölgeyi okuyarak mı yoksa hızlıca kaydırarak mı geçtiğini bilemezsiniz
- Tüm sayfa yüksekliği: Header, footer ve sidebar dahil tüm sayfayı ölçer. İçerik alanınız sayfanın %60’ıysa threshold’lar yanıltıcıdır
- Dwell time ve velocity analizi yok: Kullanıcının bir bölgede ne kadar kaldığı veya ne hızda scroll ettiği hakkında veri üretmez
Bu sınırlamaları aşan, içerik alanı odaklı ve engagement kalitesini (engaged, scanned, skipped) ayırt eden bir yaklaşım için Scroll Depth Tracking: GA4 ve GTM Ötesinde İçerik Etkileşim Ölçümü yazısına göz atabilirsiniz.