싱글 페이지 애플리케이션(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의 단일 스크립트 방식은 모든 프레임워크에서 작동합니다. <head>의 첫 번째 스크립트로 동기식으로 로드되므로 추적기가 실행되기 전에 차단할 수 있습니다. 쿠키로 동의 상태를 관리하고 프로그래밍 방식의 동의 확인을 위한 JavaScript API를 제공합니다. 프레임워크별 SDK가 필요하지 않습니다.