Google Tag Manager Scroll Derinliği İşlemleri

Google Analytics İle Scroll Hareketlerinin Loglanması

Güncelleme Yayın

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?

  • window ve element scroll etkinliklerinin 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 Google Data Studio raporlarında kullanacağız.

Destek

Bu yazıda bahsi geçen işlemler Google Data 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.

GTM Scroll Variables
GTM Scroll Depth

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.

Google Analytics Scroll Depth Event

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.

Hotjar Scroll Heatmap

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.

Google Tag Manager Scroll Depth Event

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, tetkleyici olarak Kaydırma Derinliği seçimini yapmamız gerekiyor.

Google Tag Manager Scroll Depth Trigger

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.

Google Data Studio Scroll Depth Funnel

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.