Adding Google Analytics to React

Question

I am trying to add Google Analytics to a React Web Application.

I know how to do it in HTML/CSS/JS sites and I have integrated it in an AngularJS app too. But, I'm not quite sure how to go about it when it comes to react.

With HTML/CSS/JS, I had just added it to every single page.

What I had done with AngularJS was adding GTM and GA script to index.html and added UA-labels to the HTML divs (and buttons) to get clicks.

How can I do that with React?

Please help!

Answer 1

Update: Feb 2019
As I saw that this question is being searched a lot, I decided to expand my explanation.
To add Google Analytics to React, I recommend using React-GA.
Add by running:
npm install react-ga --save

Initialization:
In a root component, initialize by running:

import ReactGA from 'react-ga'; ReactGA.initialize('Your Unique ID'); 

To report page view:

ReactGA.pageview(window.location.pathname + window.location.search); 

To report custom event:

ReactGA.event({   category: 'User',   action: 'Sent message' }); 

More instructions can be found in the github repo

---

The best practice for this IMO is using react-ga. Have a look at the github rep

Answer 2

If you prefer not to use a package this is how it can work in a react application. Add the "gtag" in index.html

<!-- index.html -->  <script>             window.dataLayer = window.dataLayer || [];             function gtag() {                 dataLayer.push(arguments);             }             gtag("js", new Date());              gtag("config", "<GA-PROPERTYID>");         </script>  

In the submit action of the login form, fire off the event

window.gtag("event", "login", {             event_category: "access",             event_label: "login"         });