Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/PriceRunner/react-ga4
React Google Analytics 4
https://github.com/PriceRunner/react-ga4
analytics react reactjs
Last synced: 7 days ago
JSON representation
React Google Analytics 4
- Host: GitHub
- URL: https://github.com/PriceRunner/react-ga4
- Owner: PriceRunner
- Created: 2021-05-27T12:30:21.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-02T23:20:21.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T23:21:34.147Z (7 months ago)
- Topics: analytics, react, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-ga4
- Size: 771 KB
- Stars: 307
- Watchers: 5
- Forks: 39
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Google Analytics 4
## Migrate from old react-ga
```js
// Simply replace `react-ga` with `react-ga4`
// import ReactGA from "react-ga";
import ReactGA from "react-ga4";
```
## Install
```bash
npm i react-ga4
```
## Usage
```js
import ReactGA from "react-ga4";
ReactGA.initialize("your GA measurement id");
ReactGA.send("pageview");
```
## Example
More example can be found in [test suite](src/ga4.test.js)
```js
// 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" });
// 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](https://developers.google.com/tag-manager/web/csp) |
| options.testMode | `boolean` Default false |
| options.gaOptions | `object` Optional [Reference](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference) |
| options.gtagOptions | `object` Optional |
| options.legacyDimensionMetric | `boolean` Default true |
#### 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](https://developers.google.com/tag-platform/gtagjs/reference/events) 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 |
| options.dimension`{1...200}` | `any` Optional |
| options.metric`{1...200}` | `any` Optional |
#### ReactGA.send(fieldsObject)
| Parameter | Notes |
| ------------ | ----------------- |
| fieldsObject | `object` Required |
#### ReactGA.gtag(...args)
#### ReactGA.ga(...args)
#### ~~ReactGA.pageview(path, \_, title)~~
Deprecated Use `.send("pageview")` instead
#### ~~ReactGA.outboundLink({ label }, hitCallback)~~
Deprecated Use `enhanced measurement` feature in Google Analytics.
### Extending
```js
import { ReactGAImplementation } from "react-ga4";
class MyCustomOverriddenClass extends ReactGAImplementation {}
export default new MyCustomOverriddenClass();
```
## Debugging
Use [Google Analytics Debugger Chrome Extension](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en) to see logs
## Maintainer
[Han Lin Yap](https://github.com/codler)
## License
MIT