Google Ads and GA4 tracking for Next.js
The Google issues are App Router specific: client-side navigation fires no page view, and server components can't run the effect you were relying on. Both are solved by binding to the router in a client component that persists across navigations.
Free30 minutesNo obligation
Next.js + Google · what breaks
What goes wrong on Next.js
- 01
App Router navigation isn't a page load
So page-view-bound events fire once and stop.
- 02
Server components run no client effects
Code you expected to execute simply doesn't.
- 03
Events split between server and client
Without a deliberate decision about which does what.
- 04
Hydration timing
Same as any React app.
Next.js + Google · the fix
What changes — Next.js + Google
Route changes emitting events
From a persistent client component.
Money events from route handlers
Server-side, in the same codebase.
A first-party endpoint via rewrite
On your own domain, no separate infrastructure.
Next.js + Google · architecture
How the Google destinations behave on Next.js
App Router specifics, then the ordinary work.
- 1
Route-change events from a persistent client component
One that survives navigation.
- 2
Nothing relying on effects in server components
They don't run.
- 3
transaction_id from the route handler
Where the order is recorded.
- 4
Click IDs captured on first load
Available server-side afterwards.
- 5
Enhanced Conversions from the server
Where the customer data is.
Next.js + Google · diagnose
Where Next.js tracking breaks, in diagnostic order
Each check rules out a class of cause, so by the last one there is usually a single explanation standing.
- 01
Navigate between routes and watch for events
One event then silence is the App Router signature.
- 02
Check whether tracking code sits in a server component
Effects there never run.
- 03
Confirm where the money event is emitted
Client or route handler.
- 04
Check whether cookies are set in middleware
The difference between 7 days and 400 in Safari.
- 05
Reconcile against backend records
For a closed month.
Next.js + Google · prove
The QA evidence — Next.js + Google
Run on Next.js specifically, on a live conversion rather than in preview mode.
Source of truth
your backend order or CRM records
- Route changes confirmed emitting events across App Router navigation.
- Money events confirmed arriving from a route handler.
- First-party cookies confirmed persisting past seven days in Safari on a real device.
- Endpoint confirmed served from your own domain via rewrite.
- Counts reconciled against backend records for a closed month.
- Reconciled over a fully closed window, matched per record rather than on totals.
- Re-checked 30 days later, and after any platform update.
Next.js + Google · free audit
What we check in the free audit
- Navigate between routes and watch for events
- Check whether tracking code sits in a server component
- Confirm where the money event is emitted
- Check whether cookies are set in middleware
- Reconcile against backend records
Checked against
your backend order or CRM records
Free30 minutesNo obligation
Next.js + Google · when not to buy
When you don't need this on Next.js
Worth reading before you buy anything, from us or anyone.
- If your Next.js app already emits route-change events and sources money events server-side, you've done the work.
- Your engineers can do all of this in their own codebase, and on Next.js it's less work than on any other framework here.
- The rewrite trick is publicly documented and takes an afternoon. You may not need help with it.
- Reconcile against your backend before assuming anything is broken.
Next.js + Google · what we deliver
What gets built for Google on Next.js
GA4 ecommerce events in the recommended shape
Correct names, transaction_id present, currency per order, an items array that agrees with the value.
Click identifiers captured and persisted
gclid, gbraid and wbraid — not just the first, because iOS traffic arrives with the others.
Enhanced Conversions from the data layer
Not from CSS selectors, which break on every redesign silently.
Conversion action settings reviewed
Counting, primary status and attribution window — free to change and more consequential than most tag work.
Written guarantee
95%+ tracking accuracy
Measured against your backend order or CRM records. Miss it and we keep working at no cost.
Pricing
Pick the package that fits your ad spend
Browser-side starter
$400One-time fee · lifetime ownership
Repairs and verifies the browser-side setup you already have, on a live conversion. Honest about its ceiling on this platform.
- Root cause fixed, not worked around
- Verified on a live conversion
- Reconciled against your own records
- Written handover
1st-party server-side
Recommended$800One-time fee · most popular
Money events sent from your own records through a first-party container on your subdomain, so the browser can no longer lose them.
- First-party server container on your own subdomain
- Money events from your records, not the browser
- Deduplicated on a shared event ID at every destination
- First-party cookies beyond Safari's 7-day cap
- 95%+ accuracy and 8+ Meta EMQ, guaranteed in writing
Full 1st-party stack
$1,800One-time fee · lifetime ownership
Every paid channel server-side plus the offline loop, with monitoring so the next break surfaces in days.
- Everything in 1st-party server-side
- Pinterest, Snapchat, Reddit and LinkedIn CAPI
- CRM and offline conversion loop
- Refunds and cancellations corrected wherever each platform allows it
- Monitoring on every destination
FAQ
Next.js + Google questions, answered
A client component bound to the router that persists across navigation. Server components can't do it.
On first load, before routing. Store them so they're available server-side later.
From the server, cleanly. You have the customer data in your route handler.
One per session means route-change events are missing.
Free · 30 min
Get Google Ads and GA4 right on Next.js
WhatsAppFree30 minutesNo obligation
