Installation Guides
Set up Flowsery Analytics in a Next.js App Router project
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
Scriptcomponent fromnext/script. - Place the Flowsery Analytics snippet inside the
<head>of the layout.
JSX
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<Script data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js" strategy="afterInteractive" />
</head>
<body>{children}</body>
</html>
);
}Swap flid_****** for the Website ID shown in your Flowsery Analytics settings.
- 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.