How to Set Up Google Analytics 4 for React-Router
If you are trying to set up Google Analytics 4 on your React site with React-Router, you might have encountered some challenges, especially if you were previously using the react-ga library. React-ga currently doesn’t support Google Analytics 4, which necessitates using an alternative approach. In this guide, we will walk you through the steps to set up Google Analytics 4 for React-Router without relying on external libraries.
Step 1: Adding the Global Site Tag (gtag.js) to index.html
The first step is to add the Global Site Tag to your index.html file. The Global Site Tag is responsible for loading the Google Analytics library and initializing the tracking code. Open your index.html file and locate the <head> section. Insert the following code within the <head> tags:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>Make sure to replace G-XXXXXXXXXX with your own Google Analytics 4 property ID.
Step 2: Implementing Manual Page Tracking with React-Router
React-Router is responsible for routing within your React application. In order to track page views accurately with Google Analytics 4, you need to update both the window.location and document.title whenever there is a route change. This ensures that the correct page location and title are sent to Google Analytics.
One way to implement manual page tracking is by creating a higher-order component that wraps your routes. Inside this component, you can call the window.gtag('send', 'page_view', ...) method whenever the route changes. Here’s an example of how you can set up the withTracker higher-order component:
export default function withTracker(WrappedComponent, options = {}) {
const trackPage = (page) => {
window.gtag('send', 'page_view', {
page_location: window.location.href,
page_path: window.location.pathname
});
};
const HOC = (props) => {
useEffect(() => {
trackPage(window.location);
}, [window.location]);
return <WrappedComponent {...props} />;
};
return HOC;
}To use the withTracker component, wrap your routes with it:
import withTracker from './withTracker';
// Your route setup
const App = () => {
// Route declarations
};
export default withTracker(App);By wrapping your routes with the withTracker higher-order component, you ensure that each route change triggers the trackPage function, which in turn sends the page view data to Google Analytics 4.
Alternative Approach: Using the ga-4-react NPM Package
If you prefer not to handle the manual page tracking implementation yourself, you can use a third-party package called ga-4-react. This package provides a simple and convenient way to integrate Google Analytics 4 into your React-Router application. You can find more information and installation instructions for the ga-4-react package on the NPM website.
With these steps, you should now be able to set up Google Analytics 4 for React-Router. Remember to test and verify that page views are being tracked accurately in your Google Analytics dashboard.
Thank you for reading this guide. If you have any further questions or need additional assistance, feel free to leave a comment below.
