Cara Marketer Indonesia Pasang Beacon API di Next.js untuk Tracking Akurat Tanpa Drop Event 2026

TL;DR: Beacon API via navigator.sendBeacon mengirim event analytics ke server saat tab ditutup atau navigasi terjadi, dengan jaminan delivery dari browser. Pasang di event visibilitychange di Next.js App Router untuk track cart abandonment, scroll depth final, dan session end yang biasanya hilang 5-15% kalau pakai fetch biasa.

Dalam beberapa proyek e-commerce yang Vito Atmo tangani, ada anomali yang konsisten: angka cart abandonment dari Google Analytics dan dari log server selalu beda 8-12%. Ternyata banyak event "user pergi" yang dikirim lewat fetch dibatalkan saat browser navigate ke origin lain. Solusinya bukan menambah server resource, tapi mengganti tracking channel ke Beacon API.

Kenapa fetch dan XHR tidak cukup

Browser modern membatalkan request yang sedang berlangsung saat navigasi halaman. Itu fitur stabilitas browser, bukan bug. Konsekuensinya, event analytics yang dikirim di event unload atau pagehide lewat fetch punya peluang besar hilang. Bahkan dengan keepalive: true, ada limit ukuran 64 KB dan tetap subject ke rate limit.

Beacon API dirancang khusus untuk skenario ini. Browser menerima payload, mengantri di internal queue, dan menyelesaikan pengiriman setelah halaman selesai. Tidak ada cancellation, tidak ada race dengan navigasi.

Implementasi di Next.js App Router

Pasang di komponen client yang persist di seluruh halaman, biasanya di layout root:

Pattern dasar dalam tracker:

'use client';
import { useEffect } from 'react';

export function BeaconTracker() {
  useEffect(() => {
    const sendFinal = () => {
      if (document.visibilityState === 'hidden') {
        const payload = JSON.stringify({
          event: 'session_end',
          ts: Date.now(),
          path: location.pathname,
        });
        const blob = new Blob([payload], { type: 'application/json' });
        navigator.sendBeacon('/api/track', blob);
      }
    };
    document.addEventListener('visibilitychange', sendFinal);
    return () => document.removeEventListener('visibilitychange', sendFinal);
  }, []);
  return null;
}

Gunakan visibilitychange, bukan unload, karena Chrome dan Safari sudah unreliable trigger unload di iOS dan Android. Ini juga lebih bagus untuk akurasi karena trigger saat user pindah tab, bukan hanya saat close.

Studi Kasus Singkat: Nalesha Cart Abandonment

Saat menangani instrumentasi cart abandonment Nalesha (e-commerce parfum), kami catat angka completion event "checkout_abandoned" turun karena pakai fetch reguler. Setelah migrasi ke sendBeacon dengan blob JSON, completion rate event naik dari 78% ke 96%. Akurasi data yang lebih tinggi memungkinkan tim ads memindahkan budget remarketing ke audience yang benar-benar punya intent, bukan ke ghost signals.

Tracking penting lain yang harus pakai Beacon: scroll depth final, video watch time, form abandonment, dan exit intent. Semua event ini punya pola "kirim saat user akan pergi" yang rentan drop.

Pertanyaan Umum

Apakah sendBeacon kompatibel dengan Google Tag Manager?

Ya. Google Tag Manager sudah pakai sendBeacon internal untuk beberapa tag GA4. Kalau kirim custom tag, set "send_to" ke endpoint sendiri dan implement helper sendBeacon manual.

Bagaimana kalau browser tidak support?

Cek if ('sendBeacon' in navigator) lalu fallback ke fetch dengan keepalive: true. Coverage sendBeacon di 2026 sudah 96% global menurut caniuse, jadi fallback hanya untuk legacy.

Apakah perlu update privacy policy?

Tergantung data yang dikirim. Kalau pengiriman event sudah dideklarasi di privacy policy, sendBeacon hanya mengubah channel pengiriman bukan jenis data. Tidak perlu update. Tapi kalau menambah event baru, update sesuai standar GDPR dan UU PDP Indonesia.

Kesimpulan Aplikatif

Beacon API memperbaiki masalah data akurasi yang sering ditolerir tim marketing karena dianggap tidak bisa difix tanpa engineer senior. Pemasangannya sederhana, hanya butuh satu client component dan satu route handler di Next.js. ROI-nya langsung kelihatan di akurasi remarketing dan budget yang lebih efektif. Untuk aspek monitoring di sisi server, padukan dengan Reporting API atau ReportingObserver supaya semua telemetry konsisten.