Install

Install AnalyticFast in Next.js App Router or Pages Router

Use Next.js Script in a shared layout so the tracker loads after the page becomes interactive. You do not need to install a browser SDK to use this method.

Install on Next.js

Start by adding the website in AnalyticFast and selecting its domain, timezone and currency. These examples use https://t.analyticfast.com; the origin and Site ID shown in your site’s Settings take precedence.

1. For the App Router, open your existing app/layout.tsx and import Script from next/script.
2. Render the component below once inside the layout’s body, alongside its existing children. Keep the rest of your layout.
3. For the Pages Router, add the same Script component to pages/_app.tsx instead.
4. Deploy to the website hostname configured in AnalyticFast. Navigate between two routes and confirm each receives one pageview.

import Script from 'next/script';

// Inside the body of your existing root layout:
<Script
  id="analyticfast"
  src="https://t.analyticfast.com/js/script.js"
  data-website-id="YOUR_SITE_ID"
  strategy="afterInteractive"
  defer
/>

The tracker observes SPA history changes. Do not also call pageview from a pathname effect. If you prefer the local browser SDK, initialize it in a client component’s effect and use that instead of next/script. Keep window out of server component execution. Checkout actions can receive optional client attribution IDs, but prices and payment secrets stay on the server.

Verify the published website

1. Replace YOUR_SITE_ID with the ID for this website, then open its public domain in a normal browser. A builder preview, localhost, webdriver or a visit with ?ml_ignore=true may be ignored.
2. In browser Network tools, check https://t.analyticfast.com/js/script.js and the request to /api/event. A downloaded script or a successful HTTP response alone does not prove that an event was accepted.
3. Use Verify installation in AnalyticFast and check the last received event. If none arrives, check the Site ID, allowed hostname, consent configuration, duplicate installations and any blocker. Domain ownership verification is a separate step.

If your site has a Content Security Policy, allow https://t.analyticfast.com in both script-src and connect-src. Do not put tokens, customer email addresses or private keys in the snippet, URLs or goal properties.

Connect your consent choice

If your site uses an analytics consent banner, use the pending-consent snippet and connect its Accept and Decline/withdraw actions. Pending mode sets no analytics cookies; it still records visits using the collector’s cookie-free identity mode. A consent manager that blocks the tag entirely prevents those requests. Choose the collection behavior appropriate for your site; pending mode is not a promise of legal compliance.

<script defer data-website-id="YOUR_SITE_ID" data-consent="pending" src="https://t.analyticfast.com/js/script.js"></script>

// In your existing banner handlers:
window.analyticfast?.('consent', true);  // Accept
window.analyticfast?.('consent', false); // Decline or withdraw

Restore a stored choice on later visits. See the consent implementation guide for the full state and identity behavior.

Official platform references

• Next.js Script component and loading strategies

Instructions reviewed against the repository and official platform documentation on October 31, 2026. Screenshots are reserved placeholders; no live platform installation is claimed here.

Add your website to get its Site ID and installation checklist. Once visits arrive, connect your payment provider.