React GA Neo

A fork of react-ga4 with a few more features sprinkled on top.

• Install
• Usage
  • Migrating from old react-ga
• Example
• Reference
  • Extending
• License

Install

This package is available at npm as react-ga-neo.

npm install react-ga-neo

Usage

import ReactGA from "react-ga-neo";

ReactGA.initialize("G-XXXXXXXXXX"); // Your GA4 measurement id

Migrating from old react-ga

Simply replace react-ga with react-ga-neo and remove ReactGA.pageview() calls.

// import ReactGA from "react-ga";
import ReactGA from "react-ga-neo";

A few old methods may not be available. You may use ReactGA.gtag() or React.ga() as last resort to call gtag/ga directly. Alternatively, you can extend the library. Pull requests with improvements are welcome! :)

Example

Check out the tests for more examples.

// 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.titleCase | boolean Default true | | 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 is 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.exception([details])

| Parameter | Notes | | ------------------- | ----------------- | | details.description | string | | details.fatal | string |

ReactGA.timing(timingObject)

| Parameter | Notes | | --------------------- | ----------------- | | timingObject.category | string Required | | timingObject.variable | string Required | | timingObject.value | number Required | | timingObject.label | string Optional |

ReactGA.gtag(...args)

Used to call gtag() directly (see official documentation for details).

ReactGA.ga(...args)

DEPRECATED.

Extending

import { ReactGAImplementation } from "react-ga-neo";

class MyCustomOverriddenClass extends ReactGAImplementation {}

export default new MyCustomOverriddenClass();

License

MIT