– 📤 HTTP method

Tracker paling umum di hit lewat Rest API, kalian bisa saja membuatnya dengan http method POST, dikarenakan behavior tracker yang sebaiknya tidak di cache dan under-the-hood sebenernya akan menambah data tracker baru ke penyimpanan data. Ini juga terkait dengan tracker yang biasanya memang harus mengirimkan parameter yang dinamis dan dalam jumlah yang banyak, yang praktiknya tentu lebih mudah disampaikan lewat request body dibandingkan lewat query parameter ala-ala method GET

– 🐣 Parameter request body

Kalau berkaca pada Google Analytics pada artikel Event Parameter, mereka mendukung parameter eventName dan pair key-value object yang isinya bisa custom atau biasa disebut dengan Custom Dimension.

Contoh kodenya:

gtag('event', '<event_name>', {
  // <event_parameters>
});

// Sample tracker
gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

Meskipun berarti nanti isinya secara teknis mestinya bisa dinamis dan bisa diisi spesifikasi key-value apapun, beberapa kolom ini disarankan ada:

• ● timetamp: Ada dua jenis timestamp yang berbeda, satunya adalah waktu tracker tersebut di trigger, dan waktu kapan tracker tersebut ditulis ke storage
• ● sessionId: Kalau dari artikel [GA4] About Analytics sessions, mereka akan generate sessionId dengan expiry 30 menit dan akan selalu diperpanjang saat pengguna masih aktif berinteraksi. Praktikalnya mungkin bisa menggunakan Cookie yang selalu diperpanjang tiap kali halaman/tracker-nya di hit. Tapi kalau web klien sudah meng-handle sessionId sendiri (misalnya sudah punya otentikasi yang akan generate sessionId), ya menurutku sih sebaiknya integrasi pakai sessionId yang sama aja, gak perlu bikin sessionId untuk tracker lagi.
• ● deviceId: unik per device pengguna, bisa dengan menyematkan Cookie dengan expiry yang panjang, atau pakai localStorage
• ● eventName: kalau digunakan oleh berbagai klien, mungkin bisa ditambahkan konvensi dengan prefix nama aplikasi klien
• ● Lainnya adalah tambahan atribut yang berupa key-value object tadi

– 🔥 Mekanisme fire forget

Rest API untuk tracker sebaiknya dibuat dengan menganut prinsip fire and forget, artinya klien tidak perlu tau apakah berhasil atau gagal proses di belakang layarnya, pun tidak perlu menunggu proses tersebut selesai. Jadi apapun yang terjadi, secepatnya kembalikan saja response bahwa tracker yang dimaksud sedang atau akan diproses.

– 🍡 Batching request

Service Tracker adalah salah satu service yang kemungkinan akan di hit dalam frekuensi yang tinggi, selain dituntut untuk memiliki reliability dan availability yang tinggi juga sebaiknya prosesnya dikerjakan dengan efektif. Dalam hal ini, kalau transport-nya bisa dikurangi, maka sebaiknya begitu. Service tracker sebaiknya memiliki kemampuan untuk mengirimkan beberapa tracker sekaligus dalam satu satuan permintaan, ini akan membantu mengurangi jumlah traffic bolak-balik yang harus dikerjakan antara klien-server.

– 🛢️ Cara mengumpulkan tracker

Seperti disebutkan di atas pada bagian spesifikasi di mana sebaiknya kita membuat service tracker kita memiliki kemampuan untuk menangani batch request atau mengirimkan banyak data dalam sekali permintaan. Untuk memaksimalkan kemampuan tersebut, dari sisi FE (frontend engineer) perlu memperbaiki cara kita mengumpulkan tracker, jikalau sebelumnya atau paling tidak cara paling mudahnya adalah dengan mengirimkan tracker secepat mungkin saat suatu aksi di-trigger, maka kali ini kita tidak lagi langsung mengirimkan melainkan membuat suatu penampung sementara sebelum nantinya dikirimkan bersamaan.

Belajar dari cara Google Analytics dalam melakukan inisiasi tracker mereka (bisa dibaca di tautan memasang gtag.js)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'TAG_ID');
</script>

Dia menginisiasi Array di memori window.dataLayer = window.dataLayer || []; dan ketika melakukan push event, sebenarnya hanya push item baru ke dalam Array ini. Kita bisa ikuti teknik ini.

– ⏰ Waktu yang tepat mengirimkan tracker

Waktu yang tepat bisa jadi tergantung dari strategi yang diambil. Menurut saya, paling tidak ada 2 strategi yang bisa diambil sebagai alternatif:

• 1️⃣ Menggunakan timer
• 2️⃣ Listen event saat user pindah halaman

Cara pertama, kita perlu menambahkan timer (setInterval) dalam satuan waktu, saat mencapai waktu yang diinginkan, perlu melakukan cek apakah ada tracker yang tersedia di memori, kalau gak ada bisa dilewati, sedangkan kalau ada, maka dikirimkan ke server kemudian dikosongkan kembali memorinya.

Sayangnya cara pertama tetap bisa menimbulkan ada tracker yang tertinggal belum sempat dikirim sementara pengguna keburu berpindah halaman, melakukan hard refresh atau menutup halaman. Sehingga jika kalian mengambil opsi pertama, menurutku tetap saja harus dikombinasikan dengan opsi ke dua untuk mengakomodir tracker yang tertinggal.

Cara kedua, di lain sisi adalah dengan mendengarkan (listen) ke event saat pengguna melakukan perpindahan halaman atau istilahnya unload. Kita bisa mendengarkan event ini dengan cara:

addEventListener("beforeunload", (event) => {
  // Kirim tracker di sini
});

Baca selengkapnya di MDN mengenai beforeunload

Sayangnya event beforeunload ini sudah tidak lagi direkomendasikan untuk digunakan, baca selengkapnya mengenai isu ini di artikel Don’t lose user and app state, use Page Visibility

Disarankan saat ini sebaiknya menggunakan Page Visibility API

document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    // Kirim tracker di sini
  }
};

Event ini dijalankan saat pengguna berpindah halaman, mengganti atau menutup tab dari peramban, mengecilkan atau menutup peramban tersebut, atau kalau di device mobile itu saat berpindah dari peramban ke aplikasi lain. Menurut MDN dan banyak referensi lain, ini adalah titik atau waktu yang pas untuk mengirimkan data semacam tracker.

– 🐷 Teknik menghindari kehilangan tracker

Karena tracker dikirimkan saat halaman beralih, ada kemungkinan sebuah HTTP request ini putus di jalan sebelum benar-benar selesai disampaikan. Tambahan lain untuk membantu menangani kasus ini adalah dengan beralih dari Fetch API ke Beacon API. Beacon API digunakan untuk mengirimkan selayaknya HTTP dengan method POST tapi dengan design yang memang dikhususkan untuk kasus semacam tracker/analitik.

Contoh kode mengirimkan tracker dengan Beacon API:

document.addEventListener("visibilitychange", function logData() {
  if (document.visibilityState === "hidden") {
    // Contoh mengirim tracker ke endpoint /track
    navigator.sendBeacon("/track", analyticsData);
  }
});

Kalau misalnya ragu dengan dukungan peramban soal Beacon API, bisa juga bikin fallback ke tradisional Rest API kalau sendBeacon tidak tersedia. Misalnya:

document.addEventListener("visibilitychange", function logData() {
  if (document.visibilityState === "hidden") {
    if (typeof navigator.sendBeacon === 'function') {
      // Contoh mengirim tracker ke endpoint /track
      navigator.sendBeacon("/track", analyticsData);
    } else {
      // Fallback ke Fetch API
      fetch('/track', {
        method: 'POST',
        body: JSON.stringify(analyticsData)
      })
    }
  }
});