ทำไม SPA ถึงยุ่งยากสำหรับการยินยอมคุกกี้

แอปพลิเคชันหน้าเดียวโหลดครั้งเดียวและจัดการการนำทางฝั่งไคลเอนต์ ไม่มีการรีโหลดหน้าเพื่อเรียกใช้การตรวจสอบการยินยอมอีกครั้ง สคริปต์ของบุคคลที่สามที่โหลดใน index.html จะทำงานก่อนที่ UI การยินยอมจะปรากฏ

ข้อผิดพลาดทั่วไปใน SPA

• โหลด Google Analytics ใน index.html ก่อนได้รับการยินยอม
• ไม่ตรวจสอบสถานะการยินยอมเมื่อเปลี่ยนเส้นทาง
• สูญเสียสถานะการยินยอมเมื่อแอปเรนเดอร์ใหม่
• เรียกใช้เหตุการณ์การติดตามในวงจรชีวิตของคอมโพเนนต์โดยไม่มีการตรวจสอบการยินยอม

การนำไปใช้ที่ถูกต้อง

1. โหลดเฉพาะสคริปต์ CMP ใน head ของ HTML — ไม่มีอย่างอื่น
2. โหลดสคริปต์ของบุคคลที่สามแบบมีเงื่อนไขหลังจากได้รับการยินยอมแล้วเท่านั้น
3. ใช้ JavaScript API ของ CMP เพื่อตรวจสอบสถานะการยินยอมแบบโปรแกรม
4. กั้นการเรียกใช้การวิเคราะห์และการตลาดไว้หลังการตรวจสอบการยินยอมในคอมโพเนนต์ของคุณ

เคล็ดลับเฉพาะเฟรมเวิร์ก

React

ใช้ context provider สำหรับการยินยอม ตรวจสอบสถานะการยินยอมใน useEffect hooks ก่อนเริ่มต้นตัวติดตาม

Vue

สร้างปลั๊กอินการยินยอม ใช้ router guards เพื่อตรวจสอบสถานะการยินยอมเมื่อนำทาง

Angular

ใช้บริการการยินยอมที่ถูก inject ผ่าน DI ตรวจสอบการยินยอมใน route guards และการเริ่มต้นคอมโพเนนต์

FlexyConsent กับ SPA

แนวทางสคริปต์เดียวของ FlexyConsent ทำงานได้กับทุกเฟรมเวิร์ก โหลดแบบอะซิงโครนัส จัดการสถานะการยินยอมผ่านคุกกี้ และเปิดเผย JavaScript API สำหรับการตรวจสอบการยินยอมแบบโปรแกรม ไม่ต้องการ SDK เฉพาะเฟรมเวิร์ก