fix: track order clickthroughs in static export#27
Conversation
There was a problem hiding this comment.
Pull request overview
This PR aims to make Google Analytics reliably present in statically exported HTML (for GitHub Pages) and add outbound click tracking for “order” links.
Changes:
- Added a
trackOutboundClickhelper that emits an outbound click event viawindow.gtag. - Removed the
GoogleAnalyticscomponent injection from the Pages Router_app.js.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/utils/analytics.ts |
Introduces outbound click tracking helper using gtag. |
src/pages/_app.js |
Removes Google Analytics component from the app wrapper. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export function trackOutboundClick({ destination, label, location }: TrackOutboundClickParams) { | ||
| if (typeof window === 'undefined' || typeof window.gtag !== 'function') { | ||
| return; | ||
| } |
There was a problem hiding this comment.
trackOutboundClick is introduced here, but it is not referenced anywhere else in the codebase (only definition found). If the intent is to track clicks on order links, this needs to be called from the relevant link components/pages; otherwise this is dead code and the feature described in the PR won’t be delivered.
There was a problem hiding this comment.
Fixed. trackOutboundClick is now wired into /order-online partner links and the Tea-Rekz order flow (both the fallback link and the redirect page).
| declare global { | ||
| interface Window { | ||
| gtag?: (...args: any[]) => void; |
There was a problem hiding this comment.
window.gtag is typed with any[], which defeats type-safety and can mask incorrect event parameter usage. Consider using a stronger type (e.g. via @types/gtag.js / Gtag.Gtag) or defining a minimal gtag call signature that matches the events you send.
| declare global { | |
| interface Window { | |
| gtag?: (...args: any[]) => void; | |
| interface OutboundClickGtagParams { | |
| event_category: 'outbound'; | |
| event_label: string; | |
| link_url: string; | |
| link_domain: string | null; | |
| page_location: string; | |
| transport_type: 'beacon'; | |
| } | |
| type Gtag = (command: 'event', eventName: 'click', params: OutboundClickGtagParams) => void; | |
| declare global { | |
| interface Window { | |
| gtag?: Gtag; |
There was a problem hiding this comment.
Fixed. I replaced the loose any[] signature with a minimal typed Gtag function signature tailored to the outbound click event we send.
| interface TrackOutboundClickParams { | ||
| destination: string; | ||
| label: string; | ||
| location: string; | ||
| } | ||
|
|
||
| export function trackOutboundClick({ destination, label, location }: TrackOutboundClickParams) { |
There was a problem hiding this comment.
The parameter name location is easy to confuse with the global window.location and doesn’t convey that this should be the page URL. Consider renaming to something like pageLocation (or making it optional and deriving from window.location.href inside the function) for clearer call sites.
There was a problem hiding this comment.
Fixed. I renamed the parameter to pageLocation and made it optional, defaulting to window.location.href inside the helper.
| import StructuredData from '@/components/StructuredData'; | ||
|
|
||
| import '@/styles/globals.css'; | ||
|
|
||
| export default function App({ Component, pageProps }) { | ||
| return ( | ||
| <> | ||
| <GoogleAnalytics measurementId={ANALYTICS.google.measurementId} /> | ||
| <StructuredData /> | ||
| <Component {...pageProps} /> |
There was a problem hiding this comment.
GoogleAnalytics was removed from _app.js, but there is no replacement GA/gtag initialization anywhere else in the repo (no googletagmanager.com/gtag script or gtag('config', ...) found). As a result, window.gtag will never be defined and analytics/click tracking won’t fire. Add the GA script/config in a place that is included in the static export output (e.g., _document.js via next/script, or another exported HTML entrypoint) and wire it to ANALYTICS.google.measurementId.
There was a problem hiding this comment.
Fixed. GA is now initialized from _document.js, so the gtag.js loader and gtag('config', measurementId) are present in the statically exported HTML as well.
jontsai
force-pushed
the
feat/ga-html-and-order-click-tracking
branch
from
716857d to
3d899cf
Compare
jontsai
changed the title
Summary
_documentso the static GitHub Pages export emits the GA loader/config in HTML.trackOutboundClickhelper for outbound order-click events with destination metadata and beacon transport.event_timeoutplus a 1.2s fallback so users do not get stuck.Validation
npm run lint— passes; existing@next/next/no-img-elementwarnings remain in unrelated blog/menu print files.make build— passes; existing warnings remain for image usage, large/tvand/menupage data, and npm audit summary.build— passed on the latest push.Review notes