Installationsanleitungen
Flowsery Analytics in einem Next.js App Router-Projekt einrichten
Diese Anleitung führt Sie durch das Hinzufügen von Flowsery Analytics zu einer Next.js-Anwendung, die den App Router (v13+) verwendet.
Script in Ihr Root-Layout einbetten
Der empfohlene Ansatz ist, das Tracking-Snippet aus dem Root-Layout zu laden, damit es automatisch jede Seite abdeckt.
- Öffnen Sie die Root-Layout-Datei -- normalerweise
app/layout.jsx. - Importieren Sie die
Script-Komponente vonnext/script. - Platzieren Sie das Flowsery Analytics Snippet innerhalb des
<head>des Layouts.
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>
);
}Ersetzen Sie flid_****** durch die Website-ID aus Ihren Flowsery Analytics Einstellungen.
- Speichern, committen und bereitstellen.
Flowsery Analytics ignoriert standardmäßig Localhost-Traffic, damit Sie Ihre Zahlen während der Entwicklung nicht verfälschen.
Funktionsfähigkeit überprüfen
Sobald die Bereitstellung live ist:
- Navigieren Sie zu Ihrer Produktions-URL.
- Öffnen Sie Ihr Flowsery Analytics Dashboard und suchen Sie nach eingehenden Seitenaufrufen. Die ersten Datenpunkte können einige Minuten benötigen, um zu erscheinen.
Für weitere Optionen wie Localhost-Tracking, benutzerdefinierte API-Endpunkte oder Cross-Domain-Konfiguration lesen Sie die Script-Konfigurationsreferenz.