1. create a new propety
In Analytics your account Dashboard, click the left corner gear icon (Admin). Then "Create" -> "property".
After created, it will give a pice of js script for the Google tag.
Add this pice of code to the react index.html file, under .
<head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=YOURGA4MEASUREID"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'YOURGA4MEASUREID');
</script>
<title>Vite+React</title>
</head>
after this it will also gives you a MEASUREMENT_ID, which used for initialization in the code.
Or in Admin, under Data collection and modification, click Data streams.[1]
2. react-ga4
Install react-ga4
npm install react-ga4
3. Initialize
In the Start code (eg. App.js or your own StartPage.js) initialize the GA4.
useEffect(() => {
// Initialize Google Analytics
ReactGA.initialize(TRACKING_ID);
ReactGA.send({
hitType: 'pageview',
page: 'PAGEYOUNEED',
});
}, []);
4. Define your own event
Next define some events, for example, we want to track when user click the button.
import React from 'react';
import ReactGA from 'react-ga4';
function MyComponent() {
const trackButtonClick = () => {
ReactGA.event({
category: "Button",
action: "Click",
label: "Submit Button",
});
// Perform button's action
alert("Button Clicked")
};
return (
<button onClick={trackButtonClick}>Submit</button>
);
}
export default MyComponent;
Use the ReactGA.event() method to track events on the Page you want. This method accepts an object with the following properties:
- category: The category of the event (e.g., "User", "Product", "Form").
- action: The action that was performed (e.g., "Login", "Add to Cart", "Submit").
- label (optional): A label for the event (e.g., "Newsletter Signup").
- value (optional): A numerical value associated with the event.
- nonInteraction (optional): A boolean to indicate if the event is a non-interaction event. Defaults to false
5. Addition
You can directly use the react-ga4 command in code, but better to use a separated file for all these. for example you can define a logEvent to use for different Event use later.
export const logEvent = (category, action, label) => {
ReactGA.event({
category,
action,
label,
});
};
Top comments (0)