Set up Flowsery Analytics in a Next.js App Router project

Name: Flowsery
Author: Flowsery

This guide walks you through adding Flowsery Analytics to a Next.js application that uses the App Router (v13+).

Embed the script in your Root Layout

The recommended approach is to load the tracking snippet from the root layout so it covers every page automatically.

Open the root layout file -- usually app/layout.jsx.
Import the Script component from next/script.
Place the Flowsery Analytics snippet inside the <head> of the layout.

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          data-fl-website-id="flid_******"
          data-domain="your_domain.com"
          src="https://analytics.flowsery.com/js/script.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Swap flid_****** for the Website ID shown in your Flowsery Analytics settings. Swap your_domain.com for the root domain of your site.

Save, commit, and deploy.

Flowsery Analytics ignores localhost traffic by default so you do not inflate your numbers during development.

Confirm everything is working

Once the deployment is live:

Browse to your production URL.
Open your Flowsery Analytics dashboard and look for incoming pageviews. The first data points may take a couple of minutes to show up.

For additional options such as localhost tracking, custom API endpoints, or cross-domain configuration, refer to the script configuration reference.