Mengirim data ke Google Analytics dengan gtag.js

Halaman ini menjelaskan cara menggunakan perintah gtag.js untuk mengirim data dari situs Anda ke Google Analytics.

Mengirim data dengan perintah event

Setelah Anda menambahkan cuplikan global ke halaman web, gunakan perintah event untuk mengirim data ke Google Analytics. Misalnya, gunakan perintah event berikut untuk menunjukkan bahwa pengguna telah login menggunakan Akun Google mereka:

gtag('event', 'login', {'method': 'Google'});

Pelajari perintah event lebih lanjut di referensi API.

Merutekan data ke grup dan properti

Anda dapat mengirim satu kumpulan informasi pengukuran ke satu atau beberapa ID properti Google Analytics, dan kumpulan informasi lainnya ke ID properti lainnya. Anda dapat mengatur properti ke dalam grup dan merutekan data ke properti tersebut.

Misalnya, contoh kode berikut menggambarkan cara merutekan peristiwa sign_in ke grup 'agency' yang mencakup dua properti Google Analytics.

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

Pelajari lebih lanjut cara mengelompokkan dan merutekan data.

Mengetahui kapan peristiwa telah dikirim

Terkadang Anda perlu mengetahui kapan peristiwa berhasil 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 berikutnya mulai dimuat, yang berarti perintah event gtag.js Anda mungkin tidak pernah berjalan.

Misalnya, Anda mungkin ingin mengirim peristiwa ke Google Analytics untuk mencatat bahwa pengguna telah mengklik tombol kirim di formulir. Dalam sebagian besar kasus, mengklik tombol kirim akan langsung memulai pemuatan halaman berikutnya sebelum perintah event memiliki kesempatan untuk dieksekusi.

Solusinya adalah dengan mencegat peristiwa untuk menghentikan halaman berikutnya dimuat, sehingga Anda dapat mengirim peristiwa ke Google Analytics. Setelah peristiwa dikirim, kirimkan formulir secara terprogram.

Menerapkan fungsi callback peristiwa

Anda dapat menerapkan fungsi callback peristiwa yang akan dipanggil segera setelah peristiwa berhasil dikirim.

Contoh berikut menunjukkan cara membatalkan tindakan pengiriman default formulir, mengirim peristiwa ke Google Analytics, lalu mengirim ulang formulir menggunakan fungsi callback peristiwa:

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

Menangani waktu tunggu

Ada satu kekurangan dari contoh di atas: Jika library gtag.js gagal dimuat, fungsi callback peristiwa tidak akan pernah berjalan dan pengguna tidak akan dapat mengirim formulir.

Setiap kali Anda menempatkan fungsi situs penting di dalam fungsi callback peristiwa, Anda harus selalu menggunakan fungsi waktu tunggu untuk menangani kasus saat library gtag.js gagal dimuat.

Contoh berikut ini meningkatkan kode di atas untuk menggunakan waktu tunggu. Jika satu detik berlalu setelah pengguna mengklik tombol kirim dan fungsi callback peristiwa 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);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function 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.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

Jika Anda menggunakan pola di atas di seluruh situs, buat fungsi utilitas untuk menangani waktu tunggu.

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 menggabungkan semua fungsi callback peristiwa dengan waktu tunggu untuk memastikan situs Anda berfungsi seperti yang diharapkan, bahkan saat peristiwa Anda gagal terkirim atau library gtag.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.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

Menentukan mekanisme transpor yang berbeda-beda

Secara default, gtag.js memilih metode HTTPS dan mekanisme transpor untuk mengirim hit secara optimal. Ketiga opsi tersebut adalah:

  • 'image' (menggunakan objek Image)
  • 'xhr' (menggunakan objek XMLHttpRequest)
  • 'beacon' (menggunakan metode navigator.sendBeacon)

Dua metode pertama di atas memiliki masalah yang sama sebagaimana dijelaskan di bagian sebelumnya, yaitu saat hit sering kali tidak dikirim jika muatan halaman dihapus. Metode navigator.sendBeacon mengatasi masalah ini dengan mengirim hit secara asinkron ke server web tanpa harus menetapkan callback hit.

Kode berikut menetapkan mekanisme transpor ke 'beacon' untuk browser yang mendukungnya:

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});