Google Analytics ve GTM İle Error Event'lerin Loglanması

JavaScript, Görsel Yüklenme ve Adblocker Hatalarının Yakalanması

Güncelleme Yayın

WordPress içerik yönetim sisteminden Grav'a geçiş sürecine dair daha önce yayınladığım aktarımlarla1 da ilintili olarak web sayfası görüntülenirken karşılaşılaması muhtemel bazı hataların nasıl Google Analytics üzerinde görüntülenebileceğinden bahsedeceğim. Yazılarımı uzun zamandır takip edenler var ise daha önce yayınladığım JQuery İle Görselleri Değiştirme/Gizleme ve Raporlama başlıklı yazımı anımsayacaklardır. İlgili başlıkta görsel yüklenmeme durumu ile ortaya çıkan erroretkinliğine odaklanmış ve bu etkinliği jQuery ile çözümlemiştik. Şimdi, bu yazı kapsamında ise çözüm yaklaşımını biraz daha genişletelim ve final aşamasında elde ettiğimiz bilgileri Google Data Studio üzerinden görüntülenebilir hale getirelim.

JavaScript Hata Nesnesi

Bir web sayfası veya ekranın görüntülenmesi aşamasında, yani çalışma zamanı (runtime) sürecinde ortaya çıkan beklenmeye durumlar çoğu zaman console üzerinden de görüntüleyebildiğimiz bildirimlerin oluşmasına neden olurlar. Bu bildirimler aslında runtime tarafında iletilen error objects kayıtlarıdır2. Error nesneleri (objects) elbette sadece runtime aşamasında kullanılmaz, aynı zamanda kullanıcı tanımlı (user-defined) olarak da ele alınabilirler3. Gelelim asıl konumuza.

Web API bağlamında4, ErrorEvent arabirimi (interface), script veya dosyalardaki hatalarla ilgili bilgiler sağlayan olayları temsil eder5. Bizim odaklanacağımız kısım window ve element nesneleri ile ilişkili olacak.

Window: error event, kaynak yüklenemediği ya da kullanılamadığında error etkinliği window nesnesi ile ilişkili olarak tetiklenir. Örneğin, bir script yürütme hatasına sahipse window nesnesi içerisinde error kaydı oluşacaktır.

    <script>
      let fetchData = false;
      let fetchData = true;
    </script>

let kullanımında bildiğiniz üzere yeniden değer ataması (redeclare) yapılamamakta6. Bu tür bir işlemde JS hatası alırız. Dolayısıyla, yukarıdaki satırlar bizim için hata üretecektir. Bu durumda ilgili hataya dair detayları window.addEventListener('error', (event) => {...}) ile yakalayabiliriz78.

window error event listener

Yukarıdaki görselde de görüldüğü üzere error nesnesi işimize yarar pek çok bilgi içermekte. Ancak, özellikle dikkate alabileceğimiz satırlar type, lineno ve message şeklinde özetlenebilir.

console.log(`${event.type}: ${event.message}, line: ${event.lineno}`);

Şimdi gelelim element nesnesi ile ilişkili error etkinliğine.

Element: error event, element durumunu etkileyen kaynak yüklenme ya da kullanılamama durumlarında element nesnesi ile ilişkili olarak tetiklenir. Örneğin, bir script yürütme hatasına sahipse ya da bir görsel bulunamıyor ya da geçersiz ise hata kaydı oluşur. event nesnesi, bir kullanıcı arabirimi (UI) öğesi tarafından oluşturulmuşsa UIEvent, diğer durumlarda ise Event örneğidir (instance)9.

Broken Images

Yukarıdaki örnekte bazı görsellerin yüklenemediğini (broken) görebilirsiniz. Şimdi, bu görselde olduğu gibi oluşan hataları yakalayabileceğimiz işlemleri gerçekleştirelim. Öncelikle kapsamımızı belirlememiz gerekiyor. Tüm sayfayı temel alabileceğimiz gibi belirli bir alandaki (etiket, class veya id içeriği) görsellere de odaklanabiliriz. Bu görselleri bir dizi içerisine alıp sırayla kontrol edelim.

      Array.from(document.querySelectorAll('img')).forEach(img => {
        img.addEventListener('error', (err) => {
          console.log(err);
        })
      })

Yukarıdaki kod parçacığı img etiketini bir query ile dizine aktarmakta, dinlediğimiz (eventListener) ile oluşan error kayıtlarını console üzerinden iletmekte.

Element Error

Görselde de görüldüğü üzere her hatalı img için bir kayıt oluşturulmuş durumda. Şimdilik src değeri bizim için yeterli.

console.log(`${err.type}: ${err.target.src}`);

Şimdiye kadar değindiğimiz konuları toparlayalım.

JS error nesnesini kullanarak window ve element ile ilgili hataları yakalayabilmekte ve bize iletilen bilgiler sayesinde işlemler yapabilmekteyiz. Biz bu bilgileri Google Analytics üzerinden hata ve hatanın gerçekleştiği sayfa olarak görmek istiyoruz. Hatanın yakalanması aşamasını tamamladığımıza göre Google Analytics event tanımına geçebiliriz.

Google Analytics Hata Kayıtlarının Log'lanması

Öncelikle gtag event nasıl oluşturuyorsuk hatırlayalım1011.

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

Bu bilgi ışığında hata kaydımızı Google Analytics etkinliği olarak iletelim.

Array.from(document.querySelectorAll('img')).forEach(img => {
 img.addEventListener('error', (err) => {
  gtag('event', 'error', {
   'event_category': 'Broken Image',
   'event_label': err.target.src,
   'value': 1
  });
 })
})

Evet, artık görsellerle ilgili hatalarımız görsel yolu (src) bilgisi ile Google Analytics etkinlik kaydı olarak yerini alacak. Bu aşamadan sonra raporlar içerisinde sayfa ve kullanıcı bilgileri ile birlikte kullanılabilir.

Google Analytics Events

Ek olarak, window nesnesi içerisindeki hata kayıtlarını kullanarak reklam engelleyici kullanan ziyaretçilerinizin yoğunluğunu da gözlemleyebilirsiniz. Elbette sadece reklamlar değil, tracking kodlarının çalışmasını engelleyen herhangi bir blocker da yakalanabilir hale gelecektir.

JS Errors

Yukarıdaki görsel benim kullandığım ve Google Data Studio aracılığı ile grafiğe döktüğüm hata log'larını göstermekte. Bu hata kayıtları şu şekilde grafiğe yansıtmaktayım.

Google Data Studio Error Logs

Yukarıdaki grafik tabloasu da dahil diğer konu başlıklarına geçmeden önce Google Analytics ile ilgili bir ekleme yapmak istiyorum.

Google Analytics: Exceptions

Google Analytics, bir web sayfasında meydana gelen çökmelerin veya hataların sayısını ve türünü izleyebilmeiz için bize exceptions etkinliğini sunmakta12.

gtag('event', 'exception', {
 'description': 'error mesajı',
 'fatal': false   // eğer hata kritik ise true değerini verebilirsiniz
});  

İlgili etkinlikle ilgili Google Tag Assistant üzerinden şu şekilde kayıtları görüntüleyebilirsiniz13.

Google Tag Assistant - Exception

Peki, Google Analytics üzerinden exception kayıtlarını nasıl görebiliriz?

exception aslında tıpkı diğer etkinlik (event) kayıtları gibi Davranış (Behavior) raporları altında yer alan bir boyut (dimension). Ancak, hazır raporlar arasında yer almamakta. Yani, action tanımı exception olan bu etkinlikler için ayrı ve özelleştirilmiş bir rapor oluşturmamız gerekiyor. Bu amaçla Özelleştirme (Customization) > Özel Raporlar (Custom Reports) adımlarını izleyebilirsiniz. Kullanacağımız metrikler ise Exceptions, Exceptions/Screen, Crashes ve Crashes/Screen.

Google Analytics Exception Report

Evet, artık Google Tag Manager sürecine geçebiliriz.

Google Tag Manager ve Hata Etkinliği

GTM JavaScript Hatası seçeneği ile bize hata oluşması durumunda tetiklenecek etkinlik seçeneği sunar14. Etkinliğin yanı sıra Değişkenler (Variables) altında da Error Line, Error Message ve Error URL değişkenleri yer almaktadır. Bu sayede bir hata oluşması durumunda tetiklenecek etiket ile etikete dair detayları Google Analytics panelimize aktarabilmekteyiz151617.

GTM Error Trigger
GTM Error Variables

Google Data Studio ve Hataları Görüntüleme

Google Data Studio hesabımızı Google Analytics ile ilk defa ilişkilendirdiğimizde Analytics üzerinde aktif olan tük özel alanlar doğrudan kullanılabilir hale gelecektir. Ancak, var olan bir rapora hata alanlarını ya da özel diğer alanları (etkinlikler, boyutlar, metrikler, segmentler vb.) eklemek istiyorsak öncelikle var olan eklenmiş veri kaynağını güncellememiz gerekir.

Güncelleme işlemi için Google Data Studio > Kaynak > Eklenmiş veri kaynaklarını yönet adımlarını izleyip karşımıza çıkan listeden kullanacağımız Google Analytics veri kaynağının bulunduğu satırdaki Yinele bağlantısını tıklamalıyız. Ardından ilgili Görünüm üzerinden Yeniden Bağla seçeneği ile yeni alanları da kullanılabilir hale getirmiş oluruz.

Google Data Studio - Error Log

Evet, ilgili metrik ve boyutların kullanılabilir hale gelmesinin ardından grafikler içerisinde kullanmaya başlayabiliriz.