ReactTracker

ReactTracker extends Core Tracker with a simplified constructor and some preconfigured Plugins.

Usage

In this example we create a new ReactTracker instance and wrap our entire App in ObjectivProvider.

import { ObjectivProvider, ReactTracker } from '@objectiv/tracker-react';

const App = ({children}) => {

  const tracker = new ReactTracker({
    endpoint: 'https://collector.app.dev',
    applicationId: 'app-id'
  })

  return (
    <ObjectivProvider tracker={tracker}>
      {children}
    </ObjectivProvider>
  );
}

Configuration

ReactTracker configuration requires at least an applicationId and either an endpoint or a custom transport.

		type	default value
required	applicationId	string
optional	endpoint	string
optional	transport	TrackerTransport	The result of makeReactTrackerDefaultTransport
optional	queue	TrackerQueue	The result of makeReactTrackerDefaultQueue
optional	plugins	TrackerPlugin	The result of makeReactTrackerDefaultPluginsList
optional	trackerId	string	Same value as applicationId
optional	active	boolean	true
optional	anonymous	boolean	false
optional	trackApplicationContext	boolean	true
optional	trackHttpContext	boolean	true
optional	trackPathContextFromURL	boolean	true
optional	trackRootLocationContextFromURL	boolean	true

caution

endpoint and transport are mutually exclusive. While both optional, either one must be specified.

When providing only endpoint, the Tracker will automatically create a Transport configuration initialized with it.

Active state

Trackers may be configured using the active option and modified at runtime via the setActive method.

active

Determines whether the tracker will initialize as active or not. Inactive trackers don't track any Events.

setActive

Allows to programmatically change the tracking state at runtime. This will re-initialize Queue, Transport and Plugins.

Anonymous mode

Anonymous tracking may be configured using the anonymous option and modified at runtime via the setAnonymous method.

anonymous

Determines whether the tracker will initialize in anonymous mode or not. In anonymous mode:

• No cookies are created client side, nor sent by the remote Collector.
• The remote Collector will anonymize all HttpContext attributes (remote_address, user_agent).
• A volatile client session is generated by the Tracker. It will last only until the App is closed, or refreshed.

setAnonymous

Allows to programmatically change anonymous mode at runtime. This will re-initialize Queue, Transport and Plugins.

Defaults

Transport

Fetch API + XHR API Transport Switch.

Queueing

TrackerQueue is configured to eagerly send max 10 events per batch, each batch is processed every 1000ms.

Persistence

TrackerQueue is configured to use localStorage.

Retry logic

Configured for 10 retries with exponential backoff starting at 1000ms.

Included plugins

• ApplicationContextPlugin
• HttpContextPlugin
• OpenTaxonomyValidationPlugin
• PathContextFromURLPlugin
• RootLocationContextFromURLPlugin

Optional plugins

• ReactRouterTrackedComponents

Under the hood

The Tracker architecture is highly composable.
To get an idea of how much React Tracker automates under the hood, compared to the Core Tracker, this statement:

const tracker = new ReactTracker({ 
  applicationId: 'app-id', 
  endpoint: 'https://collector.app.dev',
});

is equivalent to:

const trackerId = trackerConfig.trackerId ?? trackerConfig.applicationId;
const fetchTransport = new FetchTransport({ endpoint: 'https://collector.app.dev' });
const xhrTransport = new XHRTransport({ endpoint: 'https://collector.app.dev' });
const transportSwitch = new TransportSwitch({ transports: [fetchTransport, xhrTransport] });
const transport = new RetryTransport({ transport: transportSwitch });
const queueStorage = new LocalStorageQueueStore({ trackerId })
const trackerQueue = new TrackerQueue({ storage: trackerStorage });
const applicationContextPlugin = new ApplicationContextPlugin({ applicationId: 'app-id' });
const httpContextPlugin = new HttpContextPlugin();
const openTaxonomyValidationPlugin = new OpenTaxonomyValidationPlugin();
const pathContextFromURLPlugin = new PathContextFromURLPlugin();
const rootLocationContextFromURLPlugin = new RootLocationContextFromURLPlugin();
const plugins = [
  applicationContextPlugin,
  httpContextPlugin,
  openTaxonomyValidationPlugin,
  pathContextFromURLPlugin,
  rootLocationContextFromURLPlugin
];
const tracker = new Tracker({ trackerId, transport, queue, plugins });