Integrating Google Analytics with React using ReactGA 4

Tech
26 November 2023

Introduction
In the ever-evolving landscape of web development, understanding user behaviour is crucial for optimizing your website or application. Google Analytics is a powerful tool that provides valuable insights into user interactions. In this blog post, we will explore how to integrate Google Analytics with a React application using ReactGA 4.

Step 1: Set up a Google Analytics Account
If you don't have a Google Analytics account, create one at Google Analytics. Follow the instructions to set up a property for your React application and obtain the tracking ID/Measurement ID.

Step 2: Create a React Application
Assuming you have Node.js and npm installed, create a new React application using the following commands:


          npx create-react-app my-analytics-app 
cd my-analytics-app

Step 3: Install ReactGA 4
Next, install the ReactGA 4 library by running the following command:


          npm install react-ga4

Step 4: Configure ReactGA
In your React application, open the src/index.js file and import ReactGA at the top:


              import ReactGA from 'react-ga4';

Initialize ReactGA with your tracking ID/ Measurement ID and other options:

-codeBlock ReactGA.initialize('YOUR_TRACKING_ID/MEASUREMENT_ID'); -codeBlock

Step 5: OR Integrate ReactGA with React Router (Optional)


              import { createBrowserHistory } from "history";
import React, { useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import ReactGA from "react-ga4";
import App from "./App";

const initializeReactGA = () => {
  ReactGA.initialize("YOUR_TRACKING_ID/MEASUREMENT_ID");
  ReactGA.send({ hitType: "pageview", page: window.location.pathname });
};

const AppWithGA = () => {
  useEffect(() => {
    initializeReactGA();

    // Add event listener for history changes
    const handleHistoryChange = () => {
      ReactGA.set({ page: window.location.pathname });
      ReactGA.pageview(window.location.pathname);
    };

    // Listen for changes in the history
    const history = createBrowserHistory();
    history.listen(handleHistoryChange);

    // Clean up the event listener when the component unmounts
    return () => history.listen(handleHistoryChange);
  }, []);

  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWithGA;

Step 6: Track Events
Now that you have ReactGA set up, you can start tracking events. For example, to track a button click, add the following code to the component where the button is located:


              import ReactGA from "react-ga4";
const MyButton = () => {
  const handleClick = () => {
    ReactGA.event({
      category: "Button",
      action: "Click",
      label: "My Button Clicked",
    });
  };
return <button onClick={handleClick}>Click Me</button>;
};

Conclusion
By integrating Google Analytics with your React application using ReactGA 4, you gain valuable insights into user interactions, helping you make data-driven decisions for improving the user experience. Experiment with tracking different events and analyse the data to enhance your application's performance.

Remember to replace 'YOUR_TRACKING_ID/MEASUREMENT_ID' with the actual tracking ID from your Google Analytics account. Happy tracking!😉

Please log in to add or reply to comments.

No comments available.