How To Add Google Analytics in React?

Last Updated : 15 Apr, 2025

Integrating Google Analytics into a React application enables you to monitor and analyze your website’s traffic and user behavior. This integration offers valuable insights into user interactions on your site, aiding in making informed decisions to enhance user experience and achieve business objectives. This guide walks you through the steps of adding Google Analytics to a React application.

Prerequisites:

Steps to Setup React Application

Step 1: Create a React application by using this command

npx create-react-app <project-name>

Step 2: Navigate to the project directory

cd <project-name>

Project Structure:

Screenshot-2024-07-20-173801 — Project structure

Step 3: Create a repository in github, initialize git in project and push the code in that repository. From vercel account, deploy this react application, so next we can implement Google analytics in this React application.

Step 4: Now Open your Google Analytics console and create a account for adding analyics to account. You should have an account. If not, create one.

Screenshot-2024-07-20-173919 — analytics accound and property

During the account creation process, you will also need to create a property. In Google Analytics, a property represents a set of data from a website, app, or device that you want to track separately from other sites or apps. Properties allow you to gain insights into user engagement, enhance website performance, and increase traffic.

Step 5: Now, we choose web as next react web application.

Screenshot-2024-05-25-185211 — collect data

Step 6: Next, we have to provide our react application URL, and a stream name.

Screenshot-2024-07-20-172520 — web stream

Step 7: After property creation, below interface appear with some necessary details. Keep the tab open of Google analytics and come back to our project in Code editor.

Screenshot-2024-07-20-172249-(1) — stream details

Step 8: Open index.html in public folder of your React application, add google tags script and update "app.js" in "src" folder according to our react application code.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9FXXSKK3VD">
</script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-9FXXSKK3VD');
</script>

</html>

JavaScript

// src/app.js
import './App.css';

function App() {
    return (
        <div className="App">
            Hello, this is my react application With Google analytics

        </div>
    );
}

export default App;

Step 9: Now save and push the code again for deployment, vercel deploy your react application again. Now, when we visit the website through URL, we can clear see the real time update of active user.