Waktu Pengguna - Pelacakan Web (ga.js)

Dokumen ini memberikan panduan komprehensif tentang cara menggunakan metode _trackTiming.

Pengantar

Studi menunjukkan bahwa mengurangi waktu pemuatan halaman meningkatkan pengalaman pengguna situs secara keseluruhan. Google Analytics memiliki sejumlah laporan andal yang otomatis melacak waktu muat halaman. Namun, bagaimana jika Anda ingin melacak waktu yang diperlukan untuk memuat resource tertentu?

Misalnya, apakah pemuatan library JavaScript populer memerlukan waktu terlalu lama, sehingga mengurangi pengalaman situs untuk pengguna tertentu?

Waktu pengguna memungkinkan Anda menjawab pertanyaan ini dengan menyediakan cara native untuk melacak jangka waktu di Google Analytics.

Untuk melihat contoh yang berfungsi, 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]);

Tempat 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.
variable string ya String untuk menunjukkan nama tindakan resource yang dilacak. Misalnya, Anda dapat 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 guna melacak waktu untuk peristiwa yang umum untuk 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 harus mengirimkan nilai 20.
opt_label string no String yang dapat digunakan untuk menambah fleksibilitas dalam memvisualisasikan waktu pengguna dalam laporan. Label juga dapat digunakan untuk berfokus pada berbagai subeksperimen untuk kombinasi kategori dan variabel yang sama. Misalnya, jika kita memuat jQuery dari Jaringan Penayangan Konten Google, kami akan menggunakan nilai Google CDN.
opt_sampleRate number no Angka untuk secara manual mengganti persentase pengunjung yang hit waktunya dikirim ke Google Analytics. Jumlah default ditetapkan pada jumlah yang sama dengan pengumpulan data kecepatan situs umum dan didasarkan pada persentase pengunjung. Jadi, jika Anda ingin melacak hit _trackTiming untuk 100% pengunjung, Anda harus menggunakan nilai 100. Perhatikan bahwa setiap hit dihitung terhadap batas umum 500 hit per sesi.

Kembali ke Atas

Waktu Pelacakan yang Dihabiskan

Saat menggunakan metode _trackTiming, Anda menentukan jumlah waktu yang dihabiskan dalam milidetik dalam parameter time. Jadi terserah Anda, sebagai developer, untuk menulis kode yang akan 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 kedua stempel waktu tersebut untuk mendapatkan waktu yang dihabiskan.

Berikut contohnya yang sederhana:

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 awal 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 diambil dengan membuat objek Date baru. Kemudian, selisih waktu berakhir dan mulai dihitung untuk mendapatkan waktu yang dihabiskan. Waktu terakhir yang dihabiskan akan dikirim ke Google Analytics.

Contoh ini sepele, tetapi menggambarkan konsep cara melacak waktu. Mari lihat contoh yang lebih realistis.

Kembali ke Atas

Waktu Pelacakan yang Dihabiskan untuk Memuat Resource JavaScript

Saat ini, banyak situs menyertakan library JavaScript pihak ketiga atau meminta data melalui objek JSON. Meskipun situs Anda dapat memuat resource ini dengan cepat di rumah, resource yang sama mungkin dimuat dengan sangat lambat bagi pengguna di negara lain. Resource pemuatan yang lambat ini dapat menurunkan pengalaman situs bagi pengguna internasional.

Fitur pengaturan waktu pengguna kecepatan situs dapat membantu Anda mengumpulkan dan melaporkan waktu yang dibutuhkan untuk memuat resource ini.

Berikut adalah contoh sederhana yang menunjukkan cara melacak waktu yang dihabiskan suatu 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 secara dinamis dan melampirkannya 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 Penayangan Konten Google, dan setelah selesai, mengeksekusi fungsi callback, yang kemudian akan mengirimkan 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 periode waktu, variabel startTime akan ditimpa, sehingga menghasilkan waktu yang salah untuk dihabiskan.

Jadi sebagai praktik terbaik, Anda harus mempertahankan instance unik waktu mulai dan berakhir untuk setiap resource yang ingin dilacak.

Perhatikan juga bahwa parameter kategori dan variabel untuk _trackTiming merupakan hard code. Jadi, jika menggunakan loadJs untuk memuat beberapa resource, Anda tidak akan dapat membedakan setiap resource dalam laporan Google Analytics.

Kedua masalah tersebut dapat diselesaikan dengan menyimpan parameter waktu dan _trackTiming di 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;
}

Sekarang kita dapat menggunakan objek ini untuk membuat loadJs berfungsi untuk beberapa permintaan.

Mengirim waktu pengguna yang disimpan

Setelah kita memiliki cara 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.

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 dijalankan dari metode onload skrip, objek peristiwa diteruskan sebagai parameter ke callback. Objek peristiwa ini selanjutnya dapat digunakan untuk mengambil objek skrip asli yang mengaktifkan peristiwa, dan objek skrip tersebut dapat digunakan untuk mengakses objek TrackTiming kita.

Setelah kita dapat mengakses objek TrackTiming asli, skrip kemudian dapat mengakhiri waktu dan mengirimkan data.

Lihat demo langsung dari contoh ini di situs contoh kami.

Pola penambahan objek TrackTiming ini sebagai properti ke objek yang sedang 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 langsung di sini.

Kembali ke Atas

Hindari Mengirim Data Buruk

Pada contoh di atas, untuk mendapatkan waktu yang dihabiskan, kode mengurangi waktu berakhir dari waktu mulai. Hal ini umumnya berfungsi dengan baik karena waktu mulai lebih kecil dari waktu berakhir. Namun, hal ini dapat menjadi masalah jika waktu di browser berubah. Jika pengguna mengubah waktu mesin setelah waktu mulai ditetapkan, data yang buruk dapat dikirim ke Google Analytics. Masalah besar saat mengirim satu nilai buruk yang besar adalah nilai tersebut akan mendistorsi metrik rata-rata dan total metrik Anda.

Jadi, secara umum, sebaiknya pastikan waktu yang dihabiskan lebih besar dari 0 dan lebih sedikit daripada jangka waktu tertentu, 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 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, persentase ini ditetapkan ke 1% dari semua pengunjung.

Untuk situs dengan jumlah traffic besar, defaultnya seharusnya tidak ada masalah. Namun, untuk situs dengan lebih sedikit traffic, Anda dapat meningkatkan frekuensi sampel dengan menetapkan 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 guna menetapkan frekuensi 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 Anda menguji dan memverifikasi penerapan Google Analytics, traffic ke situs yang Anda uji menjadi sangat sedikit. Jadi, sebaiknya tingkatkan frekuensi sampel hingga 100% saat pengujian.

Kembali ke Atas

Melacak Peristiwa Waktu Lainnya

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 tertentu pada situs.

Dalam setiap kasus ini, Anda dapat menggunakan kembali objek JavaScript TimeTracker yang sama yang ditampilkan di atas untuk menyederhanakan pengumpulan dan pengiriman data waktu yang dihabiskan ke Google Analytics.