Đồng ý cookie cho Single-Page Application (React, Vue, Angular)
Tại sao SPA gây khó khăn cho đồng ý cookie
Single-page application tải một lần và xử lý điều hướng phía client. Không có tải lại trang để kích hoạt lại kiểm tra đồng ý. Các script bên thứ ba được tải trong index.html sẽ chạy trước khi bất kỳ giao diện đồng ý nào xuất hiện.
Các lỗi phổ biến với SPA
- Tải Google Analytics trong index.html trước khi có đồng ý
- Không kiểm tra lại trạng thái đồng ý khi thay đổi route
- Mất trạng thái đồng ý khi ứng dụng render lại
- Kích hoạt sự kiện theo dõi trong vòng đời component mà không có cổng đồng ý
Triển khai đúng cách
- Chỉ tải script CMP trong phần head HTML — không gì khác
- Tải có điều kiện các script bên thứ ba chỉ sau khi được đồng ý
- Sử dụng JavaScript API của CMP để kiểm tra trạng thái đồng ý theo chương trình
- Đặt cổng kiểm tra đồng ý trước các lệnh gọi phân tích và tiếp thị trong component
Mẹo theo từng framework
React
Sử dụng context provider cho đồng ý. Kiểm tra trạng thái đồng ý trong useEffect hook trước khi khởi tạo trình theo dõi.
Vue
Tạo plugin đồng ý. Sử dụng router guard để xác minh trạng thái đồng ý khi điều hướng.
Angular
Sử dụng dịch vụ đồng ý được inject qua DI. Kiểm tra đồng ý trong route guard và khởi tạo component.
FlexyConsent với SPA
Cách tiếp cận đơn script của FlexyConsent hoạt động với bất kỳ framework nào. Nó tải bất đồng bộ, quản lý trạng thái đồng ý qua cookie và cung cấp JavaScript API để kiểm tra đồng ý theo chương trình. Không cần SDK riêng cho framework.