Home/ Questions/Q 499
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

How do you implement analytics in React?

  • 0
  • 0

An explanation of integrating analytics in React.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Amelia Edwards

    To implement analytics in a React app, you’ll typically integrate a third-party analytics service (like Google Analytics, Mixpanel, or Amplitude) to track user behavior, page views, and events.

    Here’s a beginner-friendly guide to integrating Google Analytics with React using the react-ga4 library.

    Step 1: Install the analytics library

    We’ll use Google Analytics 4 (GA4) with react-ga4.

    npm install react-ga4

    Step 2: Initialize Google Analytics

    In your React project, create a new file to configure Google Analytics.

    📁 src/utils/analytics.js

    import ReactGA from 'react-ga4';

const GA_MEASUREMENT_ID = 'G-XXXXXXXXXX'; // Replace with your GA4 Measurement ID

export const initGA = () => {
ReactGA.initialize(GA_MEASUREMENT_ID);
};

export const logPageView = (path) => {
ReactGA.send({ hitType: 'pageview', page: path });
};

export const logEvent = (category, action, label) => {
ReactGA.event({
category,
action,
label,
});
};

    • initGA initializes GA.
    • logPageView tracks page views.
    • logEvent logs custom events (like button clicks).

    Step 3: Initialize GA in your App

    In your App.js, initialize GA when the app loads.

    📁 src/App.js

    import { useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
import { initGA, logPageView } from './utils/analytics';
import Home from './pages/Home';
import About from './pages/About';

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

useEffect(() => {
logPageView(location.pathname + location.search);
}, [location]);

return null;
};

function App() {
useEffect(() => {
initGA(); // Initialize GA on app load
}, []);

return (
<Router>
<TrackPageView />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}

export default App;
    • TrackPageView listens to route changes and logs each page view.
    • initGA() initializes GA once when the app mounts.

    Step 4: Track Custom Events

    You can track specific user actions like button clicks.

    📁 src/pages/Home.js

    import { logEvent } from '../utils/analytics';

function Home() {
const handleButtonClick = () => {
logEvent('Button', 'Click', 'Home Page CTA');
};

return (
<div>
<h1>Welcome to the Home Page</h1>
<button onClick={handleButtonClick}>Click Me!</button>
</div>
);
}

export default Home;

    This tracks:

    • Category: “Button”
    • Action: “Click”
    • Label: “Home Page CTA”

    You’ll see this data in your Google Analytics Events dashboard.

    Step 5: Verify Tracking

    1. Go to Google Analytics > Admin > Data Streams to find your Measurement ID.
    2. Use the Real-Time tab to verify page views and events as you interact with your app.