codler/react-ga4

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 41 Commits
.github		.github
src		src
types		types
.gitignore		.gitignore
README.md		README.md
babel.config.js		babel.config.js
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

✨ Looking for sponsors! ✨

Maintainer need help with sponsor!

Han Lin Yap
_{Han Lin Yap}
🚧

React Google Analytics 4

Migrate from old react-ga

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

Install

npm i react-ga4

Usage

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

Example

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
});

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://www.googletagmanager.com/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

import { ReactGAImplementation } from "react-ga4";
class MyCustomOverriddenClass extends ReactGAImplementation {}
export default new MyCustomOverriddenClass();