Persetujuan Cookie untuk Aplikasi Halaman Tunggal (React, Vue, Angular)
Mengapa SPA Rumit untuk Persetujuan Cookie
Aplikasi halaman tunggal dimuat sekali dan menangani navigasi di sisi klien. Tidak ada pemuatan ulang halaman untuk memicu ulang pemeriksaan persetujuan. Skrip pihak ketiga yang dimuat di index.html dijalankan sebelum UI persetujuan muncul.
Kesalahan Umum SPA
- Memuat Google Analytics di index.html sebelum persetujuan
- Tidak memeriksa ulang status persetujuan saat perubahan rute
- Kehilangan status persetujuan saat aplikasi di-render ulang
- Menjalankan event pelacakan dalam siklus hidup komponen tanpa gerbang persetujuan
Implementasi yang Benar
- Muat hanya skrip CMP di head HTML Anda — tidak ada yang lain
- Muat skrip pihak ketiga secara kondisional hanya setelah persetujuan diberikan
- Gunakan JavaScript API CMP untuk memeriksa status persetujuan secara programatis
- Batasi panggilan analitik dan pemasaran di belakang pemeriksaan persetujuan di komponen Anda
Tips Khusus Framework
React
Gunakan consent context provider. Periksa status persetujuan di useEffect hooks sebelum menginisialisasi pelacak.
Vue
Buat consent plugin. Gunakan router guards untuk memverifikasi status persetujuan saat navigasi.
Angular
Gunakan consent service yang diinjeksi melalui DI. Periksa persetujuan di route guards dan inisialisasi komponen.
FlexyConsent dengan SPA
Pendekatan skrip tunggal FlexyConsent bekerja dengan framework apa pun. Ia dimuat secara asinkron, mengelola status persetujuan melalui cookie, dan menyediakan JavaScript API untuk pemeriksaan persetujuan secara programatis. Tidak perlu SDK khusus framework.