Google Analytics on React.js Components
Tags: analytics, google, react, javascript
Published: 2021-05-05 14:37:58

### Intro    
> Struggling to use `Google Analytics` on a React-app?
> Do you only get data on the landing page of your app, instead of every page?     
>       
> This article will be about how to fix this problem!    
     

### The issue:     
Google Analytics (GA) sends a pageview per page load, this means that if you would go on a certain page on your website, it requests that page from the server and loads it for the user. That is what GA records and sends as data.    
(This is in the case of a simple page view, page-events will not be discussed here!)    
And this is also what is the issue when trying to use GA on a React-app (or any `single-page applications`). React will load the whole app at once and switch components directly on the browser side.     
GA doesn't see this as a new page-load as it doesn't actually load a new page, but as a reload of the same page.     


### A solution:     
There have been different kinds of solutions to this problem, but when I went looking for one I found it confusing to find a clear and up-to-date solution. So here I am, sharing my own recommendation!     
> The idea would be that, as GA recognizes the page reload of the root URL (`yourwebsite.com/`path/to/page) but not the URI (That is the part after the root: yourwebsite<span></span>.com/`path/to/page`), the trick would be to make it check that URI everytime it reloads. And send that as the whole location of the page.    

This solution requires you to use those dependencies:     
* `react-router-dom` and `react-ga`
```
npm -i react-router-dom react-ga --save
or
yarn add react-router-dom react-ga --save
```
Create a file in your source folder and give it a name like `useGaTracker.js` or something, you can name it however you want though.      

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bmkdydywk7ar3jx2htp.png)

### STEP 1     
      


* Go get your UA tracking code on GA.     

If you already have created your GA property, you can find that code like this:     
* Go to Admin
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4z0ydy7ud2uwxeeqox3.png)
* Select the property you are using - and click on `Property Settings`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6viccmhz5mjbbg6x0jp.png)
* Copy your Tracking ID (should start with UA-xxxxxxx-x)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nggbgxs64w9hhpqvtmr.png)      

### STEP 2     
      

* Import `{ useEffect, useState }` from `react`; `{ useLocation }` from `react-router-dom` and `ReactGA` from `react-ga` inside the useGaTracker.js file.     

```js
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";
```
      
### STEP 3     
      

* Let's wright the function:
```js
const useGaTracker = () => {
    const location = useLocation();
    const [initialized, setInitialized] = useState(false);

    useEffect(() => {
        if (!window.location.href.includes("localhost")) {
        ReactGA.initialize("UA-xxxxxxxxx-x");
        }
        setInitialized(true);
    }, []);

    useEffect(() => {
        if (initialized) {
        ReactGA.pageview(location.pathname + location.search);
        }
    }, [initialized, location]);
};

export default useGaTracker;
```

`useLocation()` is what we will use to get our routing as location.     
The first `useEffect()` will check if your project is running on a localhost, if not, it will initialize your Tracking ID in the ReactGA and set the state `initialized` to TRUE.     
The Second `useEffect()` will send the pageview to GA with it's location.     
This one will also know to send that information each time `initialized` or `location` has changed.     
     
### STEP 4
     

* Import this function into our routing file.    


Go to the file that you use to route your components, and add your function in the router-component (in my case this would be my app.js file:     

##### App.js
```js
import { Route, Switch, Redirect } from 'react-router-dom'
import useGaTracker from './useGaTracker'

const App = () => {

  useGaTracker();

  return (
    <div className="App">
       <Switch>
          <Route path="/" exact component={ Landing } /> 

          <Route path="/about" exact component={ About } />
          <Route path="/discord" exact component={ Discord } />

          <Route path="/404" component={ Error } />
          <Redirect to="/404" />
       </Switch>
    </div>
  );
}

export default App;
```
     
### Finally     
      

* That's about it!    

You should have a working connection that will save and send all the different routes you use in your routing file!

##### [Basile&Code](https://basile-and-code.com/)