Blocker

Basic Usage

Wrap the Blocker component around a section of the app that you don't want to receive analytics tracking on.

Result

Loading...

Live Editor

function TrackableFeature() {
  const [trackedPath, setTrackedPath] = React.useState([]);

  return (
    <Provider
      value="Feature A"
      onTrack={(propertyMap, action, event) => {
        setTrackedPath(propertyMap.path);

        console.log('propertyMap', propertyMap);
        console.log('action', action);
        console.log('event', event);
      }}
    >
      <Blocker>
        <Button>Non-trackable Button</Button>
      </Blocker>
      <br />
      <br />
      <Button>Trackable Button</Button>

      <hr />

      <div>Full tracked path: {trackedPath.join(' ➡️ ')}</div>
    </Provider>
  );
}