为什么 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。