Why SPAs Are Tricky for Cookie Consent

Single-page applications load once and handle navigation client-side. There are no page reloads to re-trigger consent checks. Third-party scripts loaded in index.html fire before any consent UI appears.

Common SPA Mistakes

• Loading Google Analytics in index.html before consent
• Not re-checking consent state on route changes
• Losing consent state when the app re-renders
• Firing tracking events in component lifecycle without consent gates

Correct Implementation

1. Load only the CMP script in your HTML head — nothing else
2. Conditionally load third-party scripts only after consent is granted
3. Use the CMP's JavaScript API to check consent state programmatically
4. Gate analytics and marketing calls behind consent checks in your components

Framework-Specific Tips

React

Use a consent context provider. Check consent state in useEffect hooks before initializing trackers.

Vue

Create a consent plugin. Use router guards to verify consent state on navigation.

Angular

Use a consent service injected via DI. Check consent in route guards and component init.

FlexyConsent with SPAs

FlexyConsent's single-script approach works with any framework. It loads asynchronously, manages consent state via cookies, and exposes a JavaScript API for programmatic consent checks. No framework-specific SDK needed.