Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix sendGAEvent function params and type clearly #63226

Open
wants to merge 9 commits into
base: canary
Choose a base branch
from
+237 −5
Open

Fix sendGAEvent function params and type clearly #63226

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c99a807
Update GA send event function params and add docs example
hjick Mar 13, 2024
7319e58
Update docs gtag link to GA4
hjick Mar 13, 2024
df93029
Update next GAEvent docs example
hjick Mar 15, 2024
e5ddfd0
Merge branch 'vercel:canary' into canary
hjick Mar 15, 2024
c077f70
refactor: add more strict types on sendGAEvent function parameters
hjick Apr 13, 2024
5d388eb
Merge branch 'canary' into canary
hjick Apr 13, 2024
db8e87f
chore: run pnpm prettier-fix
hjick Apr 13, 2024
48d0315
Merge branch 'canary' into canary
hjick Apr 16, 2024
7e56f0b
Merge branch 'canary' into canary
hjick Oct 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions .../02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,9 @@ export function EventButton() {
return (
<div>
<button
onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
onClick={() => sendGAEvent('event-name', {
value: 'xyz'
})}
>
Send Event
</button>
Expand All @@ -314,7 +316,9 @@ export function EventButton() {
return (
<div>
<button
onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
onClick={() => sendGAEvent('event-name', {
value: 'xyz'
})}
>
Send Event
</button>
Expand Down
23 changes: 23 additions & 0 deletions packages/third-parties/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,27 @@ export default function Page() {
}
```

### Google Analytics Event

The `sendGAEvent` function can be used to send an event to Google Analytics. This function uses the [gtag.js](https://developers.google.com/analytics/devguides/collection/ga4/events) library under the hood.

```js
import { sendGAEvent } from '@next/third-parties/google'

export default function Page() {
return (
<button
onClick={() => {
// Send an event to Google Analytics
sendGAEvent('event-name', {
value: xyz,
})
}}
>
Click me
</button>
)
}
```

To get a better idea of how these components work, take a look at this [demo](https://test-next-script-housseindjirdeh.vercel.app/). <!--- TODO: Replace with a better demo page -->
4 changes: 2 additions & 2 deletions packages/third-parties/src/google/ga.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,14 @@ export function GoogleAnalytics(props: GAParams) {
)
}

export function sendGAEvent(..._args: Object[]) {
export function sendGAEvent(eventName: string, eventParameters: {[key: string]: string | number}) {
Copy link
Contributor

@jamesmillerburgess jamesmillerburgess Apr 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this type is too restrictive.

Some gtag events take an items parameter, which is an array of Item objects.

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

Copy link
Contributor Author

@hjick hjick Apr 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your review!

The url you attached return 500 status. Is that url about gtag ```event``` command?

I can't find that items parameters in recent docs about gtag.
https://developers.google.com/tag-platform/gtagjs/reference#event

If the items parameter you're talking about is a gtag command, how about creating a function for each command separately?

Copy link
Contributor Author

@hjick hjick Apr 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added type GA events include items parameters you referenced.
If the event name entered by the user is the same as the event name in the link you referenced, it also provides autocomplete event parameters.

Can you check this changes?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think your types won't allow custom events. Maybe there is an existing official set of types from Google that we could use?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The type allow custom events. And I also added types from Google docs.

And if user input types from Google official types, user can get autocomplete Google official params.

Also user can input custom types.
I pushed new commit. Please check that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your maintaining. I know you're busy, but could you please check one more time, this commit would be very helpful.

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

if (window[currDataLayerName]) {
window[currDataLayerName].push(arguments)
window[currDataLayerName].push({0: 'event', 1: eventName, 2: eventParameters})
} else {
console.warn(
`@next/third-parties: GA dataLayer ${currDataLayerName} does not exist`
Expand Down