JSS Next.jsアプリでのトラッキングと分析の統合
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSSは、RESTフェッチ メソッドを使用してサーバー側でレンダリングされたアプリケーションに対してのみ、Sitecoreの追跡と分析をサポートします。このタイプのトラッキングは、both Static Site Generation (SSG) and Server-side Rendering (SSR)で可能なJSS Tracking APIを使用したトラッキングとは異なりclient-side tracking。
現在、Sitecore GraphQL Edgeスキーマで追跡と分析を使用することはできません。
JSS Next.jsアプリでSitecoreの追跡と分析を有効にするには、アプリケーションで以下を使用する必要があります。
-
サーバー側レンダリング: src/pagesディレクトリ内のルートは、関数getServerSidePropsを実装する必要があります。
Sitecoreの分析とパーソナライゼーションをJSSと連携させるには、ブラウザーとレイアウト サービスに適切なHTTPヘッダーが存在する必要があります。
Next.jsでは、これは (ブラウザーが開始する) ページ要求/応答と (サーバー側が開始する) レイアウト サービス要求/応答の間で特定のHTTPヘッダーを渡すことによって実現されます。このプロセスをheader passingと呼びます。
ヘッダーの受け渡し
トラッキングと分析に正しいヘッダーを渡すには、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設定を実行する必要があります。