TrackedRootLocationContext

HOC wrapping the given Component in a RootLocationContext and enriching it with the objectiv prop.

TrackedRootLocationContext: <T>(props: T & {
  objectiv: {
    Component: ElementType | keyof ReactHTML,
    id: string,
    normalizeId?: boolean,
  } 
}) => JSX.Element
Manually configuring roots

Root locations are usually automatically generated by RootLocationContextFromURLPlugin, which is enabled by default in ReactTracker.

Make sure to never use TrackedRootLocationContext while RootLocationContextFromURLPlugin is active. It will lead to multiple RootLocationContexts, which is forbidden.

Reconfiguring or removing RootLocationContextFromURLPlugin
If you need RootLocationContextFromURLPlugin to track a different url slug, search parameter or the hashtag, you can reconfigure it to do so.

When reconfiguring the RootLocationContextFromURLPlugin is not a viable option, the Plugin should be removed before using this Location Tagger to instrument roots manually.

objectiv prop attributes​

typedefault value
requiredComponentElementType | keyof ReactHTML
requiredidstring
optionalnormalizeIdbooleantrue

Returns​

JSX.Element

Automatic Events​

None.

Usage example​

Elements​

import { TrackedRootLocationContext } from '@objectiv/tracker-react';

<TrackedRootLocationContext<ComponentProps<'div'>>
  objectiv={{ 
    Component: 'div',
    id: 'page'
  }}
>
  ...
</TrackedRootLocationContext>

ID normalization​

By default, all Tracked Context Components automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option. This is useful when identifiers need to be preserved for cross-platform concerns or if they are standardized identifiers, e.g. a code from a backend API.

In this example the identifier, which would normally be home-page, will be preserved as Home Page:

import { TrackedRootLocationContext } from '@objectiv/tracker-react';

<TrackedRootLocationContext<ComponentProps<'div'>>
  objectiv={{ 
    Component: 'div',
    id: 'Home Page',
    normalizeId: false
  }}
>
  ...
</TrackedRootLocationContext>

Components​

The Component prop doesn't need to be a JSX Element. Actually, more often than not, it will probably be another Component.
Here is an example of how to wrap around a hypothetical Layout component. 

import { Layout, LayoutProps } from '../components';
import React, { ComponentProps } from 'react';
import { TrackedRootLocationContext } from '@objectiv/tracker-react';

export type TrackedLayoutProps = LayoutProps & {
  objectiv?: Omit<TrackedContextObjectivProp, 'Component'>;
};

export const TrackedLayout = React.forwardRef<HTMLDivElement, TrackedLayoutProps>(
  ({ objectiv, ...nativeProps }, ref) => (
    <TrackedRootLocationContext<ComponentProps<typeof Layout>>
      {...nativeProps}
      ref={ref}
      objectiv={{
        ...objectiv,
        Component: Layout,
      }}
    />
  )
);

This can now be used like this:

<TrackedLayout objectiv={{ id: 'home' }}>
  ...
</TrackedLayout>

<TrackedLayout id={'home'}>
  ...
</TrackedLayout>
Components how-to guides

Check these how-to guides for more thorough examples:


Did you know ?

TrackedRootLocationContext internally uses RootLocationContextWrapper.


See also