--- title: "JSS Next.jsアプリでSitecoreの追跡と分析を有効にしてください" slug: "enable-sitecore-tracking-and-analytics-in-a-jss-next-js-app" abstract: "Next.js JSSアプリのウェブトラッキングを有効にするSitecore方法" --- # JSS Next.jsアプリでSitecoreの追跡と分析を有効にしてください 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")。 このウォークスルーでは、Next.jsアプリケーションでSitecoreの完全な追跡と分析を有効にするために必要な手順を案内します。 このウォークスルーでは、以下の方法を説明しています: - JSS Next.jsアプリケーションでレイアウトサービスリクエストの追跡を有効にしてください。 - Sitecoreの設定を更新してください。 ## JSS Next.jsアプリケーションでレイアウトサービスリクエストの追跡を有効にする Sitecore追跡と分析を可能にするためには、Next.js JSSアプリケーションはレイアウトサービスのリクエストの追跡を有効にし、サーバー側レンダリングを使用し、追跡用の正しいヘッダーを渡す必要があります。 Sitecoreの追跡と分析を有効にするには: 1. もしアプリケーションが現在静的生成を使っているなら、[サーバー側レンダリングに切り替え](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/switch-the-pre-rendering-method-in-a-jss-next-js-app.html "Switch the pre-rendering method in a JSS Next.js app")てください。 2. Sitecore 10.0.1以降、SitecoreはすべてのクッキーにデフォルトでSecureフラグを設定します。ローカル環境でHTTPSを有効にしてください。 3. もしアプリケーションが現在Sitecore GraphQLエッジスキーマを使用しているなら、[SitecoreレイアウトサービスREST APIに切り替え](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/switch-between-rest-and-graphql-in-next-js-jss-apps.html "Switch between REST and GraphQL in Next.js JSS apps")てください。切り替え後、アプリケーションはサービスRestLayoutServiceを使用し、デフォルトでトラッキングを有効にし、リクエストに必要なヘッダーを渡します。 トラッキングを明示的に有効にしたい場合、Next.js JSSアプリのルートディレクトリのファイルsrc/lib/layout-service-factory.tsで、trackingパラメータを定義してください: return new RestLayoutService({ ... tracking: true, // <-- enables tracking! }); > !ヒント対象となる地理的理由による法的要件に応じて、[訪問者の同意に基づいてウェブトラッキングを有効または無効](https://doc.sitecore.com/xp/en/developers/102/sitecore-experience-platform/enable-or-disable-web-tracking-based-on-visitor-consent.html)にすることがあります。 ## Sitecoreの設定を更新してください JSSアプリで追跡と分析が有効になった場合、Sitecoreに転送ヘッダーを読み取るよう指示し、開発段階でロボット検出を無効化する必要があります。 ### 転送リクエストヘッダーを指定します Next.js SSRルートを使用する場合、レイアウトサービスリクエストはクライアントの元のIPアドレスをX-Forwarded-Forヘッダーに送信します。 ヘッダーを読み取るようSitecore指示し、分析が正しい元のクライアントIPアドレスを追跡できるように設定Analytics.ForwardedRequestHttpHeaderを設定します。 Analytics.ForwardedRequestHttpHeaderをSitecoreに設定すると: - Next.js JSSアプリのルートディレクトリ、ファイルsitecore/.config、settingsノードのコメントを解除するか追加してください: ### 開発中のロボット追跡を可能にする 開発中、Sitecore Analyticsは [ロボット検出](https://doc.sitecore.com/xp/en/developers/102/sitecore-experience-platform/robot-detection-overview.html)を可能にし、分析活動はロボットの活動としてフラグを立てて追跡されません。ロボットの活動を追跡してアプリをテストするには、ロボット検出を無効にできます。 > !重要この変更は開発段階 *のみ* で行うべきで、生産段階では行われるべきではありません。 開発中のロボット追跡を可能にするために: - Next.js JSSアプリのルートディレクトリでsitecore/.configファイルを開き、settingsノードで以下を追加するか、すでに存在している場合はコメントを取り消してください: