Analytics & Tracking
Google Analytics 4 (GA4), consent, and custom events
Analytics & Tracking
This document describes how analytics work on the Cascadia Marquee site: Google Analytics 4 (GA4) via
gtag.js, cookie consent, helper utilities, and the custom events we send.Overview
- Product analytics: Google Analytics 4 (measurement ID from
NEXT_PUBLIC_GA_MEASUREMENT_ID). - Consent: GA4 and Microsoft Clarity load only when the visitor accepts Analytics in cookie preferences. Implementation reads
localStorage.cookiePreferencesand listens forcookie-preferences-updated. - Code:
src/components/analytics/google-analytics.tsxloads gtag withnext/script(lazyOnload). Custom events usesrc/lib/ga4-events.ts:scheduleGtagEvent(idle-scheduled, better INP on hot paths),pushGa4Event/gtagEventfor immediate sends. If gtag is not loaded yet, events queue ondataLayer. - Production only:
src/lib/analytics-env.ts—ANALYTICS_ENABLEDis true only whenNODE_ENV === "production"so local dev does not pollute reports.
Marketing & ads pixels
Facebook Pixel, LinkedIn Insight, and optional Klaviyo load when Marketing cookies are accepted (
src/components/analytics/pixel-events.tsx).Custom events (GA4)
These are sent with
scheduleGtagEvent unless noted. Parameter names use snake_case for GA4 custom dimensions.| Event name | Typical params | When |
|---|---|---|
form_start | form_type, form_location | Contact form mounted / meeting flow opened |
form_abandon | form_type, form_location | Dialog closed without submit |
generate_lead | form_type, form_location, service, budget | Contact form success |
cta_click | cta_name, location, destination? | Primary/secondary CTAs |
navigation_click | link_text, page_path, link_destination, link_type | NavLink and similar |
case_study_click | case_study_title, location, case_study_slug, tags, destination | Case study cards |
meeting_dialog_opened | location | User opens booking flow |
meeting_date_selected | location, selected_date | Calendar choice |
meeting_time_selected | location, selected_time | Time slot choice |
meeting_booked | location, selected_date, selected_time | Consultation request succeeded |
Register important parameters as custom dimensions in GA4 if you want them in reports.
What to configure in GA4
- Data streams — Ensure your web stream matches the site URL.
- Events — Mark
generate_leadas a conversion if you use it as a goal. - Custom dimensions — Map params you care about (e.g.
form_location,cta_name). - DebugView — Use GA debug mode or Realtime while testing production builds (
pnpm build && pnpm start).
Related files
| File | Role |
|---|---|
src/lib/ga4-events.ts | pushGa4Event, scheduleGtagEvent, gtagEvent |
src/lib/analytics-env.ts | ANALYTICS_ENABLED |
src/components/analytics/google-analytics.tsx | Load GA4 after consent |
src/components/analytics/microsoft-clarity.tsx | Clarity after consent |
src/components/analytics/pixel-events.tsx | Marketing pixels after consent |
Privacy
Do not send names, emails, or free-form message text in analytics event params. See the privacy policy for disclosures shown to visitors.