Waktu Pengguna - Pelacakan Web (ga.js)

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.

Kembali ke Atas

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.

Kembali ke Atas

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.

Kembali ke Atas

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.

Kembali ke Atas

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.

Kembali ke Atas

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.

Kembali ke Atas

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.