Fix sendGAEvent function #62065

willashe · 2024-02-14T21:03:36Z

Previous implementation of sendGAEvent was pushing arguments to dataLayer via rest parameter syntax, resulting in an actual array, which GA doesn't seem to process correctly (resulting in the event not showing up in GA reports). This PR refactors it to a vanilla JS function passing data via the arguments array-like object, which is able to be processed correctly and results in the event showing up as expected.

fixes 61703

…nstead of using rest parameter syntax

ijjk · 2024-02-14T21:15:41Z

Allow CI Workflow Run

approve CI run for commit: 520b697

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-02-14T21:33:22Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
buildDuration	19.9s	19.9s	N/A
buildDurationCached	8.5s	7.1s	N/A
nodeModulesSize	196 MB	196 MB	N/A
nextStartRea..uration (ms)	423ms	430ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
1068-HASH.js gzip	30.3 kB	30.2 kB	N/A
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
4944-HASH.js gzip	5.04 kB	5.03 kB	N/A
8423.HASH.js gzip	181 B	181 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	32.1 kB	32.1 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	47.1 kB	47.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
_app-HASH.js gzip	196 B	196 B	✓
_error-HASH.js gzip	184 B	183 B	N/A
amp-HASH.js gzip	503 B	504 B	N/A
css-HASH.js gzip	323 B	324 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	258 B	259 B	N/A
head-HASH.js gzip	353 B	351 B	N/A
hooks-HASH.js gzip	370 B	370 B	✓
image-HASH.js gzip	4.21 kB	4.2 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.68 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	313 B	314 B	N/A
script-HASH.js gzip	386 B	385 B	N/A
withRouter-HASH.js gzip	309 B	311 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	931 B	931 B	✓

Client Build Manifests

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
_buildManifest.js gzip	485 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
index.html gzip	530 B	527 B	N/A
link.html gzip	542 B	540 B	N/A
withRouter.html gzip	525 B	522 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
edge-ssr.js gzip	94.5 kB	94.4 kB	N/A
page.js gzip	151 kB	151 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
middleware-b..fest.js gzip	625 B	628 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	44.6 kB	44.4 kB	N/A
edge-runtime..pack.js gzip	1.94 kB	1.94 kB	✓
Overall change	2.1 kB	2.1 kB	✓

Next Runtimes

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
app-page-exp...dev.js gzip	166 kB	166 kB	N/A
app-page-exp..prod.js gzip	95.9 kB	95.5 kB	N/A
app-page-tur..prod.js gzip	97.6 kB	97.3 kB	N/A
app-page-tur..prod.js gzip	92 kB	91.7 kB	N/A
app-page.run...dev.js gzip	136 kB	136 kB	N/A
app-page.run..prod.js gzip	90.6 kB	90.3 kB	N/A
app-route-ex...dev.js gzip	22 kB	22 kB	N/A
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	N/A
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	N/A
app-route-tu..prod.js gzip	14.6 kB	14.6 kB	N/A
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	N/A
app-route.ru..prod.js gzip	14.6 kB	14.6 kB	N/A
pages-api-tu..prod.js gzip	9.47 kB	9.43 kB	N/A
pages-api.ru...dev.js gzip	9.74 kB	9.7 kB	N/A
pages-api.ru..prod.js gzip	9.47 kB	9.43 kB	N/A
pages-turbo...prod.js gzip	22.1 kB	22 kB	N/A
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	N/A
pages.runtim..prod.js gzip	22.1 kB	22 kB	N/A
server.runti..prod.js gzip	50.1 kB	50 kB	N/A
Overall change	0 B	0 B	✓

build cache Overall increase ⚠️

	vercel/next.js canary	willashe/next.js send-ga-event-fix	Change
0.pack gzip	1.55 MB	1.55 MB	N/A
index.pack gzip	103 kB	103 kB	⚠️ +116 B
Overall change	103 kB	103 kB	⚠️ +116 B

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for 1068-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for pages-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 4572a3b

willashe · 2024-02-14T23:24:07Z

Looks like TS isn't happy. Working on a fix.

darthmaim · 2024-02-15T21:06:18Z

Wouldn't it be enough to change the ...args to just args (so instead of passing each element of args as a parameter, pass all args as array as single parameter). I don't think the change to the method signature is required.

hesselbom · 2024-02-16T09:49:54Z

Can confirm that this solution solved the issue for me.

This approach of using arguments more closely mimics the gtag() that Google Analytics creates, meaning the example in the docs would be sendGAEvent('event', 'buttonClicked', { value: 'xyz' }) instead of sendGAEvent({ event: 'buttonClicked', value: 'xyz' })

At least that's what seemed to work for me when testing. And could be a good thing, because then any gtag documentation is more directly translatable to sendGAEvent.

asobirov · 2024-02-17T14:30:15Z

packages/third-parties/src/google/ga.tsx

  if (currDataLayerName === undefined) {
    console.warn(`@next/third-parties: GA has not been initialized`)
    return
  }

  if (window[currDataLayerName]) {
-    window[currDataLayerName].push(arguments)
+    window[currDataLayerName].push(args)


We might want to leave this one as arguments. It seems like this does not work with Arrays, but works with arguments object. Additionally, when using window.gtag(...) an Arguments() is pushed instead of Array().

Might be related, see: https://stackoverflow.com/questions/60400130/google-analytics-datalayer-push-not-working-with-array-of-variables#60410151

This reverts commit e71046b.

The recently merged PR - #62065, doesn't seem to fix the issue. As per the comment this seems to be related to `dataLayer` that does not like working with Arrays, but works with [arguments object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments). Also, when using window.gtag(...) an Arguments() is pushed instead of Array(). Fixes #61703

daynejones · 2024-03-04T19:07:58Z

This doesn't seem to work for me, maybe I've got the usage wrong.

I'm using next/third-parties v14.1.1 and I'm calling sendGAEvent like so:

sendGAEvent('event', 'testEvent', { 'param1': 'val1' });

I'm seeing weird stuff in the DataLayer and I do NOT see /collect endpoint hits.

I've also tried using the syntax from the docs (sendGAEvent({ event: 'buttonClicked', value: 'xyz' })).

asobirov · 2024-03-04T19:18:09Z

Hey @daynejones, just to double check:

are you trying to use GTM or GA
There should be a GET request to https://www.googletagmanager.com/gtag/js?id=G-<YOUR_GA_ID>. Make sure that it is 200, otherwise you may not see the /collect

The usage seems to be ok

daynejones · 2024-03-04T19:20:21Z

Thanks for the response @asobirov

Maybe that's the problem. I've got GTM and GA running (it's a third party's requirement).

I see a 200 for gtm itself and I see /collect hits for the default events like pageview and scroll.

asobirov · 2024-03-04T19:35:40Z

I think the issue might just be the package version. Tried out the v14.1.1 and saw the same issue. So you may want to use the canary for now. A lil clue from release notes for v14.1.1:

Note: this is a backport release for critical bug fixes -- this does not include all pending features/changes on canary

I'm guessing that you should be good using the pre-release version - v14.1.2-canary.5?

daynejones · 2024-03-04T19:44:24Z

Got it. Will try that and report back.

daynejones · 2024-03-04T20:04:34Z

Yep, works now. Thanks for the help!

luknl · 2024-03-05T15:37:41Z

Using 14.1.2 and it's still not working for me. What version are you in exactly?

hesselbom · 2024-03-05T16:40:54Z

Using 14.1.2 and it's still not working for me. What version are you in exactly?

You need to use a canary version for now, for example I’m using 14.1.2-canary.7

hjick · 2024-03-15T08:49:54Z

It's not the way to fix sending event to GA.
check this PR, and please feedback

#63226 (comment)

vercel/next.js#62065 (comment)

comp615 · 2024-03-21T16:47:04Z

For those following, this is still not fixed nor the docs corrected in main (unsure why it wasn't backported since it's a regression/bug?). You must use v14.2.0-canary.34 and sendGAEvent("event", "custom_name", { value });

craigRSA · 2024-04-03T18:43:11Z

For those following, this is still not fixed nor the docs corrected in main (unsure why it wasn't backported since it's a regression/bug?). You must use v14.2.0-canary.34 and sendGAEvent("event", "custom_name", { value });

Is this working for anyone in v14.2.0-canary.34?

dariuscosden · 2024-04-03T18:59:44Z

@craigRSA yeah, works for me!

craigRSA · 2024-04-03T19:06:14Z

@dariuscosden
my event looks like this, is yours similar?

    sendGAEvent("event", "purchase", {
      value: 100,
      email: "email@domain.com",
      label: "purchase",
      action: "buy",
      revenue: 100,
      currency: "USD",
      category: "purchase",
      transaction_uuid: "124",
    });

dariuscosden · 2024-04-03T19:21:18Z

@craigRSA yes exactly. However I'm sending it using setTimeout of 500ms, since in some cases the dataLayer wasn't available (saw logs in console and didn't want to deal with it)

craigRSA · 2024-04-03T20:49:58Z

it works when running from my local but once its build in prod on Vercel it stops working. Other events work fine, just not the custom ones. It's a client component. Annoying..

m1dok · 2024-04-17T09:13:36Z

@craigRSA

Same for me! it run in local but non in prod, but not on Vercel.

craigRSA · 2024-04-17T11:35:08Z

@m1dok we used GTM to forward the requests to GA via a trigger and event parameters to send through all the fields we wanted

m1dok · 2024-04-17T13:36:33Z

@craigRSA thanks, it work! :)

refactor sendGAEvent to pass arguments object directly to dataLayer i…

9e15a68

…nstead of using rest parameter syntax

willashe requested review from timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners February 14, 2024 21:03

Merge branch 'canary' into send-ga-event-fix

520b697

ijjk approved these changes Feb 14, 2024

View reviewed changes

Merge branch 'canary' into send-ga-event-fix

c0724b8

ijjk enabled auto-merge (squash) February 14, 2024 21:19

Merge branch 'canary' into send-ga-event-fix

23be76f

revert extra changes

4572a3b

ijjk approved these changes Feb 16, 2024

View reviewed changes

ijjk merged commit e71046b into vercel:canary Feb 16, 2024
64 checks passed

asobirov reviewed Feb 17, 2024

View reviewed changes

asobirov mentioned this pull request Feb 17, 2024

Fix sendGAEvent function (for real?) #62192

Merged

asobirov added a commit to asobirov/next.js that referenced this pull request Feb 17, 2024

Revert "Fix sendGAEvent function (vercel#62065)"

465ed2d

This reverts commit e71046b.

asobirov mentioned this pull request Feb 20, 2024

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

Closed

hjick mentioned this pull request Mar 15, 2024

Fix sendGAEvent function params and type clearly #63226

Open

euije added a commit to team-yello/yelloworld.shop that referenced this pull request Mar 15, 2024

[fix] param 변경

fd31e56

vercel/next.js#62065 (comment)

euije mentioned this pull request Mar 15, 2024

[fix] param 변경 yelloworld-bot/yelloworld#49

Merged

thebinaryfelix mentioned this pull request Mar 23, 2024

Refactor/update GA events thebinaryfelix/me#6

Merged

github-actions bot added the locked label May 3, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix sendGAEvent function #62065

Fix sendGAEvent function #62065

willashe commented Feb 14, 2024

ijjk commented Feb 14, 2024 •

edited

Loading

ijjk commented Feb 14, 2024 •

edited

Loading

willashe commented Feb 14, 2024

darthmaim commented Feb 15, 2024 •

edited

Loading

hesselbom commented Feb 16, 2024

asobirov Feb 17, 2024 •

edited

Loading

daynejones commented Mar 4, 2024 •

edited

Loading

asobirov commented Mar 4, 2024

daynejones commented Mar 4, 2024

asobirov commented Mar 4, 2024 •

edited

Loading

daynejones commented Mar 4, 2024

daynejones commented Mar 4, 2024

luknl commented Mar 5, 2024

hesselbom commented Mar 5, 2024

hjick commented Mar 15, 2024 •

edited

Loading

comp615 commented Mar 21, 2024

craigRSA commented Apr 3, 2024

dariuscosden commented Apr 3, 2024

craigRSA commented Apr 3, 2024 •

edited

Loading

dariuscosden commented Apr 3, 2024

craigRSA commented Apr 3, 2024

m1dok commented Apr 17, 2024 •

edited

Loading

craigRSA commented Apr 17, 2024

m1dok commented Apr 17, 2024

Fix sendGAEvent function #62065

Fix sendGAEvent function #62065

Conversation

willashe commented Feb 14, 2024

ijjk commented Feb 14, 2024 • edited Loading

ijjk commented Feb 14, 2024 • edited Loading

Stats from current PR

willashe commented Feb 14, 2024

darthmaim commented Feb 15, 2024 • edited Loading

hesselbom commented Feb 16, 2024

asobirov Feb 17, 2024 • edited Loading

Choose a reason for hiding this comment

daynejones commented Mar 4, 2024 • edited Loading

asobirov commented Mar 4, 2024

daynejones commented Mar 4, 2024

asobirov commented Mar 4, 2024 • edited Loading

daynejones commented Mar 4, 2024

daynejones commented Mar 4, 2024

luknl commented Mar 5, 2024

hesselbom commented Mar 5, 2024

hjick commented Mar 15, 2024 • edited Loading

comp615 commented Mar 21, 2024

craigRSA commented Apr 3, 2024

dariuscosden commented Apr 3, 2024

craigRSA commented Apr 3, 2024 • edited Loading

dariuscosden commented Apr 3, 2024

craigRSA commented Apr 3, 2024

m1dok commented Apr 17, 2024 • edited Loading

craigRSA commented Apr 17, 2024

m1dok commented Apr 17, 2024

ijjk commented Feb 14, 2024 •

edited

Loading

ijjk commented Feb 14, 2024 •

edited

Loading

darthmaim commented Feb 15, 2024 •

edited

Loading

asobirov Feb 17, 2024 •

edited

Loading

daynejones commented Mar 4, 2024 •

edited

Loading

asobirov commented Mar 4, 2024 •

edited

Loading

hjick commented Mar 15, 2024 •

edited

Loading

craigRSA commented Apr 3, 2024 •

edited

Loading

m1dok commented Apr 17, 2024 •

edited

Loading