How to add Google Analytics to the React App
Today we’ll show you how to add Google Analytics to the React App.
It’s very easy to integrate google analytics in the multi page application whereas in the single page application, we need to configure it with the routing.
Here, we will use the npm package to track the user behaviour. You will get the following output after adding the GA in the React application.
Demo Application
Steps to add Google Analytics to the React App
1. Create a react application
First of all, let’s create a react application using the create-react-app npm package. Run the following command to create the app.
1 | npx create-react-app google-analytics-react |
2. Add routing
We need to add the routing in the react application. We will recommend you to check the following article.
You may also like to check the React Router v6.
After integrating the routing in React, You will find the index.js file as looks like below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { BrowserRouter, Switch, Route, Link } from 'react-router-dom' import App from './App'; import About from './About'; import Contact from './Contact'; const routing = ( <BrowserRouter> <div> <h3>Clue Mediator</h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Switch> <Route exact path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> </BrowserRouter> ) ReactDOM.render(routing, document.getElementById('root')); |
Let’s try to split this file into two parts as below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import React from 'react'; import { Switch, Route, Link } from 'react-router-dom'; import App from './App'; import About from './About'; import Contact from './Contact'; const RoutingComponent = () => { return <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Switch> <Route exact path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> } export default RoutingComponent; |
1 2 3 4 5 6 7 8 9 10 11 | import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { BrowserRouter } from 'react-router-dom'; import RoutingComponent from './RoutingComponent'; ReactDOM.render(<BrowserRouter> <h3>Add Google Analytics to React App - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <RoutingComponent /> </BrowserRouter>, document.getElementById('root')); |
3. Install npm dependency
As we discussed, we will use the react-ga npm package to add Google Analytics in the React Application.
Run the following command to install the package.
1 | npm i react-ga |
4. Integrate Google Analytics
Now, we will integrate Google Analytics in the React component. For that, we have to use the withRouter HOC for the RoutingComponent.js component. Check out the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import React from 'react'; import { Switch, Route, Link, withRouter } from 'react-router-dom'; import ReactGA from 'react-ga'; ... ... const RoutingComponent = () => { useEffect(() => { ReactGA.pageview(window.location.pathname + window.location.search); }); return <div> ... ... </div> } export default withRouter(RoutingComponent); |
Let’s initialize Google Analytics from the root file.
1 2 3 4 5 6 7 8 9 10 11 | // add google analytics import ReactGA from 'react-ga'; ReactGA.initialize('<TRACKING_ID>'); ... ... ReactDOM.render(<BrowserRouter> <h3>Add Google Analytics to React App - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <RoutingComponent /> </BrowserRouter>, document.getElementById('root')); |
Don’t forget to update the value of the <TRACKING_ID> in the above code that you will find it from here.
5. Output
Run the react application and check the output.
I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂
