Baris terakhir cuplikan pengukuran JavaScript menambahkan perintah send ke antrean perintah ga() untuk mengirim kunjungan halaman ke Google Analisis:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Objek yang melakukan pengiriman adalah pelacak yang dijadwalkan untuk dibuat di baris kode sebelumnya, dan data yang dikirim adalah data yang disimpan di pelacak tersebut.
Panduan ini menjelaskan berbagai cara untuk mengirim data ke Google Analytics dan menjelaskan cara mengontrol data yang dikirim.
Hit, jenis hit, dan Measurement Protocol
Ketika pelacak mengirim data ke Google Analytics, pelacak disebut mengirim hit, dan setiap hit harus memiliki jenis hit. Tag Google Analytics mengirim hit dengan jenis pageview; jenis hit lain mencakup screenview, event, transaction, item, social, exception, dan timing. Panduan ini menguraikan konsep dan metode yang umum untuk semua jenis hit. Masing-masing panduan untuk setiap jenis hit dapat ditemukan di bagian Mengukur interaksi pengguna umum di navigasi sebelah kiri.
Hit adalah permintaan HTTP, yang terdiri dari pasangan kolom dan nilai yang dienkode sebagai string kueri, dan dikirim ke Measurement Protocol.
Jika alat developer browser terbuka saat Anda memuat halaman yang menggunakan analytics.js, Anda dapat melihat hit yang dikirim di tab jaringan. Cari permintaan yang dikirim ke google-analytics.com/collect.
Data yang dikirim
Saat mengirim hit ke Measurement Protocol, pelacak mengirim semua kolom yang saat ini disimpan dan merupakan parameter Measurement Protocol yang valid. Misalnya, kolom seperti title dan location dikirim, tetapi cookieDomain dan hitCallback tidak dikirim.
Dalam beberapa kasus, Anda ingin mengirim kolom ke Google Analytics untuk hit saat ini, tetapi tidak untuk hit berikutnya. Contohnya adalah hit peristiwa dengan kolom eventAction dan eventLabel akan relevan dengan hit saat ini saja.
Untuk mengirim kolom dengan hit saat ini saja, Anda dapat meneruskannya sebagai argumen ke metode send. Agar data kolom dikirim dengan semua hit berikutnya, Anda harus memperbarui pelacak menggunakan metode set.
Metode pengiriman
Metode send pelacak dapat dipanggil langsung di objek pelacak itu sendiri atau dengan menambahkan perintah send ke antrean perintah ga(). Karena sering kali Anda tidak memiliki referensi ke objek pelacak, menggunakan antrean perintah ga() adalah cara yang direkomendasikan untuk mengirim data pelacak ke Google Analytics.
Menggunakan antrean perintah ga()
Signature untuk menambahkan perintah send ke antrean perintah ga() adalah sebagai berikut:
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);
Seperti yang disebutkan di atas, nilai yang ditentukan melalui parameter hitType, ...fields, dan fieldsObject dikirim untuk hit saat ini saja. Parameter tidak disimpan di objek pelacak, dan tidak dikirim dengan hit berikutnya.
Jika salah satu kolom yang diteruskan dengan perintah send sudah ditetapkan di objek pelacak, nilai yang diteruskan dalam perintah tersebut akan digunakan, bukan nilai yang disimpan di pelacak.
Panggilan ke perintah send harus menentukan hitType, dan bergantung pada jenis yang ditentukan, parameter lain mungkin juga diperlukan. Lihat masing-masing panduan untuk mengukur interaksi pengguna umum di navigasi sebelah kiri untuk mengetahui detail selengkapnya.
Cara termudah untuk menggunakan perintah send, yang berfungsi untuk semua jenis hit, adalah meneruskan semua kolom menggunakan parameter fieldsObject. Contoh:
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: 'cats.mp4'
});
Untuk kemudahan, jenis hit tertentu mengizinkan kolom yang biasa digunakan untuk diteruskan langsung sebagai argumen ke perintah send. Misalnya, perintah send di atas untuk jenis hit "peristiwa" dapat ditulis ulang sebagai:
ga('send', 'event', 'Video', 'play', 'cats.mp4');
Untuk daftar lengkap kolom yang dapat diteruskan sebagai argumen untuk berbagai jenis hit, lihat bagian "parameter" dalam referensi metode pengiriman.
Menggunakan pelacak bernama
Jika menggunakan pelacak bernama, Anda dapat meneruskan namanya di string perintah, bukan pelacak default.
Perintah send berikut akan dipanggil di pelacak bernama "myTracker":
ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');
Di objek pelacak itu sendiri
Jika memiliki referensi ke objek pelacak, Anda dapat memanggil metode send pelacak secara langsung:
ga(function(tracker) {
tracker.send('event', 'Video', 'play', 'cats.mp4');
});
Mengetahui kapan hit telah dikirim
Dalam beberapa kasus, Anda perlu mengetahui kapan hit telah dikirim ke Google Analytics, sehingga Anda dapat segera mengambil tindakan. Hal ini umum terjadi jika Anda perlu mencatat interaksi tertentu yang akan mengarahkan pengguna keluar dari halaman saat ini. Banyak browser berhenti mengeksekusi JavaScript begitu halaman mulai menghapus muatan, yang berarti perintah analytics.js untuk mengirim hit mungkin tidak pernah berjalan.
Contohnya adalah ketika Anda ingin mengirim peristiwa ke Google Analytics untuk mencatat bahwa pengguna mengklik tombol kirim formulir. Dalam sebagian besar kasus, mengklik tombol kirim akan langsung memulai pemuatan halaman berikutnya, dan perintah ga('send', ...) tidak akan berjalan.
Solusi dalam hal ini adalah dengan mencegat peristiwa untuk menghentikan halaman menghapus muatan. Anda kemudian dapat mengirim hit ke Google Analytics seperti biasa, dan setelah hit selesai dikirim, Anda dapat mengirim ulang formulir secara terprogram.
hitCallback
Jika ingin diberi tahu saat hit selesai dikirim, tetapkan kolom hitCallback. hitCallback adalah fungsi yang akan dipanggil begitu hit berhasil dikirim.
Contoh berikut menunjukkan cara membatalkan tindakan pengiriman default formulir, mengirim klik ke Google Analytics, lalu mengirim ulang formulir menggunakan fungsi hitCallback:
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: function() {
form.submit();
}
});
});
Mengatasi waktu tunggu
Contoh di atas berfungsi dengan baik, tetapi memiliki satu masalah serius. Jika (untuk alasan apa pun) library analytics.js gagal dimuat, fungsi hitCallback tidak akan pernah berjalan. Selain itu, jika fungsi hitCallback tidak pernah berjalan, pengguna tidak akan pernah bisa mengirim formulir tersebut.
Setiap kali Anda menempatkan fungsi situs penting di dalam fungsi hitCallback, Anda harus selalu menggunakan fungsi waktu tunggu untuk menangani kasus saat library analytics.js gagal dimuat.
Contoh berikut ini memperbarui kode di atas untuk menggunakan waktu tunggu. Jika satu detik berlalu setelah pengguna mengklik tombol kirim dan hitCallback belum berjalan, formulir akan tetap dikirim ulang.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Creates a timeout to call `submitForm` after one second.
setTimeout(submitForm, 1000);
// Keeps track of whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where `hitCallback` fires normally.
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: submitForm
});
});
Jika Anda menggunakan pola di atas di banyak tempat di seluruh situs, waktu tunggu mungkin akan lebih mudah ditangani melalui pembuatan fungsi utilitas.
Fungsi utilitas berikut menerima fungsi sebagai input dan menampilkan fungsi baru. Jika fungsi yang ditampilkan dipanggil sebelum periode waktu tunggu (waktu tunggu default adalah satu detik), fungsi ini akan menghapus waktu tunggu dan memanggil fungsi input. Jika fungsi yang ditampilkan tidak dipanggil sebelum periode waktu tunggu, fungsi input tetap akan dipanggil.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
Sekarang Anda dapat dengan mudah menggabungkan semua fungsi hitCallback dengan waktu tunggu untuk memastikan situs Anda berfungsi seperti yang diharapkan, bahkan saat hit Anda gagal dikirim atau library analytics.js tidak pernah dimuat.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: createFunctionWithTimeout(function() {
form.submit();
})
});
});
Menentukan mekanisme transpor yang berbeda
Secara default, analytics.js memilih metode HTTP dan mekanisme transpor yang akan digunakan untuk mengirim klik secara optimal. Ketiga opsi tersebut adalah'image' (menggunakan objek Image), 'xhr' (menggunakan objek XMLHttpRequest), atau'beacon' menggunakan metode navigator.sendBeacon baru.
Dua metode sebelumnya membagikan masalah yang dijelaskan di bagian sebelumnya (ketika hit sering kali tidak dikirim jika halaman dihapus muatannya). Sebaliknya, metode navigator.sendBeacon adalah fitur HTML baru yang dibuat untuk mengatasi masalah ini.
Jika browser pengguna mendukung navigator.sendBeacon, Anda dapat menentukan 'beacon' sebagai mekanisme transport dan tidak perlu menetapkan hit callback.
Kode berikut menetapkan mekanisme transpor ke 'beacon' di browser yang mendukungnya.
ga('create', 'UA-XXXXX-Y', 'auto');
// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');
Langkah berikutnya
Mengukur jenis interaksi pengguna tertentu terkadang membutuhkan penerapan yang kompleks. Namun, dalam banyak kasus, penerapan tersebut telah dikembangkan dan tersedia sebagai plugin analytics.js. Panduan berikutnya menjelaskan cara menggunakan plugin analytics.js dengan antrean perintah ga().