React Google Analytics 4

Migrate from old react-ga

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

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

// 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.gaOptions | object Optional 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 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

import { ReactGAImplementation } from "react-ga4";

class MyCustomOverriddenClass extends ReactGAImplementation {}

export default new MyCustomOverriddenClass();

Debugging

Use Google Analytics Debugger Chrome Extension to see logs

Maintainer

Han Lin Yap

License

MIT