Studi Kasus Vetmo: Storage Access API Pulihkan Checkout Konversi Pet Care dari 2,8 ke 5,4 Persen di 2026
TL;DR: Setelah Chrome memblokir cookie pihak ketiga penuh di Q3 2025, checkout iframe Midtrans di Vetmo gagal membaca session token, drop checkout completion dari 4,1 ke 1,9 persen. Setelah Vito Atmo memasang Storage Access API dengan prompt izin yang muncul di klik tombol checkout, konversi pulih ke 5,4 persen dalam 6 minggu.
Pada Agustus 2025, tim Vetmo melaporkan anomali di dashboard analytics. Click-to-checkout tetap stabil di 38 persen, tapi checkout-to-order anjlok dari 4,1 persen menjadi 1,9 persen dalam 2 minggu. Tidak ada perubahan kode, tidak ada perubahan harga, tidak ada perubahan kampanye iklan.
Investigasi membawa Vito Atmo ke titik tak terduga: rollout bertahap Chrome yang memblokir cookie pihak ketiga sudah mencapai segmen pengguna Vetmo. Iframe Midtrans yang dipakai untuk pembayaran tidak bisa lagi membaca session token yang disimpan di first-party cookie domain vetmo.id.
Konteks Teknis Masalah
| Komponen | Sebelum | Setelah Chrome Block |
|---|---|---|
| Cookie session di vetmo.id | Dibaca iframe Midtrans otomatis | Diblokir, iframe baca cookie kosong |
| Token CSRF | Disinkronkan via cookie | Tidak terbaca, request ditolak |
| Auto-fill data customer | Tersinkron antar tab | Gagal sinkron |
| Checkout completion | 4,1 persen | 1,9 persen |
Penyebab akarnya: iframe payment adalah konteks pihak ketiga relatif terhadap halaman utama. Cookie yang dipakai untuk autentikasi session berstatus first-party untuk vetmo.id tapi pihak ketiga untuk iframe Midtrans. Lihat juga CHIPS Partitioned Cookies.
Pilihan Solusi yang Dievaluasi
Tim Vetmo mengevaluasi empat opsi:
- Migrasi ke payment redirect (bukan iframe). Ditolak karena UX flow jauh lebih panjang, riset internal pet care menunjukkan drop tambahan 12 persen di redirect.
- CHIPS (Partitioned Cookies). Cocok untuk analytics, tapi tidak cocok untuk session payment karena partisi cookie tidak bisa diakses dari konteks first-party utama.
- Storage Access API. Jalur resmi browser, butuh prompt izin pengguna sekali.
- Server-to-server token relay. Solusi paling aman, tapi butuh perubahan SDK Midtrans di sisi vendor.
Vito Atmo memilih Storage Access API karena bisa diaplikasikan di sisi client tanpa menunggu update SDK gateway, dan prompt izin Chrome ringkas (satu kalimat di kanan atas).
Implementasi 6 Minggu
| Minggu | Milestone |
|---|---|
| 1 | Audit semua iframe pihak ketiga di vetmo.id (Midtrans, chat Tawk, embed YouTube) |
| 2 | Pasang document.hasStorageAccess() di iframe pre-load, log telemetri |
| 3 | Tambah handler requestStorageAccess() di event klik tombol "Bayar Sekarang" |
| 4 | A/B test: 50 persen pengguna dengan Storage Access API, 50 persen tanpa |
| 5 | Rollout penuh ke 100 persen pengguna |
| 6 | Pasang fallback untuk Safari yang masih partial-support |
Penerapan di iframe Midtrans menyisipkan satu blok JavaScript:
btnBayar.addEventListener('click', async () => {
if (await document.hasStorageAccess()) return submitPayment();
try {
await document.requestStorageAccess();
submitPayment();
} catch {
fallbackRedirect();
}
});
Prompt izin hanya muncul sekali per pengguna per 30 hari (kebijakan Chrome). Untuk yang menolak, fallback ke redirect Midtrans.
Hasil Setelah 6 Minggu
| Metrik | Pre-Block | Post-Block | Post Storage Access API |
|---|---|---|---|
| Checkout completion | 4,1 persen | 1,9 persen | 5,4 persen |
| Average order value | Rp 287.000 | Rp 271.000 | Rp 294.000 |
| Prompt izin diterima | n/a | n/a | 84 persen |
| Fallback redirect dipakai | n/a | 100 persen | 16 persen |
Yang menarik: konversi pasca-implementasi melampaui baseline pre-block. Tim mencatat dua sebab. Pertama, prompt izin Chrome membangun kesan transparansi, beberapa pengguna malah lebih percaya. Kedua, fallback redirect untuk 16 persen yang menolak juga lebih solid dari iframe original karena tim sekalian merapikan halaman thank-you. Lihat juga praktik Meta Conversion API untuk attribution pasca-cookie.
Pelajaran untuk Tim Lain
Praktik standar di industri menunjukkan transisi cookieless butuh persiapan minimal 3 bulan. Untuk bisnis Indonesia yang pakai payment gateway dengan iframe (Midtrans, Xendit, Doku), audit iframe sekarang, jangan tunggu drop konversi terlihat. Detail tambahan tersedia di Chrome Developers Storage Access API.
Pertanyaan Umum
Apakah Storage Access API menggantikan CHIPS?
Tidak. CHIPS untuk analytics dan tracking yang butuh cookie tertulis tapi tidak butuh akses cross-site bersama. Storage Access API untuk login, payment, dan SSO yang butuh akses cookie first-party dari konteks iframe.
Berapa persen pengguna menolak prompt?
Dari data Vetmo, 16 persen menolak. Angka ini bervariasi tergantung kategori industri dan trust brand. Kategori payment dan finansial biasanya rejection rate 20-30 persen, kategori utility dan informasi 10-15 persen.
Apakah Safari sudah support penuh?
Per April 2026, Safari support sejak versi 13.1 tapi dengan heuristik berbeda dari Chrome. Prompt Safari lebih ketat, kadang muncul lebih sering. Tambahkan capability detection per browser.
Bagaimana kalau pengguna pakai mode incognito?
Storage Access API tetap berfungsi di incognito tapi izin reset tiap sesi. Untuk pet care e-commerce, ini jarang masalah karena mayoritas transaksi pakai mode normal.
Apakah ada efek ke skor Core Web Vitals?
Tidak. Prompt izin tidak diukur dalam LCP, INP, atau CLS. Skor performa Vetmo justru naik karena iframe Midtrans yang sebelumnya retry banyak request.
Penutup
Cookieless bukan ancaman, melainkan kesempatan merapikan checkout flow yang sudah lama dibiarkan. Yang penting: mulai sekarang dari audit iframe, baru pasang Storage Access API di titik yang membutuhkan.
Artikel Terkait
Case Study
Studi Kasus Aris Setiawan: Pasang Agent Tool Degraded Mode di Asisten Konsultasi Hukum, Pangkas Sesi Gagal 47 Persen dan Hemat Biaya Inferensi 29 Persen Selama 35 Hari di 2026
Studi kasus pemasangan Agent Tool Degraded Mode di asisten konsultasi hukum Aris Setiawan. Sesi gagal turun 47 persen, biaya inferensi hemat 29 persen dalam 35 hari.
Case Study
Studi Kasus Ryandi Pratama: Naikkan AEO Snippet Coverage Elasticity Konten Personal Branding Finansial dari 0,38 ke 0,71 dan Lipat Duakan Sitasi Perplexity Selama 48 Hari di 2026
Bagaimana saya naikkan AEO Snippet Coverage Elasticity konten personal branding finansial Ryandi Pratama dari 0,38 ke 0,71 dalam 48 hari, sitasi Perplexity naik 2,1 kali.
Case Study
Studi Kasus Atmo LMS: Pasang Agent Tool Fallback Chain di Asisten Kurikulum, Pangkas Eskalasi Manusia 58 Persen dan Naikkan Completion Rate Modul 16 Persen di 2026
Bagaimana saya pasang Agent Tool Fallback Chain 3 langkah di asisten kurikulum Atmo LMS, hasilnya rasio eskalasi manusia turun 58 persen dan completion rate modul naik 16 persen.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang