Google tarafından 2020 yılı Mayıs aylarında açıklanan Core Web Vitals kriterleri ile site açılış hızları oldukça önemli bir hale gelmiştir. Bu çerçevede, web site sahipleri site hızlarını sürekli olarak analiz etmek ve gerekli aksiyonlar almak durumundadırlar. Sayfa açılış hızı ölçme ve sonuçlar dahilinde aksiyon almak, özellike SEO planlamaları konusunda öncelikli hale gelmiştir. Biz de sayfa açılış hızlarınızı ölçme konusunda size yardımcı olmak adına kullanıcıların sitemizde ziyaret ettikleri sayfaları kaç saniyede görüntülediklerini öğrenebileceğiniz bir yazı oluşturduk.
Bu yazımızda sayfa yüklenme sürelerini ölçmek adına Google Analytics ve Google Tag Manager araçlarından faydalanacağız.
Analytics ile Sayfa Açılış Hızı Nasıl Ölçülür?
Google Analytics ve Google Tag Manager kullanarak sayfa açılış hızı ölçmek adına gerekenler şu şekildedir;
- Analytics hesabı
- Google Tag Manager hesabı
- Özel JS Kodu
- RegEx tablosu
Şimdi adım adım kurulum işlemlerine başlayalım;
1. DeÄŸiÅŸkenleri OluÅŸturmak
Ä°lk olarak Google Tag Manager hesabınızı açmalısınız. Bu hesabınız ile web siteniz daha önceden iliÅŸkilendirilmiÅŸ olmalıdır. Etiket yöneticisine girdikten sonra sol sütunda yer alan “DeÄŸiÅŸkenler” alanına gidiniz.
DeÄŸiÅŸkenler alanını açtıktan sonra yeni bir deÄŸiÅŸken oluÅŸturmamız gerekecektir. Bunun için kullanıcı tanımlı deÄŸiÅŸkenler alanına gelerek saÄŸ üstte yer alan “Yeni” tuÅŸuna basınız.
Karşınıza çıkan “Sayfa DeÄŸiÅŸkenleri” alanından “Özel JavaScript” seçeneÄŸine tıklayınız.
Karşınıza değişken yapılandırma alanı gelecektir. Bu alanda yapmamız gereken sizler ile aşağıda paylaşmış olduğum javascript kodunu kullanmak ve bu alana eklemek olacaktır.
function() {
var sayfaVeri = window.performance.timing;
var time = sayfaVeri.domComplete - sayfaVeri.domLoading;
return time;
}
Kodu aşağıda yer alan görseldeki gibi ekleyiniz.
Bu kod ve deÄŸiÅŸken sayesinde, bir kullanıcı sayfaya giriÅŸ yaptıktan sonra sayfa yüklenene dek geçen zamanı hesaplayabileceÄŸiz. Bu adımları tamamladıktan sonra, elde ettiÄŸimiz verileri anlamlı bir ÅŸekilde görmek adına RegEx yapısından faydalanacağız. RegEx yapısını kullanmak adına yapmamız gereken ise çok basit. Yeni bir deÄŸiÅŸken oluÅŸturma adımı uygulayacağız. Bu adımda deÄŸiÅŸken türünüzü “RegEx Tablosu” olarak seçmelisiniz.
RegEx tablosunu deÄŸiÅŸken türü olarak belirledikten sonra yapmamız gereken ise “GiriÅŸ DeÄŸiÅŸkeni” alanını, yukarıda yer alan adımlarda belirlediÄŸimiz JavaScript deÄŸiÅŸkeni olacak ÅŸekilde seçmeliyiz. Daha sonra ise toplam 11 satırdan oluÅŸacak bir RegEx tablosu oluÅŸturacağız. Tabloda yer alacak verileri aÅŸağıda yer alan kod alanından edinebilirsiniz.
Bu alanda sizler ile paylaştığımız verileri, hemen alt kısımda yer alan görselde belirttiğimiz gibi düzenleyiniz ve RegEx tablosunu kayıt ediniz.
\b([0-9]|[1-9][0-9]|[1-9][0-9][0-9])\b /// 1 sn
\b([1-1][0-9][0-9][0-9])\b ///// 2 sn
\b([2-2][0-9][0-9][0-9])\b ///// 3 sn
\b([3-3][0-9][0-9][0-9])\b ///// 4 sn
\b([4-4][0-9][0-9][0-9])\b ///// 5 sn
\b([5-5][0-9][0-9][0-9])\b ///// 6 sn
\b([6-6][0-9][0-9][0-9])\b ///// 7 sn
\b([7-7][0-9][0-9][0-9])\b ///// 8 sn
\b([8-8][0-9][0-9][0-9])\b ///// 9 sn
\b([9-9][0-9][0-9][0-9])\b ///// 10 sn
\b([1-2][0-9][0-9][0-9][0-9])\b ///// 10+ sn
Åžimdi Google Tag Manager panelde hemen saÄŸ üst kısımda bulunan “Önizleme” tuÅŸuna basınız. Önizleme için bir site belirledikten sonra, karşınıza çıkan veri alanından “Variables” alanını seçiniz. EÄŸer eklemelerimiz baÅŸarılı oldu ise alt kısımda yer alan görselde sizlere sunduÄŸumuz gibi veriler elde edeceÄŸiz. Bu verileri sorunsuz almayı baÅŸardıysak, çalışmamız baÅŸarıya ulaÅŸmış demektir.
2. Etiket ve Tetikleyicileri OluÅŸturmak
Åžimdi Google Tag Manager ile Analytics arasında baÄŸlantı kurmak adına “Etiket” oluÅŸturacak ve “Tetikleyici” ayarları ile istediÄŸimiz verileri anlamlı bir hale getireceÄŸiz. Bunun için Google Tag Manager paneli üzerinden “Etiketler” alanına giriÅŸ yapınız. Daha sonra ise “Yeni” tuÅŸuna basarak bir etiket oluÅŸturacağız. Yeni tuÅŸuna bastıktan sonra karşımıza bu ÅŸekilde bir alan gelecektir.
Bu alan üzerinden ilk olarak “Etiket Yapılandırması” adımlarını tamamlayacağız. Etiket yapılandırması alanına girdikten sonra doldurulması gereken birçok alan bizleri karşılayacak. Bunları aÅŸağıda sizlere belirttiÄŸimiz gibi eksiksiz olarak giriniz;
- Etiket Türü > “Google Analytics: Universal Analytics” (Sitenizde hangi Analytics kullanıyor iseniz onu seçin.)
- Ä°zleme Türü > “Etkinlik“
- Kategori > Açılış Süresi (İstediğinizi yazabilirsiniz.)
- Ä°ÅŸlem > RegEx tablosu ile oluÅŸturduÄŸunuz deÄŸiÅŸken
- Etiket > “Page Path”
- Değer > Özel JavaScript değişkeni
- EtkileÅŸim Ä°sabeti > DoÄŸru
- Google Analytics Ayarları > “Google Analytics Ayarları” (Bu ayarları girerken izleme kodlarınızı belirtmeyi unutmayın.)
Tüm bu alanları eksiksiz olarak girdikten sonra aşağıda yer alan görselde belirttiğimiz gibi bir yapı ile karşılaşmanız gerekecektir.
Tüm bu etkinlik ayarlarını eksiksiz olarak girdikten sonra sıra “Tetikleyici” eklemeye geldi. Tetikleyici olarak “Pencere Yüklendi” özelliÄŸini kullanacağız. Aksi halde verimli bir çalışma yapamayız. Bunun için ilk olarak tetikleyicilere tıklayın. EÄŸer daha önce “Pencere Yüklendi” tetikleyicisini kullanmadıysanız yeni olarak eklememiz gerekecektir. Bunun için tetikleyici alanına geliniz ve görselde belirttiÄŸimiz gibi “+” tuÅŸuna basınız.
Karşınıza çıkan alandan “Tetikleyici Yapılandırması” alanına tıklayınız ve “Pencere Yüklendi” tetikleyicisini seçiniz. Ä°ÅŸte istediÄŸimiz tetikleyiciyi bu ÅŸekilde seçmiÅŸ olduk.
3. Analytics Önizlemesi Yapmak
Åžimdi yapmamız gereken ise tekrar bir önizleme yapmak olacaktır. Google Tag Manager kullanıcı panelimize döndükten sonra “Önizleme” alanına basıyoruz. Ä°stediÄŸimiz siteyi giriyor ve tetikleyicilerimizi gönderiyoruz. Önizlemeyi açmadan önce, Analytics hesabınıza giriÅŸ yapınız ve “Gerçek Zamanlı” alanı üzerinden “Etkinlik” sayfasına giriÅŸ yapınız. EÄŸer tetikleyicilerimiz baÅŸarılı bir ÅŸekilde çalıştı ise aÅŸağıda gösterdiÄŸimiz gibi bir sonuç ortaya çıkacaktır.
Eğer bu sonucu aldıysanız, tebrikler! Google Analytics ile sayfa hızlarınızı ölçmüş olacaksınız.
Bu Yazıları da Sevebilirsiniz
Yazımızda kullandığınız özelliklerin yanı sıra site hızlarınızı manuel olarak da kontrol etmek isterseniz site hızı ölçme araçları yazımıza da göz atmanızı tavsiye ederiz.
Sonuç
Bu yazımızda Google tag manager üzerinden değişkenler ve etiketler oluşturarak, bu değişkenler sayesidne sayfa hızlarınızı gerçek bir bakış ile nasıl görebileceğinizden bahsettik. Elde ettiğimiz verileri Google analytics üzerinde görüntüleyerek anlamlı bir hale getirdik. Bu sayede sadece labaratuvar (Pagespeed, GTMetrix) verilerine bağlı kalmadan, Google analytics ile gerçek zamanlı olarak sizler için önemli olan sayfalarınızın yüklenme sürelerini net olarak görebileceksiniz.