Google Tag Manager Scroll Derinliği İşlemleri
Google Analytics İle Scroll Hareketlerinin Loglanması
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, tetkleyici 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.