Instead of copying and pasting a custom event, I have created a utils/ga.js file which is the below. I am just wondering if this would still be ok to use like this?

import ReactGA from 'react-ga4'

// initialize google analytics
ReactGA.initialize('G-7XXX')


// custom pageview with the location from react router
export const pageView = path => {
  return ReactGA.send({hitType: 'pageview', page: path})
}

// custom event with label being an optional parameter
export const customEvent = (category, action, label = '') => {
  return ReactGA.event({
    category: category,
    action: action,
    label: label,
  })
}

The use of useLocation here, will this still work? For example if I want to import the function like so:

import {pageView} from '../utils/ga.js'
import {useLocation} from 'react-router-dom'

// and use it like 
let location = useLocation()

pageView(location.pathname)

Would the useLocation hook know the location even though I called it in a different file?

Also is this a good practice, especially with using the customEvent and calling it like

import {customEvent} from '../utils/ga.js'

const event = customEvent
event('somestring', 'some_event')

ReactGA initialize, gives options to make the titleCase boolean false. Could such an option be added in react-ga4 as well?

So that following code, leads to add_to_cart and not in Add_to_cart?

ReactGA.initialize( process.env.GA_MEASUREMENT_ID, { gaOptions: { titleCase: false } } );
ReactGA.event({
      category: "shopping",
      action: "add_to_cart",
      label: "name",
});

Taken from the Web Vitals repository, here is the recommended way to send data to Google Analytics:

Using gtag.js (Google Analytics 4)

Google Analytics 4 introduces a new Event model allowing custom parameters instead of a fixed category, action, and label. It also supports non-integer values, making it easier to measure Web Vitals metrics compared to previous versions.

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToGoogleAnalytics({name, delta, value, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/ga4
  gtag('event', name, {
    // Built-in params:
    value: delta, // Use `delta` so the value can be summed.
    // Custom params:
    metric_id: id, // Needed to aggregate events.
    metric_value: value, // Optional.
    metric_delta: delta, // Optional.

    // OPTIONAL: any additional params or debug info here.
    // See: https://web.dev/debug-web-vitals-in-the-field/
    // metric_rating: 'good' | 'ni' | 'poor',
    // debug_info: '...',
    // ...
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

However the ReactGA.event function does not seem to implement all these fields, could you please look into this and advise on it as sending performances data is really important.

For more information: https://github.com/GoogleChrome/web-vitals/blob/main/README.md

Alternatively, if you could provide an example on how to set up the custom dimension and set up the sending of the analytics and add it to the doc, big kudos!

Hi there, I am implementing this library but am curious why these lines exists: https://github.com/PriceRunner/react-ga4/blob/0e2e3a624d8c8394438e5ea955f6dabdf01304e4/src/ga4.js#L473-L488

It creates 10.5kb of JSON that is then sent, and yea, not sure why, or how to stop it from doing so.

Many thanks.

If I only use ReactGA.send("pageview"); I can't see the page views on Google analytics. I had to use ReactGA.send({ hitType: "pageview", page, title: page }); in order to see the page views for different pages on GA.

Would it be possible to extend this library to allow the use of debug mode? It would be very helpful when testing events on a development branch.

See below link for more info. https://support.google.com/analytics/answer/7201382?hl=en

hI

I'm trying this function and simple not working =( ReactGA.send({ hitType: "pageview", page: "/my-path" });

debugging the issue i just found out that parameters are not passed correctly

or it is just me?

this is my code

import ReactGA from 'react-ga4';
import { GOOGLE_ANALYTICS_GA4_ID } from '../api/urlConfig';

export const initGA = () => {
   ReactGA.initialize(
       GOOGLE_ANALYTICS_GA4_ID,
       { debug: true }
       );
}

export const logPageView = () => {
    ReactGA.set({
        page: window.location.pathname
        
    });

    ReactGA.send("pageview");
    // ReactGA.pageview(window.location.pathname);
};

export const logPageEventCustom = (pageEvent, page) =>{

    ReactGA.send({ hitType: "pageview", page: "/my-path" });
   
};

i'm using logPageEventCustom function but the custom route "/my-path" is not appearing

and this is the console log

please help

thanks

Since ga4, events can be sent with custom parameters. The current implementation of ReactGA does not match gtag.

• Event action is a separate parameter
• All predefined event parameters (category, label, value, nonInteraction, transport) are not needed. Instead we can send any parameters we need.

Something like this would match gtag : ReactGA.event('myEvent', { my_param_1: 'my_value_1' })

https://developers.google.com/tag-platform/gtagjs/reference#event

One of the most useful feature of react-ga is the debugging output to troubleshot issues as follows:

ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID, {
  debug:
    !process.env.NODE_ENV ||
    process.env.NODE_ENV === 'development',
});

Could you please consider implementing this?

Hello, I'm trying to save an login event with the method email, like this:

The Data Layer response is:

But the Login Method variable is undefined in its table:

How can I pass a valid method param?

Not possible to anonymizeIp and location anymore with react-ga4.

ReactGA.set({ anonymizeIp: true }) ReactGA.set({ location: 'Anonymized' })

Doesn't really work with anonymizing

meanwhile published the fork to https://github.com/rawpixel-vincent/react-ga4-forked/tree/1.5.4

reporting issue, feature requests, pull requests welcome

#53

Hi there, thanks for this library made it easy to migrate to v4.

I just have one question, what is the reason behind this that you are mapping exactly? There wasn't something like this in react-ga library. Is it necessary?

As per GA4 docs it should be possible to set the event parameter traffic_type with the value 'internal'. I guess currently it's not possible to do this with react-ga4.

I tried adding traffic_type: 'internal' when calling ReactGA.send. However, I noticed that it is making two calls to www.google-analytics.com, one with the passing query string as tt=internal and the other without.

If this feature is not available, appreciate it if it can be added. Currently, I'm using the testmode option which doesn't really give us what we need.

When I try to default import as the usage stated "import 'ReactGA' from 'react-ga4'" ReactGA.initialize('G-0000000000') is not usable and saying it is not a function.

in the console.log, it is importing both ReactGAImplementation and default so it can only be initialize through ReactGA.default.initialize(). Is this intended because the usage tutorial is not stated like that

Hi, first of all, thanks for your job doing this package.

I would like to know of could I migrate the usage for 'ec' plugin from old reactGA.

For example:

ReactGA.plugin.require('ec');

const TRACKERS = [COMPANY_TRACKER, COMMERCE_TRACKER];

TRACKERS.forEach((tracker) => ReactGA.ga(`${tracker}.require`, 'ec'));

// Inside a foreach for products and trackers : 
...
ReactGA.plugin.execute(`${tracker}.ec`, 'addToCart', PRODUCT);
...
ReactGA.plugin.execute(`${tracker}.ec`, 'setAction', 'purchase', PURCHASE);

Thank you.