Enable Sitecore tracking and analytics in a JSS Next.js app

Version: 22.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 tracking during development

During development, Sitecore Analytics enables robot detection, meaning that analytics activity is flagged as robot activity and is not tracked. To test your app by tracking robot activity, you can disable robot detection.

Important

This change should be made only in development, not production.

To enable robot tracking during development:

In the root directory of your Next.js JSS app, open the sitecore/<APP_NAME>.config file and then, in the settings node, either add the following or uncomment it if it's already present:
RequestResponse
```
<setting name="Analytics.AutoDetectBots" set:value="false" />
<setting name="Analytics.Robots.IgnoreRobots" set:value="false" />
```

Do you have some feedback for us?

If you have suggestions for improving this article,