Согласие на cookie для одностраничных приложений (React, Vue, Angular)
Почему SPA сложны для согласия на cookie
Одностраничные приложения загружаются один раз и обрабатывают навигацию на стороне клиента. Нет перезагрузок страницы, которые повторно запускали бы проверки согласия. Сторонние скрипты, загруженные в index.html, срабатывают до появления какого-либо интерфейса согласия.
Распространённые ошибки SPA
- Загрузка Google Analytics в index.html до согласия
- Отсутствие повторной проверки состояния согласия при изменении маршрута
- Потеря состояния согласия при повторном рендеринге приложения
- Запуск событий отслеживания в жизненном цикле компонента без проверок согласия
Правильная реализация
- Загружайте в head вашего HTML только скрипт CMP — больше ничего
- Загружайте сторонние скрипты условно только после получения согласия
- Используйте JavaScript API CMP для программной проверки состояния согласия
- Закрывайте вызовы аналитики и маркетинга проверками согласия в ваших компонентах
Советы для конкретных фреймворков
React
Используйте провайдер контекста согласия. Проверяйте состояние согласия в хуках useEffect перед инициализацией трекеров.
Vue
Создайте плагин согласия. Используйте охранники маршрутизатора для проверки состояния согласия при навигации.
Angular
Используйте сервис согласия, внедряемый через DI. Проверяйте согласие в охранниках маршрутов и при инициализации компонентов.
FlexyConsent с SPA
Подход FlexyConsent с одним скриптом работает с любым фреймворком. Он загружается асинхронно, управляет состоянием согласия через cookie и предоставляет JavaScript API для программных проверок согласия. Не нужен SDK для конкретного фреймворка.