--- title: "JSS Next.jsアプリにおける追跡と分析の統合" slug: "tracking-and-analytics-integration-in-jss-next-js-apps" abstract: "JSS Next.jsアプリにおけるSitecoreウェブトラッキング統合の概念概要" --- # JSS Next.jsアプリにおける追跡と分析の統合 JSSはRESTフェッチ手法を用いたサーバー側レンダリングアプリケーションに対してのみ、[Sitecoreの追跡と解析](https://doc.sitecore.com/xp/en/developers/102/sitecore-experience-platform/web-tracking.html)をサポートしています。このタイプの追跡は、*静的サイト生成(SSG)およびサーバーサイドレンダリング(SSR)*の両方で可能な[JSS Tracking API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-tracking-api.html "JSS Tracking API")を用いた*クライアント側トラッキング*とは異なります。 > !注現在、Sitecore GraphQL Edgeスキーマではトラッキングや分析は使用できません。 JSS Next.jsアプリでSitecoreの追跡と分析を有効にするには、アプリケーションが以下を使用する必要があります: - サーバーサイドレンダリング: src/pages ディレクトリ内のルートは関数 getServerSidePropsを実装しなければなりません。 - [SitecoreレイアウトサービスREST API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")。 Sitecoreの分析やパーソナライズがJSSと連携するためには、ブラウザとレイアウトサービスに適切なHTTPヘッダーが存在する必要があります。 Next.jsでは、(ブラウザ主導の)ページリクエスト/レスポンスと(サーバー側で発信される)レイアウトサービスのリクエスト/レスポンス間で特定のHTTPヘッダーを渡すことで実現されます。このプロセスを *ヘッディングパッシング*と呼びます。 ## ヘッダーパッシング 追跡や分析のために正しいヘッダーを渡すには、JSS Next.jsアプリでサーバーサイドレンダリングを使う必要があります。 以下の図は、Next.jsサンプルアプリケーションに付属するSSR ..path.tsxルートの例に基づいて、ページリクエスト/レスポンスサイクル中のヘッダーパッシングの仕組みを示しています。 ![Next.js Sitecore Analytics request/response flow](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/nextjs-sitecore-analytics.svg) ページのリクエスト/レスポンスは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の設定を行う必要があります。