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> ); }

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>
  );
}