2.1.0 • Published 2 years ago

react-ga4 v2.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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)

ParameterNotes
GA_MEASUREMENT_IDstring Required
options.noncestring Optional Used for Content Security Policy (CSP) more
options.testModeboolean Default false
options.gtagUrlstring Default https://www.googletagmanager.com/gtag/js
options.gaOptionsobject Optional Reference
options.gtagOptionsobject Optional

ReactGA.set(fieldsObject)

ParameterNotes
fieldsObjectobject Required

ReactGA.event(name, params)

This method signature are NOT for UA-XXX

ParameterNotes
namestring Required A recommended event or a custom event
paramsobject Optional

ReactGA.event(options)

ParameterNotes
optionsobject Required
options.actionstring Required
options.categorystring Required
options.labelstring Optional
options.valuenumber Optional
options.nonInteractionboolean Optional
options.transport'beacon'\|'xhr'\|'image' Optional

ReactGA.send(fieldsObject)

ParameterNotes
fieldsObjectobject 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

@flyteorg/console@flyteoss/console@infinitebrahmanuniverse/nolb-react-gadynamic-formly-react-test@everything-registry/sub-chunk-2557edtech-event-handler-testthemashroom-mashmyroomtcp-core-utilitiesterriajstest-mash-my-roomwidget-presalestrapi-gtm-moduletestpackagetargetkiv2testsupplychain2volto-google-analytics@performant-software/react-components@performant-software/shared-componentsjoy-treasurykalehq-exams@gip-recia/wisemapping-webapp@xsolla/metaframe-testturbocomply-frontendstudiokit-scaffolding-jsspyne-pyxlsonic-widget-apixtripkit-reacttwitch-badge-collector-cc@arcblock/ux@asia-x/sdk@ariga/atlas-website@backstage/plugin-analytics-module-ga4@backroad/backroad@backstage-community/plugin-analytics-module-ga4@churchapps/helpers@churchapps/apihelper@churchapps/apphelper@acceleratxr/react-shared@adalong/widget@coderehab/greenzine-react-deprecatedyeboc-formutomo-portal-sdk@feathery/react@gwiyeomgo/react-toolkit@hedgehogcomputing/website@etherealengine/client-core@globalfishingwatch/react-hooks@libhub/utils@ir-engine/client-core@mottostreaming/player@next-book/interface@nbai/nbmap-gl@kitconcept/volto-dsgvo-banner@keadex/mina-react@pplsohampatel/terriajs@prozilla-os/core@scrippsproduct/scripps-external-component-library@scefira/ui-elements@pickguru/pages@pickguru/groups@os1-platform/consoleui@ossy/connected-components@ossy/design-system@pelcro/react-pelcro-js@stackflow/plugin-google-analytics-4mui-treasurymeta-sam-ripmetasnippetsopenblock-guinsc-component-libraryparax-aaveparax-nemaparax-paraspaceserva-questionnaire-renderreact-appchargesalmonwalletv2projectplanerprojectplanerv2safepay-analyticsnbmap-glpl-claims-hubplatform-react-librarypoll.ccpresale-widgetgramene-searchgwallethelx-analyticshadas-react-image-editorheds_authmaersk-pool-partnerkonfhub-design-system@stokr/components-library@stellar-service-brands/r1-components@storysdk/core@tellescope/react-components@tecsinapse/react-boilerplate@thinkincoin/swap@usedispatch/forum@vagabond-inc/react-boilerplate-app@tliuhr/backroad@xsolla/babka-overlay-sdk
2.1.0

2 years ago

2.0.0

2 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.2.0

4 years ago

1.1.1

4 years ago

1.1.2

4 years ago

1.1.0

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago