react-ga4

What is react-ga4?

The react-ga4 npm package is a React library for integrating Google Analytics 4 (GA4) into your React applications. It provides a simple and efficient way to track page views, events, and other user interactions within your app.

What are react-ga4's main functionalities?

Initialize GA4

This feature allows you to initialize Google Analytics 4 with your tracking ID. This is the first step to start tracking user interactions.

import ReactGA from 'react-ga4';

ReactGA.initialize('G-XXXXXXXXXX');

Track Page Views

This feature allows you to track page views in your application. It sends a pageview hit to Google Analytics whenever a user navigates to a new page.

import ReactGA from 'react-ga4';

ReactGA.send({ hitType: 'pageview', page: window.location.pathname });

Track Events

This feature allows you to track specific events within your application. You can categorize events and specify actions to get detailed insights into user interactions.

import ReactGA from 'react-ga4';

ReactGA.event({ category: 'User', action: 'Created an Account' });

Track User Timings

This feature allows you to track user timings, such as how long it takes for a particular resource to load. This can help you measure and optimize performance.

import ReactGA from 'react-ga4';

ReactGA.timing({ category: 'JS Libraries', variable: 'load', value: 20 });

Other packages similar to react-ga4

react-ga

react-ga is a popular library for integrating Google Analytics (Universal Analytics) with React applications. While react-ga4 is specifically designed for Google Analytics 4, react-ga is tailored for the older Universal Analytics. Both libraries offer similar functionalities, but react-ga4 is more suitable for the latest GA4 features.

react-gtm-module

react-gtm-module is a library for integrating Google Tag Manager (GTM) with React applications. While it serves a similar purpose of tracking user interactions, it uses GTM instead of GA4. This can be useful if you prefer managing your tags and analytics through GTM.

react-tracking

react-tracking is a library-agnostic tracking solution for React applications. It allows you to send tracking data to various analytics services, including Google Analytics. Unlike react-ga4, it is not limited to GA4 and can be used with multiple tracking providers.

README

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

Debugging

Use Google Analytics Debugger Chrome Extension to see logs

Maintainer

Han Lin Yap

License

MIT