Digital Transformation
Beacon API (sendBeacon)
TL;DR: Beacon API via
navigator.sendBeacon(url, data)mengirim request POST kecil ke server yang dijamin terkirim browser, bahkan saat tab ditutup atau navigasi terjadi. Cocok untuk analytics terminal events seperti session end, scroll depth final, atau cart abandonment, tanpa risiko data hilang karena request dibatalkan.
Apa itu Beacon API?
Beacon API adalah Web API standar yang memberi developer cara mengirim data ringkas ke endpoint analytics di akhir lifecycle halaman. Beda dengan fetch biasa yang request-nya bisa dibatalkan saat user pergi, sendBeacon mengantri request di browser dan dikirim asynchronous tanpa memblok navigation. Browser bertanggung jawab menyelesaikan pengiriman bahkan setelah tab close.
API ini sering dipasang di event visibilitychange atau pagehide, lebih reliable dari unload event yang sudah tidak diandalkan di Chrome dan Safari modern.
Cara Kerja
Pemakaian dasar:
| Pattern | Contoh |
|---|---|
| Kirim event akhir | navigator.sendBeacon('/analytics', JSON.stringify(data)) |
| Tipe payload | string, Blob, FormData, BufferSource, URLSearchParams |
| Batas ukuran | 64 KB per request (default browser) |
| Listener trigger | document.addEventListener('visibilitychange', ...) |
Untuk payload terstruktur, bungkus dalam Blob dengan type: 'application/json' supaya server bisa parse langsung.
Kenapa Penting?
Marketer bergantung pada accuracy data analytics untuk decision making, terutama untuk metrik seperti time-on-page final dan funnel drop-off. Tanpa Beacon API, sekitar 5-15% event terminal hilang karena navigation membatalkan request. Saat membantu Nalesha (e-commerce parfum) instrumentasi cart abandonment, Vito Atmo memindahkan tracking dari fetch ke sendBeacon, completion rate event naik dari 78% ke 96%. Data yang lebih akurat berarti remarketing budget tidak diboroskan ke false positive.
Pertanyaan Umum
Apa beda sendBeacon dengan fetch keepalive?
Keduanya mirip untuk request lifecycle terminal. sendBeacon lebih ringkas tapi cuma POST. fetch dengan keepalive: true lebih fleksibel (GET, custom headers) tapi sintaksnya lebih panjang.
Apakah ada batas frekuensi?
Browser menerapkan rate limit per origin, biasanya 64 KB total payload aktif. Jangan pakai untuk streaming data, hanya untuk burst final.