feat: migrated from react-ga4 to next/third-parties for analytics#73
feat: migrated from react-ga4 to next/third-parties for analytics#73Alessandro100 merged 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Migrates Google Analytics event tracking from react-ga4 to Next.js’ @next/third-parties integration so analytics can be initialized via the App Router layout and events can be sent via sendGAEvent. custom
Changes:
- Add
@next/third-partiesand removereact-ga4. - Replace
ReactGA.event(...)calls withsendGAEvent(...)in Feed UI components. - Add
<GoogleAnalytics gaId=... />initialization insrc/app/[locale]/layout.tsxgated onNEXT_PUBLIC_GOOGLE_ANALYTICS_ID.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
package.json |
Adds @next/third-parties, removes react-ga4. |
yarn.lock |
Locks @next/third-parties (and its dependency), removes react-ga4. |
src/app/[locale]/layout.tsx |
Initializes Google Analytics in the App Router layout using env-configured GA ID. |
src/app/screens/Feed/components/FeedSummary.tsx |
Sends GA event on “View on map” click via sendGAEvent. |
src/app/components/CoveredAreaMap.tsx |
Sends GA event on “Open detailed map” click via sendGAEvent. |
src/app/screens/Feed/components/ClientDownloadButton.tsx |
Sends GA event on download click via sendGAEvent (no more lazy import). |
src/app/screens/Feed/components/ClientQualityReportButton.tsx |
Sends GA event on quality report click via sendGAEvent (no more lazy import). |
| </body> | ||
| {getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID') !== '' && ( | ||
| <GoogleAnalytics | ||
| gaId={getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID')} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
<GoogleAnalytics /> is being rendered as a direct child of <html> (after </body>). That results in invalid document structure (only <head> and <body> should be children of <html>) and may cause Next/React to relocate or drop the injected script tags. Move the conditional <GoogleAnalytics> render inside <body> (typically near the end) and consider assigning const gaId = getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID') to avoid reading env twice.
There was a problem hiding this comment.
According to the documentation, it's placed under the body: https://nextjs.org/docs/app/guides/third-party-libraries#google-analytics
|
*Lighthouse ran on https://mobilitydatabase-2dleodl6l-mobility-data.vercel.app/ * (Desktop)
*Lighthouse ran on https://mobilitydatabase-2dleodl6l-mobility-data.vercel.app/feeds * (Desktop)
*Lighthouse ran on https://mobilitydatabase-2dleodl6l-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-2dleodl6l-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-2dleodl6l-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
|
closes #70
Summary:
Updated the google analytics library from
react-ga4tonext/third-partiesas it is the recommended approach from nextjs. Also properly initialized the analytics and included the GA ID in VercelExpected behavior:
We should start to collect GA events again
Testing tips:
Once this goes to production, verify if the tags are properly collecting data in google analytics
Please make sure these boxes are checked before submitting your pull request - thanks!
yarn testto make sure you didn't break anything