Tracking and analytics integration in JSS Next.js apps
A conceptual overview of Sitecore web tracking integration in JSS Next.js apps
JSS supports Sitecore tracking and analytics only for server-side rendered applications using the REST fetch method. This type of tracking is different than client-side tracking using the JSS Tracking API, which is possible for both Static Site Generation (SSG) and Server-side Rendering (SSR).
You can not currently use tracking and analytics with the Sitecore GraphQL Edge schema.
To enable Sitecore tracking and analytics for your JSS Next.js app the application must use:
Server-side rendering: The routes in your
src/pagesdirectory must implement the function
For Sitecore analytics and personalization to work with JSS, the appropriate HTTP headers must be present at the browser and Layout Service.
With Next.js, this is accomplished by passing specific HTTP headers between the (browser-initiated) page request/response and the (server-side-initiated) Layout Service request/response. We refer to this process as header passing.
Passing the correct headers for tracking and analytics requires that you use server-side rendering in your JSS Next.js app.
The following diagram describes how header passing works during a page request/response cycle, based on the SSR
[[..path]].tsx route example that comes with the Next.js sample application.
The page request/response is sent through
getServerSideProps on the Next.js SSR route and ultimately is passed along to the
RestLayoutService is responsible for making the Layout Service request to fetch layout data but also for coordinating the header passing.
The following headers are set on the request from the page to the Layout service:
The following headers are set on the response from the Layout Service:
A Next.js JSS application created with the REST fetching strategy and server-side rendering includes all the configuration necessary to start using Sitecore analytics and personalization. If the application was created using other options for data fetching and prerendering, you can modify the app to support Sitecore tracking and analytics integration.
Regardless of the options you used when you created the application, you must perform some Sitecore configuration to support tracking in JSS Next.js apps.