Cara Marketer Indonesia Pasang Web NFC Tap-to-Katalog di Next.js untuk Pangkas Friksi QR Code dari 11 ke 2 Detik di 2026

TL;DR: Web NFC API memungkinkan halaman Next.js membaca dan menulis tag NFC pasif langsung dari Chrome Android, memangkas friksi dari 11 detik (buka kamera, scan QR, tap link) menjadi 2 detik (tap HP ke tag). Implementasi butuh komponen client dengan NDEFReader, fallback graceful untuk iOS, dan UTM tagging untuk atribusi.

Pekan lalu saya turun ke booth Nalesha di Jakarta Beauty Expo 2026. Pengunjung antri di depan rak tester parfum, banyak yang tertarik tapi malas buka kamera untuk scan QR detail produk. Average dwell-time per tester sekitar 12 detik, conversion ke add-to-wishlist hanya 6 persen. Saya pasang tag NFC NTAG215 (sekitar 9.000 rupiah per keping) di belakang tiap card tester, dan rate naik ke 17 persen dalam dua hari uji coba.

Yang paling mengejutkan: bukan teknologi Web NFC-nya, tapi seberapa cepat user paham. Tidak perlu instruksi panjang, cukup stiker kecil bertuliskan "tap HP di sini".

Kenapa Web NFC Mengalahkan QR Code di Toko Fisik

QR code sudah menjadi default sejak pandemi, tapi friksinya tidak hilang. User harus: 1) keluar dari app yang sedang dipakai, 2) buka kamera, 3) arahkan ke kode, 4) tunggu fokus, 5) tap notifikasi link. Lima langkah ini memakan 8 sampai 14 detik untuk pengguna awam. Tap NFC menyelesaikan semua ini dalam satu gerakan fisik.

Web NFC API tersedia stabil di Chrome Android sejak versi 89 dan terus dikembangkan. Di iOS Safari belum ada dukungan native, jadi strategi yang saya pakai adalah progressive enhancement: tag NFC tetap menyimpan URL standar, sehingga iPhone yang tap akan tetap membuka URL lewat fitur NFC sistem iOS (Safari atau App Library), hanya tanpa instrumentasi extra.

Untuk konteks bisnis, baca juga studi kasus Nalesha Google Shopping Feed yang membahas funnel parfum online. Web NFC adalah sisi offline-nya.

Setup Komponen Next.js 15

Buat client component karena Web NFC butuh akses window. Tempatkan di components/nfc/NfcWriter.tsx:

"use client";
import { useState } from "react";

export function NfcWriter({ url }: { url: string }) {
  const [status, setStatus] = useState<string>("idle");

  async function writeTag() {
    if (!("NDEFReader" in window)) {
      setStatus("unsupported");
      return;
    }
    try {
      // @ts-expect-error NDEFReader belum di lib.dom.d.ts default
      const reader = new NDEFReader();
      await reader.write({
        records: [{ recordType: "url", data: url }],
      });
      setStatus("written");
    } catch (err) {
      setStatus("error");
    }
  }

  return (
    <button onClick={writeTag} className="btn-primary">
      Tulis Tag NFC ({status})
    </button>
  );
}

Untuk halaman pembaca, mode scan aktif terus-menerus selama halaman terbuka. Cocok untuk kios atau staff event yang mengkonfirmasi tap pengunjung.

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

export function NfcScanner({ onTap }: { onTap: (url: string) => void }) {
  useEffect(() => {
    if (!("NDEFReader" in window)) return;
    // @ts-expect-error
    const reader = new NDEFReader();
    reader.scan().then(() => {
      reader.addEventListener("reading", (event: any) => {
        for (const record of event.message.records) {
          if (record.recordType === "url") {
            const url = new TextDecoder().decode(record.data);
            onTap(url);
          }
        }
      });
    });
  }, [onTap]);

  return <div>Tempelkan tag NFC ke smartphone...</div>;
}

Atribusi: Kirim Tap ke Conversion API

Tag NFC yang ditulis harus berisi URL dengan UTM lengkap supaya GA4 dan Meta Conversion API bisa atribusikan dengan benar. Format yang saya pakai:

https://nalesha.id/produk/varian?utm_source=nfc&utm_medium=booth&utm_campaign=jbe2026&utm_content=rack-3a

Lalu di server-side handler, forward event ke Meta CAPI lewat edge functions Vercel supaya hit konversi tetap tercatat meski user keluar dari halaman cepat.

Studi Kasus Nalesha: 6% ke 17% dalam 2 Hari

Setup: 12 tag NFC NTAG215, dipasang di rak tester parfum signature. URL berisi UTM + produk slug + variant. Hasil yang saya catat dari console internal:

Bounce rate turun karena user tap setelah benar-benar mencium tester. Intent sudah valid sebelum mendarat di halaman. Pasang juga meta-conversion-api supaya event ViewContent server-side terkirim, dan pixel client-side tidak ketinggalan saat pengunjung langsung close tab.

Pertanyaan Umum

Berapa biaya per tag NFC untuk skala booth?

NTAG213 sekitar 4.000 rupiah, NTAG215 sekitar 9.000 rupiah per keping eceran di marketplace Indonesia 2026. Tag bisa dipakai ulang, tinggal rewrite payload.

Apakah Web NFC butuh HTTPS?

Wajib. Web NFC hanya berfungsi di origin secure (HTTPS), dan setiap permintaan butuh gesture user (tombol tap).

Bagaimana fallback untuk iPhone?

Tag NFC yang menyimpan URL akan tetap dibuka iOS lewat fitur NFC sistem (background tag reading). Yang tidak dapat hanya logging client-side advanced. Tetap pakai server-side tagging untuk konversi.

Apakah aman dari penyalahgunaan?

Spec NFC NDEF tidak menyimpan data sensitif. Yang ditulis di tag hanya URL publik. Untuk kasus loyalty, gabungkan dengan passkeys untuk autentikasi setelah landing.

Tag yang sudah ditulis bisa diubah?

Bisa, kecuali Anda lock tag pakai makeReadOnly(). Untuk kampanye event, biasakan biarkan rewriteable supaya bisa redirect ulang.

Mulai Eksperimen di Booth Berikutnya

Beli 10 tag NTAG215 (biaya kurang dari 100.000 rupiah), tulis URL UTM kampanye, tempel di rak strategis. Ukur dwell-time dan tap-to-page selama 3 hari pertama. Kalau angka tap-to-page tembus 75 persen, ekspansi ke seluruh display. Web NFC bukan teknologi futuristik lagi, ini infrastruktur retail yang siap dipakai di Indonesia hari ini.