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?
window
ve elementscroll
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 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.