How To Add Google Analytics in React? - Coding

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:

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.

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.

collect data

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

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.

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.

How To Add Google Analytics in React

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Next.js Functions: redirect
What are the Issues of Continuing to Import createRoot from "react-dom"?
Next.js Route Groups and Project Organization
Next.js Exercises, Practice Questions and Solutions
Explain the Benefits and Challenges of Using WebSockets in Redux Applications.

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17