unrealmanu / ga-4-react Goto Github PK

View Code? Open in Web Editor NEW

122.0 122.0 19.0 286 KB

google analytics 4 wrapper for react

License: MIT License

TypeScript 22.68% CSS 4.15% JavaScript 6.04% HTML 67.13%

ga-4-react's People

Contributors

Stargazers

Watchers

Forkers

tom-pavemint jcgertig baconbravo dkindler peregraum rickyromero pavrda sultanshakir fuyucn apollorisky jiawen456 ecerroni davidchanho pantharshit00 wahyuhenditya bytedecoder kud mtoneil elvaaurellie

ga-4-react's Issues

[Question] Can 'useGA4React' hook be used for sub-domains as well ?

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 ?

Not sending events to GA

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.

Can anyone tell me how it can be integrated with Next js

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

Automatically Logout in React App

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.

How to use custom events on button click

Please guide

<script> tag not always added to header

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;
    }
};

Usage with React Native

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?

Can't get it to work :/

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!

'Manual start' fails when a addblocker is installed

Like the title says, trying to access the application that uses manual start with an addblocker activated, I get the following error:

I'm also having a hard time configuring my application with the docs, for someone who's not really pro with react there's a lot of context missing in the examples.

How to send custom params for an event?

is "Error: GA4 is being initialized" expected behaviour?

Hey,

Is "GA4 is being initialized" an expected error within console on any page using this package. Looking at the js code for the package, it seems like the error is thrown while the initialization code is run?

Support for older versions of Google Analytics

Does this package supports older versions of Google analytics with Tracking Id and not Measurement Id?

'Invalid event parameter "_ipe" on event "gtag.config", parameter will not be logged' error in console

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

Send file_download event and pass parameters

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?

Allow passing a nonce or hash for sites with strict CSPs

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.

[Error] GA4React is being initialized

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])

Calling gtag('consent'...) before configure is not possible

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)

ga-4-react + react Router (hash Router)

Hello,

this is my current setup.

and in my app component I generate pages dynamically using React Router (hash Router).
Is it possible to manually trigger a page view so that it gets tracked in GA4?

For example:

[Question] How to have a custom page title sent to GA ?

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 ?

Anonymizing IP address

Hello, I have the following configuration

I'm trying to anonymize the ip address but ga4.gtag('config', 'G-XXXXXXX', { 'anonymize_ip': true }); is not working
Any suggestions?