3 Min. Lesedauer

Next.js Integration

Fügen Sie Zenovay-Analytics zu Ihrer Next.js-Anwendung mit der integrierten Script-Komponente für optimales Laden hinzu.

App Router (Next.js 13+)

Fügen Sie die Script-Komponente zu Ihrem Root-Layout hinzu:

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://api.zenovay.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

Ersetzen Sie YOUR_TRACKING_CODE durch Ihren Tracking-Code der Website. Finden Sie ihn in der App unter Domains → [Ihre Website] → General (die Tracking-Script-Karte, Next.js-Tab).

Tracking-Script-Karte mit dem Script-Snippet mit HTML-, React-, Next.js- und First-Party-Tabs — Ihr Tracking-Code befindet sich auf der General-Seite Ihrer Domain-Einstellungen unter dem Next.js-Tab.

Pages Router (Legacy)

Für den Pages Router fügen Sie das Script zu _app.tsx hinzu:

pages/_app.tsxTSX

import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
return (
  <>
    <Script
      src="https://api.zenovay.com/z.js"
      data-tracking-code="YOUR_TRACKING_CODE"
      strategy="afterInteractive"
    />
    <Component {...pageProps} />
  </>
);
}

Script-Strategien

Next.js bietet verschiedene Ladestrategien:

Strategy	Description	Use Case
`afterInteractive`	Wird geladen, nachdem die Seite interaktiv wird	Empfohlen für Analytics
`lazyOnload`	Wird während der Browser-Idle-Zeit geladen	Nicht-kritische Scripts
`beforeInteractive`	Wird vor der Seiten-Hydration geladen	Nur kritische Scripts

Recommended StrategyTSX

<Script
src="https://api.zenovay.com/z.js"
data-tracking-code="YOUR_TRACKING_CODE"
strategy="afterInteractive"
/>

Umgebungsvariablen

Verwenden Sie Umgebungsvariablen für den Tracking-Code:

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const trackingCode = process.env.NEXT_PUBLIC_ZENOVAY_ID;

return (
  <html lang="en">
    <head>
      {trackingCode && (
        <Script
          src="https://api.zenovay.com/z.js"
          data-tracking-code={trackingCode}
          strategy="afterInteractive"
        />
      )}
    </head>
    <body>{children}</body>
  </html>
);
}

.env.localBash

NEXT_PUBLIC_ZENOVAY_ID=ZV_ABC123XYZ

First-Party Tracking (Ad-Blocker umgehen)

Verwenden Sie für bessere Genauigkeit First-Party Tracking:

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://metrics.yourdomain.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

First-Party Tracking erfordert einen CNAME DNS-Eintrag. Siehe First-Party Tracking Guide für Setupanweisungen.

Statischer Export (Cloudflare Pages)

Für Static Exports funktioniert die Script-Komponente auf die gleiche Weise:

next.config.jsJavaScript

/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// ... other config
};

module.exports = nextConfig;

Das Tracking-Script wird in die generierten HTML-Seiten eingebettet.

Server-Komponenten

Das Tracking-Script funktioniert automatisch mit React Server Components. Keine spezielle Konfiguration erforderlich.

Middleware & Edge-Laufzeit

Für Apps mit Edge Runtime verarbeitet die Client-seitige Script-Komponente das Tracking wie üblich. Server-seitige Analytics können die API-Integration verwenden.

Überprüfung

Nach der Installation:

Erstellen Sie Ihre Next.js-App und stellen Sie sie bereit
Öffnen Sie DevTools → Network-Tab
Suchen Sie nach Anfragen an api.zenovay.com
Überprüfen Sie Ihr Zenovay-Dashboard auf eingehende Daten

Fehlerbehebung

Script wird in der Entwicklung nicht geladen?

Das Script wird beim Seiten-Navigation geladen, nicht beim initialen Laden im Dev-Modus
Erstellen und zeigen Sie eine Vorschau an (npm run build && npm start), um ordnungsgemäß zu testen

Doppelte Script-Tags?

Fügen Sie das Script nur einmal in Ihrem Root-Layout hinzu
Fügen Sie es nicht in einzelnen Seiten hinzu

Hydration-Mismatch-Warnungen?

Verwenden Sie strategy="afterInteractive", um SSR-Probleme zu vermeiden
Stellen Sie sicher, dass das Script im <head>-Bereich vorhanden ist

Content Security Policy-Probleme?

Fügen Sie api.zenovay.com zu Ihrer CSP script-src-Richtlinie hinzu
Für First-Party: Fügen Sie Ihre CNAME-Subdomain hinzu