Open Michael-Xie opened 1 year ago
@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 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;
}
@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 havetype 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 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 havetype 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,
});
};
@Michael-Xie Ok, and I presume you are calling initialize()
somewhere in the root of your app?
@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]);
@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.
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.
Here's another idea - in the console, if you manually execute gtag('custom event');
, do you see that in the Realtime tab in GA?
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?
gtag('custom event'
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?
- Go to the deployed version (the web stream has the deployed version's url)
- Go to Inspect tool (on Chrome)
- On the console tab, execute
gtag('custom event'
- 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.
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)
For me, having the DuckDuckGo Privacy Essentials Chrome Extension turned on led to Google Analytics failing. Disabling the extension fixed the issue.
It is related to https://github.com/PriceRunner/react-ga4/issues/37
Navigated to http://localhost:3000
and nothing elseI 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: