點解 SPA 對 Cookie 同意嚟講咁棘手

單頁應用程式載入一次就搞掂，導航喺客戶端處理。冇頁面重新載入嚟重新觸發同意檢查。喺 index.html 入面載入嘅第三方腳本喺任何同意介面出現之前就已經觸發咗。

SPA 常見嘅錯誤

• 喺取得同意之前就喺 index.html 載入 Google Analytics
• 路由變化嗰陣唔重新檢查同意狀態
• 應用程式重新渲染嗰陣同意狀態唔見咗
• 喺組件生命週期入面冇同意門控就觸發追蹤事件

正確嘅實現方式

1. 喺 HTML head 入面淨係載入 CMP 腳本——其他乜都唔好
2. 淨係喺取得同意之後先有條件噉載入第三方腳本
3. 用 CMP 嘅 JavaScript API 程式化噉檢查同意狀態
4. 喺組件入面將分析同埋營銷調用擺喺同意檢查後面

各個框架嘅貼士

React

用同意 context provider。喺 useEffect hook 入面初始化追蹤器之前檢查同意狀態。

Vue

建立一個同意插件。用路由守衛喺導航嗰陣驗證同意狀態。

Angular

用透過 DI 注入嘅同意服務。喺路由守衛同組件初始化入面檢查同意。

FlexyConsent 同 SPA

FlexyConsent 嘅單腳本方案同任何框架都配合到。佢異步載入，透過 Cookie 管理同意狀態，仲提供 JavaScript API 嚟做程式化嘅同意檢查。唔使框架特定嘅 SDK。