Dokumen ini memberikan panduan komprehensif tentang cara menggunakan metode _trackTiming
.
Pengantar
Studi menunjukkan bahwa mengurangi waktu yang diperlukan untuk memuat halaman akan meningkatkan pengalaman pengguna secara keseluruhan pada situs. Google Analytics memiliki sejumlah laporan efektif yang otomatis melacak waktu pemuatan halaman. Namun, bagaimana jika Anda ingin melacak waktu yang diperlukan untuk memuat resource tertentu?
Misalnya, apakah memuat library JavaScript populer membutuhkan waktu terlalu lama, sehingga mengurangi pengalaman situs bagi pengguna tertentu?
Waktu pengguna memungkinkan Anda menjawab pertanyaan ini dengan memberikan cara native untuk melacak periode waktu di Google Analytics.
Untuk melihat contoh kerja lihat kode contoh Waktu Pengguna.
Menyiapkan Waktu Pengguna
Untuk mengumpulkan data waktu pengguna, Anda harus menggunakan metode _trackTiming
, yang mengirimkan data waktu ke Google Analytics.
_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);
Ketika parameter mewakili:
Parameter | Nilai | Wajib | Ringkasan |
---|---|---|---|
category |
string |
ya | String untuk mengelompokkan semua variabel waktu pengguna ke dalam grup logis untuk tujuan pelaporan yang lebih mudah.
Misalnya, Anda dapat menggunakan nilai jQuery jika Anda
melacak waktu yang diperlukan untuk memuat library JavaScript tertentu tersebut. |
variable |
string |
ya | String untuk menunjukkan nama
tindakan resource yang dilacak. Misalnya, Anda mungkin
menggunakan nilai JavaScript Load jika ingin melacak
waktu yang diperlukan untuk memuat library JavaScript jQuery. Perhatikan bahwa variabel yang sama dapat digunakan di beberapa kategori untuk melacak waktu peristiwa yang umum terjadi pada kategori ini seperti Javascript Load dan Page Ready Time , dll. |
time |
number |
ya | Jumlah waktu berlalu dalam milidetik untuk dilaporkan ke Google Analytics. Jika library jQuery memerlukan waktu 20 milidetik untuk dimuat, Anda akan mengirimkan nilai 20 . |
opt_label |
string |
tidak | String yang dapat digunakan untuk menambah fleksibilitas dalam memvisualisasikan waktu pengguna dalam laporan. Label juga dapat digunakan untuk berfokus pada subeksperimen yang berbeda untuk kombinasi kategori dan variabel yang sama. Misalnya jika kami
memuat jQuery dari Jaringan Penayangan Konten Google, kami akan menggunakan
nilai Google CDN . |
opt_sampleRate |
number |
tidak | Angka untuk secara manual
mengganti persentase pengunjung yang waktu kliknya dikirim ke Google Analytics.
Defaultnya ditetapkan pada jumlah yang sama dengan pengumpulan data kecepatan situs
umum dan didasarkan sebagai persentase pengunjung. Jadi, jika Anda ingin melacak hit _trackTiming untuk 100% pengunjung, Anda harus menggunakan nilai 100 .
Perhatikan bahwa setiap klik termasuk dalam batas umum 500 klik per sesi. |
Waktu Pelacakan Dihabiskan
Saat menggunakan metode _trackTiming
, Anda menentukan jumlah milidetik yang dihabiskan dalam parameter time
. Jadi, Anda sebagai developer yang harus menulis kode untuk mencatat periode waktu ini. Cara termudah
untuk melakukannya adalah dengan membuat stempel waktu di awal periode dan
membuat stempel waktu lain di akhir periode. Kemudian Anda dapat mencatat selisih dari kedua stempel waktu tersebut untuk mendapatkan waktu yang dihabiskan.
Berikut contoh sederhananya:
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']); }
Stempel waktu mulai diambil dengan membuat objek Date
baru dan mendapatkan waktu dalam milidetik. Selanjutnya, fungsi setTimeout
digunakan untuk memanggil fungsi myCallback
dalam 200
milidetik. Setelah fungsi callback dieksekusi, stempel waktu endTime
akan diambil dengan membuat objek Date
baru. Kemudian, perbedaan waktu berakhir dan waktu mulai dihitung untuk mendapatkan waktu yang dihabiskan.
Terakhir waktu yang dihabiskan dikirim ke Google Analytics.
Contoh ini sederhana, tetapi menggambarkan konsep cara melacak waktu. Mari lihat contoh yang lebih realistis.
Melacak Waktu yang Dihabiskan Memuat Resource JavaScript
Saat ini, banyak situs menyertakan library JavaScript pihak ketiga atau meminta data melalui objek JSON. Meskipun situs Anda mungkin memuat resource ini dengan cepat di rumah, resource yang sama mungkin dimuat dengan sangat lambat untuk pengguna di negara lain. Resource pemuatan yang lambat ini dapat mengurangi pengalaman situs bagi pengguna internasional.
Fitur waktu pengguna kecepatan situs dapat membantu Anda mengumpulkan dan melaporkan waktu yang diperlukan untuk memuat resource ini.
Berikut adalah contoh sederhana yang menunjukkan cara melacak waktu yang dihabiskan dari fungsi yang memuat resource JavaScript secara asinkron:
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. };
Perhatikan bahwa contoh ini sangat mirip dengan contoh sebelumnya.
Dalam contoh ini, loadJs
adalah fungsi utilitas yang memuat
resource JavaScript dengan membuat elemen skrip dan melampirkannya
secara dinamis ke DOM browser. Fungsi ini menerima dua parameter: URL sebagai string, dan fungsi callback yang akan dijalankan setelah skrip dimuat.
Di dalam loadJs
, stempel waktu awal disimpan di
startTime
. Setelah resource dimuat, fungsi callback akan dieksekusi. Dalam fungsi callback, stempel waktu akhir diambil dan digunakan untuk menghitung waktu yang diperlukan untuk memuat resource JavaScript. Waktu yang dihabiskan ini dikirim
ke Google Analytics menggunakan metode _trackTiming
.
Jadi dengan memanggil:
loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);
Akan memuat library jQuery secara asinkron dari jaringan Google Content Delivery, dan setelah selesai, jalankan fungsi callback, yang selanjutnya akan mengirim waktu pemuatan resource ke Google Analytics.
Bekerja dengan Beberapa Waktu Pengguna
Misalnya Anda ingin memuat beberapa resource JavaScript menggunakan kode di atas.
Karena variabel startTime
bersifat global, setiap kali Anda melacak awal jangka waktu, variabel startTime
akan ditimpa, sehingga menghasilkan waktu yang salah.
Jadi sebagai praktik terbaik, Anda harus mempertahankan instance unik waktu mulai dan berakhir untuk setiap resource yang ingin dilacak.
Perhatikan juga bahwa kategori dan parameter variabel ke
_trackTiming
merupakan hard code. Jadi, jika Anda menggunakan
loadJs
untuk memuat beberapa resource, Anda tidak akan
dapat membedakan setiap resource dalam laporan Google Analytics.
Kedua masalah dapat dipecahkan dengan menyimpan parameter pengaturan waktu dan _trackTiming
dalam objek JavaScript.
Membuat objek JavaScript untuk menyimpan waktu pengguna.
Berikut adalah objek JavaScript sederhana yang dapat digunakan untuk menyimpan data waktu pengguna untuk setiap resource yang dilacak:
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; }
Kita sekarang dapat menggunakan objek ini untuk membuat loadJs
berfungsi untuk beberapa permintaan.
Mengirim waktu pengguna yang disimpan
Sekarang setelah kita memiliki cara untuk menyimpan data waktu untuk setiap resource yang ingin dilacak, berikut cara memperbarui loadJs
untuk menggunakannya:
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. }
Kode di atas dimulai dengan membuat objek TrackTiming
baru
tempat kategori, variabel, dan label opsional diteruskan ke
konstruktor. Objek TrackTiming
kemudian diteruskan sebagai parameter ke fungsi loadJs
.
Di dalam loadJs
, metode startTime
dipanggil untuk mendapatkan dan menyimpan stempel waktu awal.
Pada contoh sebelumnya, fungsi callback dapat dengan mudah mengakses variabel startTime
karena bersifat global. Setelah startTime
menjadi bagian dari objek TrackTiming
, kita memerlukan cara untuk meneruskan objek ini dari fungsi loadJs ke fungsi callback.
Untuk mengatasi masalah ini, salah satu strateginya adalah menambahkan objek TrackTiming
sebagai properti ke elemen skrip. Karena fungsi callback ini dijalankan dari metode onload
skrip, callback akan meneruskan objek peristiwa sebagai parameter. Objek peristiwa ini selanjutnya dapat digunakan untuk mengambil objek skrip asli yang mengaktifkan peristiwa tersebut, dan objek skrip tersebut selanjutnya dapat digunakan untuk mengakses objek TrackTiming
kita.
Setelah kita dapat mengakses objek TrackTiming
asli, skrip
selanjutnya dapat mengakhiri waktu dan mengirim data.
Lihat demo langsung contoh ini di situs contoh kami.
Pola penambahan objek TrackTiming ini sebagai properti ke objek
yang dilacak cenderung berfungsi dengan baik untuk melacak mekanisme pemuatan asinkron
lainnya seperti menggunakan objek XMLHttpRequest
.
Melacak XMLHttpRequests
Cara umum lainnya untuk memuat resource halaman web secara asinkron adalah dengan menggunakan
objek XMLHttpRequest
. Waktu yang diperlukan untuk memuat resource ini juga dapat dilacak menggunakan metode _trackTiming
dan objek TimeTracker
.
Berikut adalah contoh yang memuat file kutipan dari server.
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. } } }
Contoh ini terlihat sangat mirip dengan contoh loadJs. Lihat demo langsungnya di sini.
Menghindari Pengiriman Data yang Buruk
Pada contoh di atas, untuk mendapatkan waktu yang dihabiskan, kode akan mengurangi waktu berakhir dari waktu mulai. Hal ini umumnya berfungsi dengan baik selama waktu mulai kurang dari waktu berakhir. Namun, hal ini dapat menjadi masalah jika waktu di browser berubah. Jika pengguna mengubah waktu mesin setelah waktu mulai yang ditetapkan, data yang buruk dapat dikirim ke Google Analytics. Masalah besar saat mengirim satu nilai besar yang buruk adalah nilainya akan mendistorsi metrik rata-rata dan total Anda.
Jadi, sebaiknya pastikan waktu yang dihabiskan lebih besar dari 0 dan kurang dari beberapa waktu, sebelum Anda mengirim data ke Google Analytics. Kita dapat mengubah metode pengiriman TimeTracker
di atas, untuk melakukan pemeriksaan ini:
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; }
Mengganti Frekuensi Sampel dan Proses Debug
Metode _trackTiming
hanya mengirimkan data ke
Google Analytics dengan kecepatan yang sama untuk semua metrik kecepatan situs
yang dikumpulkan oleh Google Analytics. Secara default, opsi ini disetel ke 1% dari semua pengunjung.
Untuk situs dengan jumlah traffic yang besar, setelan default seharusnya tidak masalah. Namun, untuk situs yang memiliki traffic lebih sedikit, Anda dapat meningkatkan frekuensi sampel dengan menyetel parameter frekuensi sampel opsional. Contoh:
_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);
Akan mengumpulkan data _trackTiming dari 50% pengunjung.
Atau, Anda dapat menetapkan metode
_setSiteSpeedSampleRate
untuk menetapkan rasio sampel untuk
semua pengaturan waktu kecepatan situs termasuk metode _trackTiming
. Misalnya:
_gaq.push([‘_setSiteSpeedSampleRate’, 50]);
Juga akan mengumpulkan data _trackTiming
dari 50% pengunjung.
Biasanya saat menguji dan memverifikasi penerapan Google Analytics, Anda memiliki traffic yang sangat sedikit ke situs yang diuji. Jadi, sebaiknya tingkatkan frekuensi sampel hingga 100% saat melakukan pengujian.
Melacak Peristiwa Waktu Lain
Meskipun semua contoh di atas berfokus pada penggunaan metode _trackTiming
untuk melacak waktu yang diperlukan untuk memuat resource, metode ini
juga dapat digunakan untuk melacak durasi waktu secara umum. Misalnya, Anda dapat melacak:
- Waktu yang dihabiskan pengunjung untuk menonton video.
- Waktu yang diperlukan untuk menyelesaikan level dalam game.
- Waktu yang dihabiskan pengunjung untuk membaca bagian dari situs.
Dalam setiap kasus ini, Anda dapat menggunakan kembali objek JavaScript TimeTracker
yang sama seperti yang ditampilkan di atas untuk menyederhanakan pengumpulan dan pengiriman
waktu yang dihabiskan ke data Google Analytics.