@nextjs/third-party/google Custom Events Don't Register When Using sendGAEvent()

[AbdelrahmanSadat]

Link to the code that reproduces this issue

https://github.com/AbdelrahmanSadat/ga-issue

To Reproduce

1. Use <GoogleAnalytics> component in the app's layout.
2. Use sendGAEvent({event: "custom_event", value: 'value'}) on any client component.
3. Add the custom_event in GA
4. Trigger the custom_event
5. Check Google Analytics realtime dashboard. No event is reported.

Current vs. Expected behavior

Expected the custom_event to be reported in GA.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.3
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Script optimization (next/script)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Not really sure how I can provide a reproduction for this since it would also require access to a Google Analytics dashboard. But long story short, I tried @nextjs/third-parties/google instead of using a <Script>, and while that part works and normal events fire, manually firing custom events (or predefined events) using the library's SendGAEvent() doesn't register on the dashboard.

I removed any use of SendGAEvent() and instead used (window as any).gtag("event", "custome_event", {value: "value"}), and my custom_event was firing and showing on the dashboard, so that rules out any issue in my GA setup.

[Mhmdrza]

In my case the /collect request is not even sent to ga.

expected behavior:

• sendGAEvent triggers the /collect request

[honzasladek]

I encountered this as well today. Behaves exactly the same as described here in the issue for me.

[MinhNgyuen]

Holy thank you for posting this. I've been going crazy trying to use this package to send custom events.

[benlhachemi]

same thing for me, default events are working fine (scroll, view, etc...) but custom ones are not !

[mulfyx]

you can try https://www.npmjs.com/package/nextjs-google-analytics

[willashe]

Running into the same issue. It appears to be due to how arguments are being read and passed to the dataLayer. The window.gtag function passes the arguments array-like object (i.e. an object with numbered keys, not an array) directly into the dataLayer, which results in the events showing up in the realtime dashboard as expected. sendGAEvent uses the rest parameter syntax and passes the resulting actual array into the dataLayer, which seems to result in no event being sent to GA. Seems GA is specifically looking for that array-like object and not an actual array.

[asobirov]

I believe the merged code does not fix the issue as it still can be seen with "@next/third-parties": "^14.1.1-canary.58". As per @willashe's comment, seems like dataLayer doesn't like Arrays?

Left a comment in the PR: https://github.com/vercel/next.js/pull/62065/files/4572a3bbd70c5c42fcf0c70bc90b7d936605a702#r1493345098

[willashe]

I believe the merged code does not fix the issue as it still can be seen with "@next/third-parties": "^14.1.1-canary.58". As per @willashe's comment, seems like dataLayer doesn't like Arrays?

Left a comment in the PR: https://github.com/vercel/next.js/pull/62065/files/4572a3bbd70c5c42fcf0c70bc90b7d936605a702#r1493345098

Yea disappointing that my changes were reverted and merged, the resulting PR didn't fix anything. Thank you for picking this back up anyway.

[felix-mittermeier]

Hi guys, I am a bit confused now what the latest status is. Can you confirm that the second merge ("Fix sendGAEvent function (for real?)") really solves the issue? I built my app using the 14.1.1-canary.61 version but the events still don't show up in Google Analytics. Also not in the real time view.

Maybe I understood something wrong and another fix is needed first, then any clarification would be much appreciated. Thank you.

[asobirov]

Hey @felix-mittermeier, just gave it a run again and it seems to be working. Note that you will now need to use it as

sendGAEvent('event', 'buttonClicked', { value: 'xyz' }) instead of sendGAEvent({ event: 'buttonClicked', value: 'xyz' })

as mentioned in #62065 (comment)

[felix-mittermeier]

That was indeed the issue. Thanks a lot for the help ☺️
Guess I overlooked that the syntax has been changed. Now it's working as intended

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.