Tracking and analytics integration in JSS Next.js apps

Abstract

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).

Note

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:

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.

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.

Next.js Sitecore Analytics request/response flow

The page request/response is sent through getServerSideProps on the Next.js SSR route and ultimately is passed along to the RestLayoutService.

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:

  • cookie

  • user-agent

  • referer

  • X-Forwarded-For

The following headers are set on the response from the Layout Service:

  • set-cookie

Configuration

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.