unrealmanu / ga-4-react Goto Github PK
View Code? Open in Web Editor NEWgoogle analytics 4 wrapper for react
License: MIT License
google analytics 4 wrapper for react
License: MIT License
While going through GA documentation, they do support multiple sub domains for which events can be recorded.
We have multiple domains (one for each customer, a.example.com
, b.example.com
, etc. ), and we want to roll up the data collected. This is in addition to per customer data collection.
I tried the same using the below example
const Example = () => {
const ga4React1 = useGA4React('GA_CODE_I', {}, []); // GA CODE, optional, if empty try to get from globals
console.log(ga4React1);
. . .
const ga4React2 = useGA4React('GA_CODE_II', {}, []); // GA CODE, optional, if empty try to get from globals
console.log(ga4React2);
. . .
return <>{JSON.stringify(ga4React)}</>;
};
But the second object always found to be null. Is there anything missed out in above configuration ?
Hi, I've spent some time trying to make it work but to no avail.
I followed the initialization instruction from here.
Trial 1:
/* index.tsx */
// imports
...
const ga4react = new GA4React('G-XXXXXXXXX');
(async (_) => {
await ga4react
.initialize()
.then((ga4: any) => {
ga4.pageview('test', 'test', 'test'); // event doesn't show in GA
})
.catch((err: any) => console.log('Analytics Failure.'))
.finally(() => {
ReactDOM.render(<App />, document.getElementById('root'));
});
})();
Trial 2:
/* somewhere in the app */
const ga4 = useGA4React() as GA4ReactResolveInterface; // use hook
useEffect(() => {
if (ga4) {
ga4.pageview(location.path, location.path, 'page');
}
}, [location.pathname])
...
Could you please let me know what I'm doing wrong?
(Yes. I've also looked at the current and past issues posted here and didn't find them as useful)
Thank you.
I have implemented the manual start with my React project and it works fine. Now migrating to Next JS but I am not sure exactly how I should be implementing this or what could be the best practice for setting up GA4 with Next js
Excuse me, thanks for creating this cool library.
I had a problem in my React App, where when I implemented the current version of Google Analytics (v4) with the ga-4-react
library, my React App often logged out automatically when there was a change in my code during development. But if it's refreshed, it doesn't log out automatically. Does this have any effect from this library?
If so, how do you solve it ?
Thank you.
Please guide
For some scenarios and some browsers, the document.readyState is never set to 'interactive', in which case the google tag manager script isn't added to the head in lib\ga4manager.tsx.
Adding a fallback for readyState == 'complete' fixed this issue for me.
Example:
let scriptAdded = false;
document.onreadystatechange = function() {
if (scriptAdded) {
return;
}
switch (document.readyState) {
case 'interactive':
case 'complete':
head.appendChild(scriptAsync);
scriptAdded = true;
break;
}
};
Hi,
I'm looking for integrating GA4 into my RN project. Would this package work for that, or any other ideas on how to use GA4 in RN?
Hi there,
First of all, thank you for this lib :)
I guess the issue is between my chair and keybard, but I can't seem to get this working.
Here's an excerpt from my code:
import { GA4React } from 'ga-4-react';
const App = () => {
const ga4react = new GA4React('MY GA CODE');
ga4react.initialize()
.then((ga4) => {
console.log('ga4', ga4);
})
.catch((err) => {
console.error('ga4', err)
});
return <p>Test</p>
};
Anytime I try this, I get a timeout error:
Error: GA4React Timeout at ga4manager.tsx:178
No <script>
tag is being added to <head>
, no call is being done to analytics servers.
What am I missing?
Thx for your help!
Does this package supports older versions of Google analytics with Tracking Id and not Measurement Id?
Here is my GA4 configuration in app.js in my react app:
import { GA4React } from 'ga-4-react';
const ga4react = new GA4React('G-P36XPJZXD1');
ga4react.initialize().then(
ga4 => {
ga4.pageview('path');
ga4.event('event', 'pageview', 'path'); // or your custom gtag event
},
err => {
console.error(err);
},
);
But I am getting following errors in console, with Google Analytics Chrome debug extension installed:
GTAG Command: "config", target: "G-P36XPJZXD1", configuration: {}
_react_devtools_backend.js:4026 Invalid event parameter "ipe" on event "gtag.config", parameter will not be logged
Hi,
This is in reference to the this last comment:
#15 (comment)
I am trying to send the event file_download
to GA4 this way:
using the first two arguments: action
and label
Along with the event I would like to send some other metadata. For example page_referrer
- as a parameter, however, when I debug the event()
method, I see that there are only 4 arguments to be passed.
Yet, on GA4 report, there seem to be a long list of parameters that could be captured from one single event:
Am I doing something wrong here, or missing some basic concepts about GA4?
Currently trying to use this library on our site, but can't because the tag manager script gets blocked by our csp. Allowing a nonce or hash to be passed would allow us to get past this I think.
i am trying to send pageview but i get this error when i am navigating to any page
useEffect(() => { const ga4react = new GA4React('G-1JXXXXX'); ga4react.initialize().then((ga4) => { ga4.pageview(location.path + location.search) }, (err) => { console.log('error sending page view', err) }) }, [location])
gtag.js allows you to call gtag('consent', 'default', ...) and then later on gtag('consent', 'update', ...) to prevent tracking and cookies before the user has a chance to consent to them. I can't find a way to do this and if I only add and initialise the script after cookie consent is granted, none of the initial pageview data is sent.
Is there a way to do this currently? (My goal is to not save any cookies until allowed but still send the initial pageview, even though it is sent later)
By default, from GA documentation, the page title which is being sent to GA (on a page view) is document.title
.
The below code to provide custom title works inconsistently.
import { useLocation } from 'react-router-dom';
import { useGA4React } from 'ga-4-react';
. . .
const location = useLocation();
const ga4react = useGA4React('MEASURE_ID');
. . .
ga4react.pageview(
location.pathname + location.search,
null,
location.pathname, // because we do not have page title, use path instead. Can have custom logic
);
The title being sent to GA is mostly empty, and sometimes, the page location is sent. Assigning it to a separate variable, just before pageview also doesn't helps.
Anything missed here ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.