Walkthrough: Enabling Sitecore tracking and analytics in a JSS Next.js app

Current version: 19.x

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:

Server-side rendering: The routes in your src/pages directory must implement the function getServerSideProps.
The Sitecore Layout Service REST API.

This walkthrough guides you through the steps required to enable full Sitecore tracking and analytics for your Next.js application.

The walkthrough describes how to:

Enable tracking of Layout Service requests in the JSS Next.js application.
Update your Sitecore configuration.

Enable tracking of Layout Service requests in the JSS Next.js application

To enable Sitecore tracking and analytics, the Next.js JSS application must enable the tracking of Layout Service requests, use server-side rendering, and pass the correct headers for tracking.

To enable Sitecore tracking and analytics:

If your application currently uses static generation, switch to server-side rendering.
As of Sitecore 10.0.1, Sitecore sets the Secure flag on all cookies by default. Enable HTTPS in your local environment.
If your application currently uses the Sitecore GraphQL Edge schema, switch to the Sitecore Layout Service REST API. After the switch, the application uses the service RestLayoutService, enabling tracking by default and passing the necessary headers with the requests.

If you want to explicitly enable tracking, in the root directory of your Next.js JSS app, in the file src/lib/layout-service-factory.ts, define the tracking parameter:
RequestResponse
```
return new RestLayoutService({
  ...
  tracking: true, // <-- enables tracking!
});
```

Tip

Depending on legal requirements in your target geographical reasons, you might want to enable or disable web tracking based on visitor consent.

Update your Sitecore configuration

With tracking and analytics enabled in the JSS app, you must instruct Sitecore to read the forwarding header and, in development, disable robot detection.

Specify the Forwarded request header

When using Next.js SSR routes, Layout Service requests send the original IP address of the client on the X-Forwarded-For header.

You must instruct Sitecore to read the header, thus making analytics track the correct original client IP address, by setting a value for the setting Analytics.ForwardedRequestHttpHeader.

To set the Analytics.ForwardedRequestHttpHeader in Sitecore:

In the root directory of your Next.js JSS app, in the file sitecore/<AppName>.config, in the settings node uncomment or add:
RequestResponse
```
<setting name="Analytics.ForwardedRequestHttpHeader" set:value="X-Forwarded-For" />
```

Enable robot detection in development

During development, Sitecore Analytics disables robot detection and any analytics activity is flagged as robot activity.

To enable robot detection during development for testing:

In the root directory of your Next.js JSS app, in the file sitecore/<AppName>.config, in the settings node uncomment or add:
RequestResponse
```
<setting name="Analytics.AutoDetectBots" set:value="false" />
<setting name="Analytics.Robots.IgnoreRobots" set:value="false" />
```
Important

These should be set only in development.

Do you have some feedback for us?

If you have suggestions for improving this article,