A function to keep a track of the pages visited by users and to send data to Firebase Analytics.

App.jsx

import { useLocation } from "react-router";

const App = () => {
	const { pathname, search } = useLocation();

    const analytics = useCallback(() => {
        trackPathForAnalytics({ path: pathname, search: search, title: pathname.split("/")[1] });
    }, [pathname, search]);
	
    useEffect(() => {
        analytics();
    }, [analytics]);
	
	// more code...
}

export default App.

TrackPageForAnalytics.js

import { GA4React } from "ga-4-react";

const ga4react = new GA4React("G-0SPQ2Z9EE2").initialize();

export interface AnalyticsData {
    path: string;
    search: string;
    title: string;
}

const trackPathForAnalytics = (data: AnalyticsData) => {
    const { path, search, title } = data;
    ga4react
        .then((ga) => {
            ga.pageview(path, search, title);
        })
        .catch((err) => console.error(`Analytics failed: ${err}`));
};

export default trackPathForAnalytics;