RootLocationContextWrapper

Wraps its children in a RootLocationContext.
Children can be a ReactNode or a Render Props function receiving TrackingContext.

RootLocationContextWrapper: (props: {
  children: ReactNode | ((parameters: TrackingContext) => ReactNode),
  id: string
}) => ReactElement
Low level api

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

For applications relying on URLs, RootLocationContext can be automatically instrumented via the RootLocationContextFromURLPlugin. This is enabled by default in ReactTracker.

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.

Parameters​

type
requiredchildrenReactNode | ((parameters: TrackingContext) => void)
requiredidstring

Returns​

ReactElement

Usage example​

Enrich Locations​

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

<RootLocationContextWrapper id={'page'}>
  <Layout>
    ...
  </Layout>
</RootLocationContextWrapper>

Tracking via Render Props​

import { 
  RootLocationContextWrapper, 
  trackHiddenEvent,
  trackVisibleEvent
} from '@objectiv/tracker-react';

<RootLocationContextWrapper id={'page'}>
  {(trackingContext) => (
    <>
      <Layout>
        ...
      </Layout>
      <SupportChatOverlay
        onShow={() => trackVisibleEvent(trackingContext)}
        onHide={() => trackHiddenEvent(trackingContext)}
      >
        ...
      </SupportChatOverlay>
    </>
  )}
</RootLocationContextWrapper>

Did you know ?

RootLocationContextWrapper internally uses LocationContextWrapper.


See also