シングルページアプリケーション（React、Vue、Angular）のCookie同意
SPAがCookie同意にとって難しい理由
シングルページアプリケーションは一度だけ読み込まれ、ナビゲーションをクライアント側で処理します。同意チェックを再トリガーするページリロードがありません。index.htmlで読み込まれたサードパーティスクリプトは、同意UIが表示される前に実行されます。
よくあるSPAの間違い
- 同意の前にindex.htmlでGoogle Analyticsを読み込む
- ルート変更時に同意状態を再確認しない
- アプリが再レンダリングされた際に同意状態を失う
- 同意ゲートなしでコンポーネントのライフサイクル内でトラッキングイベントを発火する
正しい実装
- HTMLのheadにCMPスクリプトのみを読み込む — 他には何も読み込まない
- 同意が得られた後にのみ、条件付きでサードパーティスクリプトを読み込む
- CMPのJavaScript APIを使用してプログラム的に同意状態を確認する
- コンポーネント内でアナリティクスとマーケティングの呼び出しを同意チェックの背後にゲートする
フレームワーク固有のヒント
React
consent context providerを使用してください。トラッカーを初期化する前にuseEffect hooksで同意状態を確認してください。
Vue
consent pluginを作成してください。ナビゲーション時に同意状態を確認するためにrouter guardsを使用してください。
Angular
DIを通じてインジェクトされたconsent serviceを使用してください。route guardsとコンポーネントの初期化で同意を確認してください。
SPAでのFlexyConsent
FlexyConsentのシングルスクリプトアプローチは、どのフレームワークでも動作します。非同期で読み込まれ、Cookieを通じて同意状態を管理し、プログラム的な同意チェックのためのJavaScript APIを公開します。フレームワーク固有のSDKは不要です。