Integrations ยท Site platforms
Next.js: the root layout, route changes and checkout.
One tag in app/layout.tsx covers every route, and client-side navigation counts as pageviews. A route handler that creates Stripe Checkout Sessions passes the visitor's id in two lines, and a middleware reports AI crawlers.
14 days free, no card needed.
01What Tally tracks
- Every route of the app from the root layout, with client-side navigations counted as pageviews.
- Engaged time and scroll depth per page, goals and clicks on links to other sites.
- AI crawlers, when a few lines in your middleware report them: the crawlers page has the Next.js snippet.
02Where the revenue comes from
- Checkout from a route handlerRead the _tally_vid cookie with await cookies() and pass it as tally_visitor_id in the session's metadata and subscription_data.metadata. The Coverage page has the handler.
- Success pageOn a cookieless site, put ?session_id={CHECKOUT_SESSION_ID} on the success URL and the page that shows it ties the sale to the visit.
03What it can't read
- Server-rendered requests that never load the page in a browser, such as prefetches, aren't counted as visits.
- Payments taken outside the four providers, such as through an app store, aren't read.
- Without the middleware lines, crawlers that don't run the script aren't seen.
04Adding the snippet
Where it goes: In app/layout.tsx, the root layout: inside its <head>.
<head>
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>
</head>This is an example site's tag. Your own, with your site's id, is on the snippet step when you add a site, and on its Setup page.
- Paste the tag inside the head of app/layout.tsx, as the snippet step shows.
- Deploy and open the site: the live check shows the first visit.
- In the route handler that creates Checkout Sessions, add the visitor's id to the metadata.
- Optionally add the crawler report to your middleware, from the AI crawlers page.
05Questions
Does it count client-side navigation in the App Router?
Yes. The tag listens for route changes in the browser, so moving between pages without a reload counts as a pageview.
Where does the visitor's id come from on the server?
From the first-party _tally_vid cookie, which the tag sets in cookie mode, or in consent mode once consent is given. A route handler reads it with await cookies().
Can I report AI crawlers from Next.js?
Yes. The AI crawlers page gives a middleware snippet that reports known crawlers' requests to Tally, since most never run the page's script.