How to set up and use Google Analytics in React Apps
One of our customers asked for two requirements:
- Use routes for each of the application's views
- Be able to track the navigation routes using Google Analytics.
React apps are SPA (Single Page Application) that is the reason we don't see any change in the browser's address bar. Usually we saw the same URL.
To be able to meet the first requirement, we use
react-router package, this package allow us to navigate in both ReactJS and React Native apps. Also, we can use it for SSR app (Server Side Rendering). In this way, the requirement was meet without issues.
Also the second requirement can be meet in an easy way. The first step is to install
react-ga package, it is a wrapper for Google Analytics script.
# Using yarn
yarn add react-ga
# Using npm
npm install react-ga --add
Then, we should import the component and configure.
import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000000-0'); // Here we should use our GA id
The next step is to use the different methods to track whatever we want to track, for example, to track a page view we can use something like:
Or to track an event (a click, zoom, create an user), we can use something like:
action: 'Created account'
If we want to automatize the process of tracking each route, we can use
listen event from the
history object with something like:
history.listen(location => ReactGA.pageview(location.pathname));
With this, we ask React Router to handle the tracking for us.
If you like this story clap as many times as you want, and to see similar stories about technology, check our publications and leave us a comment if you have any question.
If you need a team that can help you to implement your ideas in React JS or React Native, feel free to ping us using our website and filling the contact form.