Add consent-aware analytics to a Next.js site

Start with your website settings

Add the production domain to your Analytics website and copy its public website ID. Keep server API keys, payment keys and webhook secrets out of components, browser bundles and NEXT_PUBLIC environment variables.

Load the browser script once

For the App Router, use next/script in the shared layout so it is not reinstalled on every page. The example waits for consent; connect it to the generated consent banner or your own manager using the consent documentation. Do not add a second ungated copy of the tracker.

The script supports single-page navigation. Verify actual route transitions in your application instead of manually adding pageview events that could double-count them.

Instrument completion and payments

Record a stable signup-completion goal after your app confirms success, not merely when a button is clicked. For Stripe revenue, configure the website integration and add attribution metadata at the server-side Checkout boundary as described in the payment guide.

Test both consent states

On the published domain, check that rejecting optional analytics prevents collection and accepting it allows the intended events. Check one navigation, one completed goal and one verified payment. Localhost collection is off by default; use the documented development option only when you intend to test it.