シングルページアプリケーション（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のシングルスクリプトアプローチは、どのフレームワークでも動作します。<head>の最初のスクリプトとして同期的に読み込まれるため、トラッカーが実行される前にブロックできます。同意状態をCookieで管理し、プログラムから同意を確認するためのJavaScript APIを公開しています。フレームワーク固有のSDKは不要です。