JSS Next.jsアプリにおける追跡と分析の統合
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSSはRESTフェッチ手法を用いたサーバー側レンダリングアプリケーションに対してのみ、Sitecoreの追跡と解析をサポートしています。このタイプの追跡は、静的サイト生成(SSG)およびサーバーサイドレンダリング(SSR)の両方で可能なJSS Tracking APIを用いたクライアント側トラッキングとは異なります。
!注現在、Sitecore GraphQL Edgeスキーマではトラッキングや分析は使用できません。
JSS Next.jsアプリでSitecoreの追跡と分析を有効にするには、アプリケーションが以下を使用する必要があります:
- サーバーサイドレンダリング: src/pages ディレクトリ内のルートは関数 getServerSidePropsを実装しなければなりません。
- SitecoreレイアウトサービスREST API。
Sitecoreの分析やパーソナライズがJSSと連携するためには、ブラウザとレイアウトサービスに適切なHTTPヘッダーが存在する必要があります。
Next.jsでは、(ブラウザ主導の)ページリクエスト/レスポンスと(サーバー側で発信される)レイアウトサービスのリクエスト/レスポンス間で特定のHTTPヘッダーを渡すことで実現されます。このプロセスを ヘッディングパッシングと呼びます。
ヘッダーパッシング
追跡や分析のために正しいヘッダーを渡すには、JSS Next.jsアプリでサーバーサイドレンダリングを使う必要があります。
以下の図は、Next.jsサンプルアプリケーションに付属するSSR ..path.tsxルートの例に基づいて、ページリクエスト/レスポンスサイクル中のヘッダーパッシングの仕組みを示しています。
ページのリクエスト/レスポンスはNext.js SSRルートのgetServerSidePropsを経由して送信され、最終的にはRestLayoutServiceに渡されます。
RestLayoutServiceはレイアウトサービスに対してレイアウトデータの取得リクエストを出すだけでなく、ヘッダーのパスの調整も担当します。
ページからレイアウトサービスへのリクエストには以下のヘッダーが設定されています:
- cookie
- user-agent
- referer
- X-Forwarded-For
レイアウトサービスからのレスポンスには以下のヘッダーが設定されています:
- set-cookie
構成
REST取得戦略とサーバーサイドレンダリングで作成されたNext.js JSSアプリケーションには、Sitecore分析やパーソナライズを開始するためのすべての設定が含まれています。もしアプリケーションが他のデータ取得やプリレンダリングのオプションを使って作成された場合、Sitecore追跡や分析統合をサポートするようにアプリを変更できます。
アプリケーション作成時に使用したオプションに関わらず、JSS Next.jsアプリでトラッキングをサポートするためには、Sitecoreの設定を行う必要があります。