How to enable and use Sitecore JSS analytics tracking

The Tracking Service provided by Headless Services is analytics tracking REST API that allows pushing Sitecore analytics events to the xDB based on client-side behavior. By default, it supports tracking Events, Goals, Outcomes, Campaigns, and Page/Route Views, and you can extend it for advanced tracking needs.

Setup

The Tracking Service is installed but disabled by default. when installing Sitecore Headless Services.

To enable the Tracker, set the Sitecore.JSS.TrackerServiceEnabled setting to true in a configuration patch file, for example:

Copy to Clipboard

Transform the Sitecore Web.config as follows:

In the httpCookies configuration, set requireSSL to false and sameSite to Unspecified.

In the sessionState configuration, set cookieSameSite to Unspecified.

Tracking events

You can track events using the endpoint /sitecore/api/jss/track/event?sc_apikey=[key].

The endpoint accepts POST requests with JSON payloads.

In your JSS app change LayoutServiceFactory options you can find this in src/lib/layout-service-factory.ts file.

Add or change tracking option to true

Copy to Clipboard

Now it’s started tracking.
Below is the code example for tracking goal, event, outcomes.

The dataFetcher ts file.

Copy to Clipboard

import { AxiosDataFetcher, AxiosResponse } from '@sitecore-jss/sitecore-jss-nextjs';

/**
 * Implements a data fetcher using Axios - replace with your favorite
 * SSR-capable HTTP or fetch library if you like. See HttpDataFetcher<T> type
 * in sitecore-jss library for implementation details/notes.
 * @param {string} url The URL to request; may include query string
 * @param {unknown} data Optional data to POST with the request.
 */
export function dataFetcher<ResponseType>(
  url: string,
  data?: unknown
): Promise<AxiosResponse<ResponseType>> {
  return new AxiosDataFetcher().fetch<ResponseType>(url, data);
}

import {
  withSitecoreContext,
  trackingApi,
  TrackingRequestOptions,
} from '@sitecore-jss/sitecore-jss-nextjs';

Const trackingApiOptions = {
      host: config.sitecoreApiHost,
      querystringParams: {
        sc_apikey: config.sitecoreApiKey,
      },
      fetcher: dataFetcher,
    };

submitEvent() {
    if (!event.current) return;

trackingApi
      .trackEvent([{ eventId: event.current.value }], trackingApiOptions)
      .then(() => alert('Page event pushed'))
      .catch((error) => alert(error));
  }

submitGoal() {
    if (!goal.current) return;

trackingApi
      .trackEvent([{ goalId: goal.current.value }], trackingApiOptions)
      .then(() => alert('Goal pushed'))
      .catch((error) => alert(error));
  }

submitOutcome() {
    if (
      !pageUrl.current ||
      !pageId.current ||
      !outcomeName.current ||
      !outcomeValue.current
    ) {
      return;
    }

trackingApi
      .trackEvent(
        [
          {
            url: pageUrl.current.value,
            pageId: pageId.current.value,
            outcomeId: outcomeName.current.value,
            currencyCode: 'USD',
            monetaryValue: outcomeValue.current.value,
          },
        ],
        trackingApiOptions
      )
      .then(() => alert('Outcome pushed'))
      .catch((error) => alert(error));
  }

triggerCampaign() {
    if (!campaign.current) return;

trackingApi
      .trackEvent([{ campaignId: campaign.current.value }], trackingApiOptions)
      .then(() => alert('Campaign set'))
      .catch((error) => alert(error));
  }

submitPageView() {
    if (!pageId.current || !pageUrl.current) return;

trackingApi
      .trackEvent(
        [
          {
            pageId: pageId.current.value,
            url: pageUrl.current.value,
          },
        ],
        trackingApiOptions
      )
      .then(() => alert('Page view pushed'))
      .catch((error) => alert(error));
  }

abandonSession() {
    const abandonOptions = {
      action: 'flush',
      ...trackingApiOptions,
    };

trackingApi
      .trackEvent([], abandonOptions)
      .then(() => alert('Interaction has been terminated and its data pushed to xConnect.'))
      .catch((error) => alert(error));
  }

submitBatching() {
    trackingApi
      .trackEvent(
        [
          { eventId: 'Download' },
          { goalId: 'Instant Demo' },
          { outcomeId: 'Opportunity' },
          {
            pageId: '{110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}',
            url: '/arbitrary/url/you/own',
          },
          // this goal will be added to the new page/route ID set above, not the current route
          { goalId: 'Register' },
        ],
        trackingApiOptions
      )
      .then(() => alert('Batch of events pushed'))
      .catch((error) => alert(error));
  }

Conclusion

Enabling and using Sitecore JSS analytics tracking can greatly improve your understanding of user behavior and content performance. By setting up Sitecore JSS analytics tracking, you can gain valuable insights to enhance user experiences and achieve your business goals.

Follow the steps outlined in this guide to configure your Sitecore instance, integrate with analytics platforms, and customize tracking scripts. Continuously monitor and refine your tracking to capture the most relevant data.

With these insights, you can create more targeted content, improve engagement, and drive better outcomes for your digital initiatives.

For more information, check out these additional resources:

Sitecore JSS Documentation
Sitecore Analytics Configuration Guide
Best Practices for Using Sitecore Analytics
Sourceved Sitecore Blogs