React Google Analytics 4

Migrate from old react-ga

1// Simply replace `react-ga` with `react-ga4` and remove `ReactGA.pageview()`
2// import ReactGA from "react-ga";
3import ReactGA from "react-ga4";

Install

1npm i react-ga4

Usage

1import ReactGA from "react-ga4";
2
3ReactGA.initialize("your GA measurement id");

Example

More example can be found in test suite

1// Multiple products (previously known as trackers)
2ReactGA.initialize([
3  {
4    trackingId: "your GA measurement id",
5    gaOptions: {...}, // optional
6    gtagOptions: {...}, // optional
7  },
8  {
9    trackingId: "your second GA measurement id",
10  },
11]);
12
13// Send pageview with a custom path
14ReactGA.send({ hitType: "pageview", page: "/my-path", title: "Custom Title" });
15
16// Send a custom event
17ReactGA.event({
18  category: "your category",
19  action: "your action",
20  label: "your label", // optional
21  value: 99, // optional, must be a number
22  nonInteraction: true, // optional, true/false
23  transport: "xhr", // optional, beacon/xhr/image
24});

Reference

ReactGA.initialize(GA_MEASUREMENT_ID, options)

Parameter	Notes
GA_MEASUREMENT_ID	string Required
options.nonce	string Optional Used for Content Security Policy (CSP) more
options.testMode	boolean Default false
options.gtagUrl	string Default https://an4.cryptotaxcalculator.io/gtag/js
options.gaOptions	object Optional Reference
options.gtagOptions	object Optional

ReactGA.set(fieldsObject)

Parameter	Notes
fieldsObject	object Required

ReactGA.event(name, params)

This method signature are NOT for UA-XXX

Parameter	Notes
name	string Required A recommended event or a custom event
params	object Optional

ReactGA.event(options)

Parameter	Notes
options	object Required
options.action	string Required
options.category	string Required
options.label	string Optional
options.value	number Optional
options.nonInteraction	boolean Optional
options.transport	'beacon'|'xhr'|'image' Optional

ReactGA.send(fieldsObject)

Parameter	Notes
fieldsObject	object Required

ReactGA.gtag(...args)

ReactGA.ga(...args)

Extending

1import { ReactGAImplementation } from "react-ga4";
2
3class MyCustomOverriddenClass extends ReactGAImplementation {}
4
5export default new MyCustomOverriddenClass();

Debugging

Use Google Analytics Debugger Chrome Extension to see logs

Maintainer

Han Lin Yap

License

MIT