How to Integrate Google Analytics Tracking Code in React Js
Google Analytics is a free tool provided by Google; when it comes to marketing, this tool does many things if you want to get reports about your website traffic, audience geo, user behavior, etc.
Then this is the tool you must add to your web application, Today in this quick yet profound tutorial. We will learn how to set up Google Analytics in React web applications.
To integrate GA in the React app, we will use the React GA package. Furthermore, we will also logically enumerate all the processes essential to set up Google analytics in React.
The react ga is a JavaScript module that is essentially used to integrate Google Analytics tracking code in a react website. This plugin is designed to operate with the freshest version of Google Analytics, Universal Analytics.
React Js Google Analytics Tracking Code Example
- Step 1: Create React Project
- Step 2: Add React GA Library
- Step 3: Insert Analytics Code
- Step 4: Start Application
Create React Project
In this step, you will use the provided command to create a new React project.
So, get into the command line tool of your code editor, type and evoke the given command.
npx create-react-app react-ga-demo
After the app is ready, make sure to enter into the project.
cd react-ga-demo
There after use the given command to open the project in code editor.
code .
Add React GA Library
Further, type the given command on the command line tool and execute this command.
Following command will install react ga library in your react project.
# npm
npm install react-ga
# bower
bower install react-ga
Insert Analytics Code
Next, you have to import the ReactGA module into the App js file, this module give you access to ReactGA methods that will help you initialize the GA.
Now, you have to add the Google Analytics tracking code into the initialize()
functions.
Open and update the src/App.js file.
import { Component } from "react";
import "./App.css";
import ReactGA from 'react-ga';
class App extends Component {
setGA = () => {
ReactGA.initialize('UA-xxxxxx-xx');
ReactGA.pageview('Init page view');
};
componentDidMount(){
this.setGA();
}
render() {
return (
<div className="App">
<h2>React Google Analytics Example</h2>
</div>
);
}
}
export default App;
Here are the properties and options that you may use, and they will help you extend the feature of react ga.
Value | Notes |
---|---|
gaTrackingID | String . Required. GA Tracking ID like{” “}UA-000000-01 . |
options.debug | Boolean . Optional. If set to true , will outputadditional feedback to the console. |
options.titleCase | Boolean . Optional. Defaults to true . If setto{” “} false , strings will not be converted to title casebefore sending to GA. |
options.gaOptions | Object . Optional.{” “}GA configurable create only fields. |
options.gaAddress | String . Optional. If you are self-hosting your{” “}analytics.js , you can specify the URL for it here. |
options.alwaysSendToDefaultTracker | Boolean . Optional. Defaults to true . If setto{” “} false and using multiple trackers, theevent will not be send to the default tracker. |
options.testMode | Boolean . Optional. Defaults to false . Enablestest mode. See{” “} here {” “} for more information. |
options.standardImplementation | Boolean . Optional. Defaults to false . Enablesloading GA as google expects it. See{” “} here {” “} for more information. |
options.useExistingGa | Boolean . Optional. Skips call to window.ga() ,assuming you have manually run it. |
options.redactEmail | Boolean . Optional. Defaults to true . Enablesredacting a email as the string that in “Event Category” and “Event Action”. |
Start Application
Again get on to the command line screen on your code editor, type the command that will start the react app.
npm start
Conclusion
We have learned how to set up Google Analytics in React app using the third-party package. We reckon this guide will help you insert the analytics tracking code.