Autor del tema
#0
CLS (Cumulative Layout Shift), web sayfalarının yüklenmesi sırasında içeriğin hareket etme miktarını ölçen bir kullanıcı deneyimi metriğidir. Kullanıcılar, sayfa yüklendiğinde içeriklerin yer değiştirmesi durumunda olumsuz bir deneyim yaşayabilirler. Bu nedenle, CLS değerinin takibi, web sitelerinin performansını artırmak ve kullanıcı deneyimini iyileştirmek adına kritik öneme sahiptir.
İlk olarak, Google Analytics’i kullanarak CLS izlemek için, öncelikle Google Analytics 4 (GA4) hesabınızın kurulu olması gerekmektedir. GA4, web sayfanızın performansını izlemek için yeni ve geliştirilmiş bir arayüze sahiptir. CLS değerini izlemek için şu adımları izleyebilirsiniz:
Sonuç olarak, CLS takibi, web sitenizin kullanıcı deneyimini artırmak için kritik bir unsur. Bu metrik sayesinde, sayfa performansınızı iyileştirmek için gerekli adımları atabilir, kullanıcıların daha iyi bir deneyim yaşamasını sağlayabilirsiniz. CLS değerinizi izlemek için yukarıdaki adımları uygulayarak, web sitenizin performansını artırmak adına önemli bir adım atmış olursunuz.
İlk olarak, Google Analytics’i kullanarak CLS izlemek için, öncelikle Google Analytics 4 (GA4) hesabınızın kurulu olması gerekmektedir. GA4, web sayfanızın performansını izlemek için yeni ve geliştirilmiş bir arayüze sahiptir. CLS değerini izlemek için şu adımları izleyebilirsiniz:
- Google Tag Manager Kullanımı: Eğer Google Tag Manager (GTM) kullanıyorsanız, GTM ile bir "Custom HTML Tag" oluşturarak CLS ölçümünü gerçekleştirebilirsiniz. Bu tag, sayfa yüklendiğinde ve kullanıcı etkileşimde bulunduğunda CLS değerini hesaplayan bir JavaScript kodu içermelidir.
- JavaScript Kodu: Kullanıcı etkileşimlerini izlemek için aşağıdaki gibi bir kod kullanabilirsiniz:
CODE
123456789101112
let cumulativeShift = 0;
const observer = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
cumulativeShift += entry.value;
}
window.dataLayer.push({
event: 'clsTracking',
clsValue: cumulativeShift
});
});
observer.observe({ type: 'layout-shift', buffered: true });
- Event Takibi: Yukarıdaki kod, CLS değerini izler ve bir olay tetikler. Bu olayı Google Analytics'ye göndermek için, GTM üzerinden bir "Event" oluşturmalısınız. Olayın adı "clsTracking" olmalı ve "clsValue" veri katmanında geçmeli.
- Raporlama: Google Analytics üzerinde "Olaylar" sekmesinde oluşturduğunuz "clsTracking" olayını izleyerek, kullanıcılarınızın deneyimini etkileyen CLS değerini analiz edebilirsiniz.
Sonuç olarak, CLS takibi, web sitenizin kullanıcı deneyimini artırmak için kritik bir unsur. Bu metrik sayesinde, sayfa performansınızı iyileştirmek için gerekli adımları atabilir, kullanıcıların daha iyi bir deneyim yaşamasını sağlayabilirsiniz. CLS değerinizi izlemek için yukarıdaki adımları uygulayarak, web sitenizin performansını artırmak adına önemli bir adım atmış olursunuz.