Kullanıcı Zamanlamaları - Web İzleme (ga.js)

Bu dokümanda, _trackTiming yönteminin nasıl kullanılacağı hakkında kapsamlı bir rehber sunulmaktadır.

Giriş

Çalışmalar, bir sayfanın yüklenme süresini azaltmanın sitenin genel kullanıcı deneyimini iyileştirdiğini göstermiştir. Google Analytics'te, sayfa yüklenme süresini otomatik olarak izleyen birçok etkili rapor bulunmaktadır. Peki ya belirli bir kaynağın yüklenmesi için geçen süreyi izlemek isterseniz ne olur?

Örneğin, popüler bir JavaScript kitaplığının yüklenmesi çok uzun sürer mi ve belirli kullanıcıların site deneyimini kötüleştirir mi?

Kullanıcı zamanlamaları, Google Analytics'te belirli bir süreyi izlemek için yerel bir yöntem sunarak bu soruyu yanıtlamanıza olanak tanır.

Çalışan bir örnek görmek için Kullanıcı Zamanlamaları örnek koduna göz atın.

Kullanıcı Zamanlamalarını Ayarlama

Kullanıcı zamanlama verilerini toplamak için Google Analytics'e zaman verisi gönderen _trackTiming yöntemini kullanmanız gerekir.

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

Parametreler aşağıdakileri gösterir:

Parametre Değer Gerekli Özet
category string evet Raporlama amaçlarının daha kolay olması için tüm kullanıcı zamanlama değişkenlerini mantıksal gruplar halinde sınıflandıran bir dize. Örneğin, belirli bir JavaScript kitaplığının yüklenmesi için geçen süreyi izliyorsanız jQuery değerini kullanabilirsiniz.
variable string evet İzlenen kaynağın işleminin adını belirten bir dize. Örneğin, jQuery JavaScript kitaplığının yüklenme süresini izlemek isterseniz JavaScript Load değerini kullanabilirsiniz. Aynı değişkenlerin, Javascript Load ve Page Ready Time gibi bu kategorilerde yaygın olan bir etkinliğin zamanlarını izlemek için birden fazla kategoride kullanılabileceğini unutmayın.
time number evet Google Analytics'e raporlamak için geçen süreyi milisaniye cinsinden belirtir. jQuery kitaplığının yüklenmesi 20 milisaniye sürdüyse 20 değerini gönderirsiniz.
opt_label string no Raporlarda kullanıcı zamanlamalarını görselleştirmede esneklik sağlamak için kullanılabilecek bir dize. Etiketler, aynı kategori ve değişken kombinasyonu için farklı alt denemelere odaklanmak amacıyla da kullanılabilir. Örneğin, jQuery'yi Google İçerik Yayınlama Ağı'ndan yüklediysek Google CDN değerini kullanırız.
opt_sampleRate number no Zamanlama isabetleri Google Analytics'e gönderilen ziyaretçilerin yüzdesini manuel olarak geçersiz kılmak için kullanılan bir sayıdır. Varsayılan değer, genel site hızı veri toplama işlemiyle aynı değerde ayarlanır ve ziyaretçi yüzdesine dayanır. Dolayısıyla, ziyaretçilerin% 100'ü için _trackTiming isabetlerini izlemek isterseniz 100 değerini kullanmanız gerekir. Her isabetin, oturum başına genel 500 isabet sınırına dahil edildiğini unutmayın.

Başa Dön

Harcanan Süreyi İzleme

_trackTiming yöntemini kullandığınızda time parametresinde harcanan milisaniye miktarını belirtirsiniz. Dolayısıyla, bu süreyi yakalamak için kod yazmak geliştirici olarak size bağlıdır. Bunu yapmanın en kolay yolu, belirli bir dönemin başında bir zaman damgası oluşturmak ve dönemin sonunda başka bir zaman damgası oluşturmaktır. Ardından, harcanan süreyi öğrenmek için her iki zaman damgası arasındaki farkı belirleyebilirsiniz.

Basit bir örnek verelim:

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

Başlangıç zaman damgası, yeni bir Date nesnesi oluşturularak ve saat cinsinden milisaniye cinsinden alınır. Ardından setTimeout işlevi, 200 milisaniye içinde myCallback işlevini çağırmak için kullanılır. Geri çağırma işlevi yürütüldükten sonra, yeni bir Date nesnesi oluşturularak endTime zaman damgası alınır. Daha sonra bitiş ve başlangıç zamanları arasındaki fark, harcanan süreyi bulmak için hesaplanır. Son olarak, harcanan süre Google Analytics'e gönderilir.

Bu örnek çok önemsizdir, ancak zamanın nasıl izleneceği kavramını gösterir. Biraz daha gerçekçi bir örnek verelim.

Başa Dön

JavaScript Kaynağı Yüklemeye Harcanan Süreyi İzleme

Günümüzde birçok site, üçüncü taraf JavaScript kitaplıkları içeriyor veya JSON nesneleri aracılığıyla veri isteğinde bulunuyor. Siteniz bu kaynakları evde hızlı bir şekilde yükleyebilir ancak aynı kaynaklar diğer ülkelerdeki kullanıcılar için çok yavaş yüklenebilir. Bu yavaş yüklenen kaynaklar, uluslararası kullanıcılar için site deneyimini olumsuz etkileyebilir.

Site hızı kullanıcı zamanlaması özelliği, bu kaynakların yüklenmesinin ne kadar sürdüğünü toplayıp raporlamanıza yardımcı olabilir.

Aşağıda, JavaScript kaynaklarını eşzamansız olarak yükleyen bir işlevin harcadığı sürenin nasıl izleneceğini gösteren basit bir örnek verilmiştir:

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

Bu örneğin önceki örneğe çok benzediğine dikkat edin.

Bu örnekte loadJs, dinamik bir şekilde komut dosyası öğesi oluşturup bunu tarayıcının DOM'sine ekleyerek JavaScript kaynaklarını yükleyen bir yardımcı program işlevidir. İşlev iki parametreyi kabul eder: dize olarak URL ve komut dosyası yüklendikten sonra yürütülecek bir geri çağırma işlevi.

loadJs içinde, başlangıç zaman damgası startTime olarak depolanır. Kaynak yüklendikten sonra geri çağırma işlevi yürütülür. Geri çağırma işlevinde, bitiş zaman damgası alınır ve JavaScript kaynağını yüklemek için gereken süreyi hesaplamak üzere kullanılır. Harcanan bu süre, _trackTiming yöntemi kullanılarak Google Analytics'e gönderilir.

Örneğin, şu numarayı arayarak:

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

jQuery kitaplığı, Google İçerik Yayınlama ağından eşzamansız olarak yüklenir ve tamamlandığında geri çağırma işlevini yürütür. Bu işlev, kaynağın yükleme süresini Google Analytics'e gönderir.

Başa Dön

Birden Fazla Kullanıcı Zamanlamasıyla Çalışma

Yukarıdaki kodu kullanarak birden çok JavaScript kaynağı yüklemek istediğinizi varsayalım. startTime değişkeni genel olduğundan, bir dönemin başlangıcını her izlediğinizde startTime değişkeninin üzerine yazılır. Bu durumda, yanlış zaman harcanır.

Bu nedenle en iyi uygulama olarak, izlemek istediğiniz her kaynak için başlangıç ve bitiş zamanının benzersiz bir örneğini saklamanız gerekir.

Ayrıca, _trackTiming için kategori ve değişken parametrelerinin sabit kodlandığına dikkat edin. Bu nedenle, birden fazla kaynak yüklemek için loadJs kullandığınızda Google Analytics raporlarındaki her bir kaynağı ayırt edemezsiniz.

Her iki problem de zamanlama ve _trackTiming parametreleri bir JavaScript nesnesinde depolanarak çözülebilir.

Kullanıcı zamanlamalarını depolamak için JavaScript nesnesi oluşturma.

İzlenen her kaynak için kullanıcı zamanlama verilerini depolamak üzere kullanılabilecek basit bir JavaScript nesnesini burada görebilirsiniz:

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

Artık bu nesneyi loadJs ürününün birden fazla istekte çalışması için kullanabiliriz.

Depolanmış kullanıcı zamanlamaları gönderiliyor

Artık izlemek istediğimiz her kaynak için zamanlama verilerini depolayabileceğimiz bir yöntemimiz olduğuna göre, loadJs metriğini kullanmak üzere şu şekilde güncelleyebiliriz:

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

Yukarıdaki kod, kategori, değişken ve isteğe bağlı etiketin oluşturucuya iletildiği yeni bir TrackTiming nesnesi oluşturarak başlar. Daha sonra TrackTiming nesnesi, loadJs işlevine parametre olarak aktarılır.

loadJs içinde, başlangıç zaman damgasını almak ve depolamak için startTime yöntemi çağrılır.

Önceki örnekte, geri çağırma işlevi startTime değişkenine global olduğu için kolayca erişebiliyordu. startTime artık TrackTiming nesnesinin bir parçası olduğuna göre bu nesneyi loadJs işlevinden geri çağırma işlevine geçirmek için bir yönteme ihtiyacımız vardır.

Bu sorunu çözmek için stratejilerden biri, TrackTiming nesnesini komut dosyası öğesine özellik olarak eklemektir. Geri çağırma işlevi onload komut dosyası yönteminden yürütüldüğünden geri çağırma işlevine parametre olarak bir etkinlik nesnesi aktarılır. Bu etkinlik nesnesi, daha sonra etkinliği tetikleyen orijinal komut dosyası nesnesini almak için kullanılabilir ve bu komut dosyası nesnesi, TrackTiming nesnemize erişmek için kullanılabilir.

Orijinal TrackTiming nesnemize erişebildiğimizde komut dosyası zamanı sonlandırabilir ve verileri gönderebilir.

Örnek sitemizde bu örneğin canlı demosunu görebilirsiniz.

TrackTiming nesnesini izlenen nesneye özellik olarak ekleme kalıbı, XMLHttpRequest nesnesini kullanma gibi diğer eşzamansız yükleme mekanizmalarını izlemek için genellikle iyi sonuç verir.

Başa Dön

XMLHttpRequests'i İzleme

Web sayfası kaynaklarını eşzamansız olarak yüklemenin yaygın olarak kullanılan bir başka yolu da XMLHttpRequest nesnesini kullanmaktır. Bu kaynakların yüklenmesi için geçen süre hem _trackTiming yöntemi hem de TimeTracker nesnesi kullanılarak izlenebilir.

Alıntı dosyasını sunucudan yükleyen bir örneği burada görebilirsiniz.

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

Bu örnek, loadJs örneğine çok benziyor. Canlı demoyu buradan izleyebilirsiniz.

Başa Dön

Kötü Veriler Göndermekten Kaçının

Yukarıdaki örneklerde kod, harcanan süreyi öğrenmek için bitiş zamanını başlangıç zamanından çıkarır. Bu genellikle başlangıç zamanı bitiş zamanından kısa olduğu sürece işe yarar. Ancak, tarayıcıdaki zaman değişirse bu durum bir soruna dönüşebilir. Kullanıcı, başlangıç zamanı belirlendikten sonra makine zamanını değiştirirse Google Analytics'e hatalı veriler gönderilebilir. Tek bir hatalı değer göndermekle ilgili en büyük sorun, ortalama ve toplam metriklerinizi çarpıtmasıdır.

Bu nedenle, verileri Google Analytics'e göndermeden önce, harcanan sürenin 0'dan fazla ve belirli bir süreden kısa olduğundan emin olmak genellikle en iyi uygulamadır. Bu kontrolü gerçekleştirmek için yukarıdaki TimeTracker gönderme yöntemini değiştirebiliriz:

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

Örnek Hızını ve Hata Ayıklamayı Geçersiz Kılma

_trackTiming yöntemi, verileri Google Analytics'e yalnızca Google Analytics tarafından toplanan tüm site hızı metrikleri için aynı hızda gönderir. Bu değer, varsayılan olarak tüm ziyaretçilerin% 1'ine ayarlıdır.

Trafiği yoğun olan siteler için varsayılan ayar uygun olmalıdır. Ancak daha az trafiğe sahip siteler için isteğe bağlı örnek oranı parametresini ayarlayarak örnek hızını artırabilirsiniz. Örneğin: 

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

Ziyaretçilerin% 50'sinden _trackTiming verilerini toplayacaktır.

Alternatif olarak, _trackTiming yöntemi dahil olmak üzere tüm site hızı zamanlamaları için örnek hızını ayarlamak üzere _setSiteSpeedSampleRate yöntemini ayarlayabilirsiniz. Örneğin:

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

Ayrıca, ziyaretçilerin% 50'sinden _trackTiming verileri de toplayacaktır.

Genellikle bir Google Analytics uygulamasını test edip doğruladığınızda, test ettiğiniz siteye çok az trafik alırsınız. Bu nedenle, test sırasında örnek hızını% 100'e yükseltmek genellikle yararlıdır.

Başa Dön

Diğer Zaman Etkinliklerini İzleme

Yukarıdaki örnek, kaynakların yüklenmesinin ne kadar sürdüğünü izlemek için _trackTiming yöntemini kullanmaya odaklansa da bu yöntem genel süre sürelerini izlemek için de kullanılabilir. Örneğin, şunları izleyebilirsiniz:

  • Bir ziyaretçinin bir video izleyerek geçirdiği süre.
  • Bir oyunda bir seviyeyi tamamlamak için gereken süre.
  • Bir ziyaretçinin, web sitesindeki bir bölümü okurken geçirdiği süre.

Bu durumların her birinde, harcanan zamanın Google Analytics'e gönderilmesini ve toplanmasını basitleştirmek için yukarıda sunulan TimeTracker JavaScript nesnesini yeniden kullanabilirsiniz.