useAnalytics

The useAnalytics hook can be used to access a Provider's track function. It's useful in situations where analytics isn't provided by default such as mounting a component, other lifecycle methods, or with custom behavior.

The following example shows how to use the hook to track when a component mounts.

In these examples

is a component internal to this documentation that provides an analytics Provider.

Result

Loading...

Live Editor

const TrackableFeature = (props) => { const [trackedPaths, setTrackedPaths] = useState([]); return ( <> <Provider value="Provider" onTrack={(trackedProperties, action) => { setTrackedPaths((currentTrackedPaths) => [ { path: trackedProperties.path, action }, ...currentTrackedPaths, ]); }} > {props.children} </Provider> <hr /> {trackedPaths && ( <section> Tracked Properties & Actions: <pre>{JSON.stringify(trackedPaths, null, 2)}</pre> </section> )} </> ); }; const MyCustomComponent = (props) => { const [track] = useAnalytics(props); useEffect(() => { track('MyCustomComponent', { type: 'MY_CUSTOM_COMPONENT_MOUNT', payload: 'mount' }); }, []); // no dependencies, only run this function once. return <div>{props.children}</div>; }; render( <TrackableFeature> <MyCustomComponent>👻</MyCustomComponent> </TrackableFeature>, );

const TrackableFeature = (props) => {
  const [trackedPaths, setTrackedPaths] = useState([]);

  return (
    <>
      <Provider
        value="Provider"
        onTrack={(trackedProperties, action) => {
          setTrackedPaths((currentTrackedPaths) => [
            { path: trackedProperties.path, action },
            ...currentTrackedPaths,
          ]);
        }}
      >
        {props.children}
      </Provider>
      <hr />

      {trackedPaths && (
        <section>
          Tracked Properties & Actions:
          <pre>{JSON.stringify(trackedPaths, null, 2)}</pre>
        </section>
      )}
    </>
  );
};

const MyCustomComponent = (props) => {
  const [track] = useAnalytics(props);

  useEffect(() => {
    track('MyCustomComponent', { type: 'MY_CUSTOM_COMPONENT_MOUNT', payload: 'mount' });
  }, []); // no dependencies, only run this function once.

  return <div>{props.children}</div>;
};

render(
  <TrackableFeature>
    <MyCustomComponent>👻</MyCustomComponent>
  </TrackableFeature>,
);

Tracking show/hide in a Modal

Result

Loading...

Live Editor

const TrackableFeature = (props) => { const [trackedPaths, setTrackedPaths] = useState([]); return ( <> <Provider value="Provider" onTrack={(trackedProperties, action) => { setTrackedPaths((currentTrackedPaths) => [ { path: trackedProperties.path, action }, ...currentTrackedPaths, ]); }} > {props.children} </Provider> <hr /> {trackedPaths && ( <section> Tracked Properties & Actions: <pre>{JSON.stringify(trackedPaths, null, 2)}</pre> </section> )} </> ); }; const MyCustomModal = (props) => { const [track] = useAnalytics(props); const { show, onHide } = props; useEffect(() => { if (show) { track('MyCustomModal', { type: 'MY_CUSTOM_MODAL_SHOW', payload: 'show' }); } }, [show]); const handleHide = () => { track('MyCustomModal', { type: 'MY_CUSTOM_MODAL_HIDE', payload: 'hide' }); onHide(); }; return ( <Modal show={show} onHide={handleHide} title="Reptiles"> <Modal.Body>🦎 🐍</Modal.Body> </Modal> ); }; const MyCustomModalContainer = () => { const [show, setShow] = useState(false); const handleOnClick = () => { setShow(true); }; const handleHide = () => { setShow(false); }; return ( <TrackableFeature> <MyCustomModal show={show} onHide={handleHide} /> <Button onClick={handleOnClick}>Show Modal</Button> </TrackableFeature> ); }; render(<MyCustomModalContainer />);

const TrackableFeature = (props) => {
  const [trackedPaths, setTrackedPaths] = useState([]);

  return (
    <>
      <Provider
        value="Provider"
        onTrack={(trackedProperties, action) => {
          setTrackedPaths((currentTrackedPaths) => [
            { path: trackedProperties.path, action },
            ...currentTrackedPaths,
          ]);
        }}
      >
        {props.children}
      </Provider>
      <hr />

      {trackedPaths && (
        <section>
          Tracked Properties & Actions:
          <pre>{JSON.stringify(trackedPaths, null, 2)}</pre>
        </section>
      )}
    </>
  );
};

const MyCustomModal = (props) => {
  const [track] = useAnalytics(props);
  const { show, onHide } = props;

  useEffect(() => {
    if (show) {
      track('MyCustomModal', { type: 'MY_CUSTOM_MODAL_SHOW', payload: 'show' });
    }
  }, [show]);

  const handleHide = () => {
    track('MyCustomModal', { type: 'MY_CUSTOM_MODAL_HIDE', payload: 'hide' });
    onHide();
  };

  return (
    <Modal show={show} onHide={handleHide} title="Reptiles">
      <Modal.Body>🦎 🐍</Modal.Body>
    </Modal>
  );
};

const MyCustomModalContainer = () => {
  const [show, setShow] = useState(false);

  const handleOnClick = () => {
    setShow(true);
  };

  const handleHide = () => {
    setShow(false);
  };

  return (
    <TrackableFeature>
      <MyCustomModal show={show} onHide={handleHide} />

      <Button onClick={handleOnClick}>Show Modal</Button>
    </TrackableFeature>
  );
};

render(<MyCustomModalContainer />);