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. |
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.
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.
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.
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.
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.
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.