If you have a single page app that has no routes, getting visitors tracked with Google Analytics is pretty straight forward using the React Google Analytics Module.
First create your tracking ID from Google Analytics by going to https://analytics.google.com/ A howto guide is available here.
Then in the parent component of your React.js app
- Install the react-ga module:
npm install --save react-ga - Import this module at the top of the app:
import ReactGA from 'react-ga'; - And add the 2 lines of code into your constructor as shown below on lines 12 and 14.
I had data being tracked within 24 hours from adding this module.
If you are using react-router, there is a little more config as outlined here.
Any questions, let me know!
Hey Man thank you! I was looking for this for awhile :)
Now do I need to do that for each component? I have only done it on the main component that is first loaded.
Hey David. You only need it on the main component for single page apps. And you’re welcome!
Hello Andrew, Thanks a lot for your post.
BTW, I’m running my CRA in my localhost computer. Should I deploy CRA up online for GA to track my landing page? or is it possible while i’m working in my localhost dev environment?
Thank you
Hey Johnny. Excellent question. I wasn’t sure, so I just tested it out by running one of my apps from localhost .. and indeed looking at the real-time overview on https://analytics.google.com it shows me connected to it.
In addition, it looks like from the official docs, that Google does detect localhost https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#automatic_cookie_domain_configuration
Thanks for the article Andrew. Do you know how to track Page Load Time with ReactGA? I’m using ReactGA.timing, but I can’t seem to get the page load time to work.
Hey Adrian. I haven’t played with page load times, but maybe you can try
add siteSpeedSampleRate: 100 to the gaOptions objecthttps://github.com/react-ga/react-ga#reactgainitializegatrackingid-options