Sometimes, we want to set up Google Analytics for React Router.

In this article, we’ll look at how to set up Google Analytics for React Router.

How to set up Google Analytics for React Router?

To set up Google Analytics for React Router, we can create our own hook to submit data to Google Analytics.

For instance, we write

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.initialize("UA-000000000-0");
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default usePageTracking;

to create the usePageTracking hook that calls the useLocation hook to get the current location.

And then we listen to location with the useEffect hook and calls ReactGA.initialize to initialize Google Analytics.

And then we call ReactGA.pageview with the full URL which we get with location.pathname + location.search.

Conclusion

To set up Google Analytics for React Router, we can create our own hook to submit data to Google Analytics.