싱글 페이지 애플리케이션(React, Vue, Angular)을 위한 쿠키 동의
SPA에서 쿠키 동의가 까다로운 이유
싱글 페이지 애플리케이션은 한 번 로드되고 클라이언트 측에서 내비게이션을 처리합니다. 동의 확인을 다시 트리거할 페이지 새로고침이 없습니다. index.html에 로드된 서드파티 스크립트는 동의 UI가 나타나기 전에 실행됩니다.
흔한 SPA 실수
- 동의 전에 index.html에서 Google Analytics 로드
- 라우트 변경 시 동의 상태를 재확인하지 않음
- 앱이 다시 렌더링될 때 동의 상태 손실
- 동의 게이트 없이 컴포넌트 라이프사이클에서 추적 이벤트 발생
올바른 구현
- HTML head에 CMP 스크립트만 로드하세요 — 다른 것은 아무것도 없이
- 동의가 부여된 후에만 조건부로 서드파티 스크립트를 로드하세요
- CMP의 JavaScript API를 사용하여 프로그래밍 방식으로 동의 상태를 확인하세요
- 컴포넌트에서 동의 확인 뒤에 분석 및 마케팅 호출을 게이트하세요
프레임워크별 팁
React
동의 컨텍스트 프로바이더를 사용하세요. 트래커를 초기화하기 전에 useEffect 훅에서 동의 상태를 확인하세요.
Vue
동의 플러그인을 만드세요. 내비게이션 시 동의 상태를 확인하기 위해 라우터 가드를 사용하세요.
Angular
DI를 통해 주입된 동의 서비스를 사용하세요. 라우트 가드와 컴포넌트 초기화에서 동의를 확인하세요.
SPA에서의 FlexyConsent
FlexyConsent의 단일 스크립트 방식은 모든 프레임워크에서 작동합니다. 비동기적으로 로드되고, 쿠키를 통해 동의 상태를 관리하며, 프로그래밍 방식의 동의 확인을 위한 JavaScript API를 제공합니다. 프레임워크별 SDK가 필요하지 않습니다.