# react-ga4

> React Google Analytics 4

Latest version **3.0.1** (published 2026-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ga4
pnpm add react-ga4
yarn add react-ga4
bun add react-ga4
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2026-03-24 |
| First published | 2021-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 43.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 327 |
| Author | Han Lin Yap |
| Maintainers | codler |
| Keywords | GA, GTM, Google Analytics, Google Analytics 4, Google Tag Manager |

## Links

- npm: https://www.npmjs.com/package/react-ga4
- Repository: https://github.com/codler/react-ga4
- Homepage: https://github.com/codler/react-ga4#readme
- Issues: https://github.com/codler/react-ga4/issues
- npm.io page: https://npm.io/package/react-ga4

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 3.0.1 (latest) — 2026-03-24
- 3.0.0 — 2026-03-24
- 2.1.0 — 2023-03-06
- 2.0.0 — 2023-01-19
- 1.4.1 — 2021-11-10
- 1.4.0 — 2021-11-01
- 1.3.0 — 2021-10-23
- 1.2.0 — 2021-10-21
- 1.1.2 — 2021-10-14
- 1.1.1 — 2021-10-05
- 1.1.0 — 2021-10-04
- 1.0.6 — 2021-08-31
- 1.0.5 — 2021-08-18
- 1.0.4 — 2021-06-30
- 1.0.3 — 2021-06-24
- … 3 more at https://npm.io/package/react-ga4/versions

## README

# ✨ Looking for sponsors! ✨

Maintainer need help with sponsor!

<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sponsors/codler"><img src="https://avatars.githubusercontent.com/u/102052?v=4&s=100" width="100px;" alt="Han Lin Yap"/><br /><sub><b>Han Lin Yap</b></sub></a><br /><a href="#maintenance-jakebolam" title="Maintenance">🚧</a></td>
    </tr>
  </tbody>
</table>

# React Google Analytics 4

## Migrate from old react-ga

```js
// Simply replace `react-ga` with `react-ga4` and remove `ReactGA.pageview()`
// 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");
```

## 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", 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](https://developers.google.com/tag-manager/web/csp)      |
| options.testMode    | `boolean` Default false                                                                                                 |
| options.gtagUrl     | `string` Default `https://www.googletagmanager.com/gtag/js`                                                             |
| options.gaOptions   | `object` Optional [Reference](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-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](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 |

#### ReactGA.send(fieldsObject)

| Parameter    | Notes             |
| ------------ | ----------------- |
| fieldsObject | `object` Required |

#### ReactGA&#46;gtag(...args)

#### ReactGA&#46;ga(...args)

### 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

---
_Source: https://npm.io/package/react-ga4 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._