GA4React - Google Analytics 4 React
Simple wrapper of ga4 scripts for React: https://developers.google.com/analytics/devguides/collection/ga4
Google Analytics 4 React
Example without components
const ga4react = new GA4React(
'YOUR GA CODE',
{ /* ga custom config, optional */ },
[ /* additional code, optional */ ],
5000 /* timeout, optional, defaults is 5000 */,
options /* { nonce: ['first-script-is-async','second-script'] } */
);
ga4react.initialize().then((ga4) => {
ga4.pageview('path')
ga4.gtag('event','pageview','path') // or your custom gtag event
},(err) => {
console.error(err)
})Inject GA4React function in props of childrens
Example with custom components 'GA4R'
const Test: React.FC<any> = ({ ga4 }) => {
return <>{ga4 && console.log(ga4)}</>;
};
<GA4R code="YOUR GA CODE">
<Test></Test>
</GA4R>RENDER:
console.log results:
{pageview: Æ’, gtag: Æ’, event: Æ’}
Components withTracker
Pass pageview data to the path prop:
const Tracker = withTracker(props => <>{JSON.stringify(props)}</>);
...
<Tracker path="myCustomPath" gaCode="GA-CODE"></Tracker>useGA4React Hook
const Example = () => {
const ga4React = useGA4React(); // GA CODE, optional, if empty try to get from globals
return <>{JSON.stringify(ga4React)}</>;
};"Manual start"
import React from "react";
import ReactDOM from "react-dom";
import GA4React, { useGA4React } from "ga-4-react";
const ga4react = new GA4React("G-1JXXXXX");
function MyApp() {
const ga = useGA4React();
console.log(ga);
return <div className="App">hi!</div>;
}
(async () => {
await ga4react.initialize();
ReactDOM.render(
<React.StrictMode>
<MyApp />
</React.StrictMode>,
document.getElementById("root")
);
})();