npm i react-analytics-ga4
import ReactGA from "react-analytics-ga4";
ReactGA.initialize("your GA measurement id");
More example can be found in test suite
// Multiple products (previously known as trackers)
ReactGA.initialize([
{
trackingId: "your GA measurement id",
gaOptions: {...}, // optional
gtagOptions: {...}, // optional
},
{
trackingId: "your second GA measurement id",
},
]);
// Send pageview with a custom path
ReactGA.send({ hitType: "pageview", page: "/my-path", title: "Custom Title" });
// Send a custom event
ReactGA.event({
category: "your category",
action: "your action",
label: "your label", // optional
value: 99, // optional, must be a number
nonInteraction: true, // optional, true/false
transport: "xhr", // optional, beacon/xhr/image
});
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://www.googletagmanager.com/gtag/js |
options.gaOptions | object Optional Reference |
options.gtagOptions | object Optional |
Parameter | Notes |
---|---|
fieldsObject | object Required |
This method signature are NOT for UA-XXX
Parameter | Notes |
---|---|
name | string Required A recommended event or a custom event |
params | object Optional |
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 |
Parameter | Notes |
---|---|
fieldsObject | object Required |
import { ReactGAImplementation } from "react-analytics-ga4";
class MyCustomOverriddenClass extends ReactGAImplementation {}
export default new MyCustomOverriddenClass();
Use Google Analytics Debugger Chrome Extension to see logs
This project is licensed under the MIT License, the same as the original project.
Original code by Han Lin Yap.