Google Analytics with react-router v4
Tags: reactgoogleanalytics
Published: 2018-05-31 06:45:20

---
title: Google Analytics with react-router v4
published: true
description: google analytics react-router
tags: react google-analytics
cover_image: https://thepracticaldev.s3.amazonaws.com/i/54wurj7l55o4r9htf15j.jpg

---

_image by: https://unsplash.com/@davidclode_

The Problem : 

Google analytics requires a Page URL to track analytics inside of the GA dashboard. Single Page applications only have mock transitions and are not actually changing there URL like classic webpages.

The Solution: 

Using React-router , we have access to the powerful [History API](https://developer.mozilla.org/en-US/docs/Web/API/History) that uses the browser to manipulate the URL to look and function like an authentic page change.

Sources: 

[How to make Google Analytics work in a Single Page Application (SPA)](http://tech.webinterpret.com/how-to-make-google-analytics-work-in-a-single-page-application-spa/)



__`index.html`__

in the header of the `index.html` page, load the script to load google analytics 

```javascript

<script>  
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
</script>  
```


__`app.js`__

Inside `app.js` on `componentDidMount()` create an instance of GA script and attach it to the window so we have access to it at all times.


```javascript

componentDidMount(){

    window.ga('create', 'UA-XXXXXXX-X', 'auto');

}

```

__`app.js`__

create a method that takes in a `url` and sets the page view , then sends the view to google analytics: 

```javascript 

setPageAndSendToGA = url => {
    window.ga('set', 'page', url);
    window.ga('send', 'pageview');
  };

```

Next, Create a method that takes in the location provided by `this.props.location`.

Build a conditional that fires our `setPageAndSendToGA()` whenever a specific URI path is passed in.



```javascript
...



  trackGoogleAnalytics = location => {
    if (window.ga) {
      if (location.pathname == '/sign-up') {
        let url = location.pathname;
        this.setPageAndSendToGA(url);
      }

      if (location.search.length == 10) {

        // here we are using search Params, so we concat it to the url string

        let url = location.pathname + location.search;
        this.setPageAndSendToGA(url);
      }
    }
  };

...

```
__app.js__

Then in the `render()` we call the function, and it will fire every time the page `location` changes

```javascript

render(){
   
 this.trackGoogleAnalytics(this.props.location);

}


```

Checkout the article listed above in the sources, for a more detailed explanation, this is just my adapted implementation I used for our app.

TROLL ME: 

- there is probably a better time to run this function , instead of the render. for our use case, this render is in the top most component in `app.js`

- there might be a better way to listen for page changes in `browserRouter` object , instead of using the `props.location`

- please feel free to critique me below in the comments so i can learn to! or make adjustments to the article.