Analytics İle Sayfa Açılış Hızı Ölçmek

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.

Yazımızda kullandığınız özelliklerin yanı sıra site hızlarınızı manuel olarak da kontrol etmek isterseniz Site Hızı Nasıl Ölçülür ve İyileştirilir? 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.