Debugger in local dev is not showing any information

[Michael-Xie]

It is related to https://github.com/PriceRunner/react-ga4/issues/37

1. I downloaded the Chrome extension: Google Analytics Debugger, and turned it on
2. My application is at localhost:3000
3. On Inspect > Console, I see Navigated to http://localhost:3000 and nothing else

I expect to see events sent and shown on the console when interacting with buttons.

What might be the issue?

Below is the hook I created:

import ReactGA from 'react-ga4';

export default function useGoogleAnalytics() {
	const initialize = () => {
		const isDev =
			!process.env.NODE_ENV || process.env.NODE_ENV === 'development';
		ReactGA.initialize(process.env.REACT_APP_GA_ID, { testMode: isDev });
	};
	const recordEvent = (payload) => {
		ReactGA.event(payload);
	};
	const recordPageview = (page) => {
		console.log({ page });
		ReactGA.send({ hitType: 'pageview', page });
	};

	return { initialize, recordEvent, recordPageview };
}

[MForMarlon]

@Michael-Xie For your payload in events, are you using the old style with category/action/label/value? If not, you need 2 params, where the first is the event name, and the second is the object.

[Michael-Xie]

@Michael-Xie For your payload in events, are you using the old style with category/action/label/value? If not, you need 2 params, where the first is the event name, and the second is the object.

I am using the old style, so payload would have

type Payload = {
  action: string;
  category: string;
  label: string;
}

[MForMarlon]

@Michael-Xie For your payload in events, are you using the old style with category/action/label/value? If not, you need 2 params, where the first is the event name, and the second is the object.

I am using the old style, so payload would have

type Payload = {
  action: string;
  category: string;
  label: string;
}

Ok that looks fine. I guess the next thing we should look at is the code where you are calling the functions in the hook. Would you be able to provide that?

[Michael-Xie]

@Michael-Xie For your payload in events, are you using the old style with category/action/label/value? If not, you need 2 params, where the first is the event name, and the second is the object.

I am using the old style, so payload would have

type Payload = {
  action: string;
  category: string;
  label: string;
}

Ok that looks fine. I guess the next thing we should look at is the code where you are calling the functions in the hook. Would you be able to provide that?

Here is a sample of an onChange function:

	// Save date on preset change
	const savePreset = (index) => {
		setExcluded([]);
		setCustom({ isCustom: false, index });
		const selectedDatePreset = datePresets[index];
		setDate({
			fromDate: selectedDatePreset.fromDate(),
			endDate: selectedDatePreset.toDate(),
		});
		recordEvent({
			category: `${reportType.type} - Date Time Control V2`,
			action: `Changed Date Preset - ${selectedDatePreset.id}`,
			label: user?.currentCustomer.name,
		});
	};

[MForMarlon]

@Michael-Xie Ok, and I presume you are calling initialize() somewhere in the root of your app?

[Michael-Xie]

@Michael-Xie Ok, and I presume you are calling initialize() somewhere in the root of your app?

I am calling from App.js

export default function App() {
	const {
		isLoading,
                // removed non-essential other keys
	} = useApplicationData();

	const { initialize } = useGoogleAnalytics();

	// Initialize google analytics
	useEffect(() => {
		if (!isLoading) {

			initialize();
		}
	}, [isLoading]);

[MForMarlon]

@Michael-Xie The last option I can think of for debugging would be commenting out everything else except for App and see if initialize is being called, and if the debugger extension is logging in the console. It should work locally. Otherwise, I'm not sure what else to do.

[Michael-Xie]

I tried removing as much as possible from index.js where App is embedded in. It didn't have any change to the logging when looking at Inspect > Console.

When I turn on or off the Chrome extension, it would show the following:

I expect to see the custom events when I select a button or dropdown, but nothing happens.

One thing I did notice is that the script is attached after the body instead of at the <head> for my deployed version.

Lastly, I wonder how you setup GA4 on google analytics, as I only see the default events and none of the custom ones.

[MForMarlon]

Here's another idea - in the console, if you manually execute gtag('custom event');, do you see that in the Realtime tab in GA?

[Michael-Xie]

Here's another idea - in the console, if you manually execute gtag('custom event');, do you see that in the Realtime tab in GA?

Do you mean these steps?

1. Go to the deployed version (the web stream has the deployed version's url)
2. Go to Inspect tool (on Chrome)
3. On the console tab, execute gtag('custom event'
4. On Google Analytics > Reports > Real time, check "Event count by Event name" to see if "custom event" can be seen

[MForMarlon]

Here's another idea - in the console, if you manually execute gtag('custom event');, do you see that in the Realtime tab in GA?

Do you mean these steps?

1. Go to the deployed version (the web stream has the deployed version's url)
2. Go to Inspect tool (on Chrome)
3. On the console tab, execute gtag('custom event'
4. On Google Analytics > Reports > Real time, check "Event count by Event name" to see if "custom event" can be seen

Hi @Michael-Xie, yes, these steps are correct. If this doesn't work, then that means that the tag was not initialized properly, or perhaps there might have been a copy/paste error with the tag id.

[yuta-tkd]

You can use ReactGA._queueGtag.

Example

setInterval(() => {
        const calls = ReactGA._queueGtag
        if (calls && calls.length > 0) {
            calls.forEach(v => {
                console.log(v)
            })
            ReactGA._queueGtag = []
        }
    }, 1000)

[juliuspopa]

For me, having the DuckDuckGo Privacy Essentials Chrome Extension turned on led to Google Analytics failing. Disabling the extension fixed the issue.