Zum Hauptinhalt springen
Zenovaydocs
5 Min. Lesedauer

Next.js Schnellstart

Integrieren Sie Zenovay Analytics in Ihre Next.js-Anwendung. Unterstützt sowohl App Router (Next.js 13+) als auch Pages Router.

Installation

Es wird kein npm-Paket benötigt. Zenovay verwendet ein leichtes Tracking-Skript, das Sie zu Ihrem Layout hinzufügen.

Finden Sie Ihren Tracking-Code in der Zenovay-App: Öffnen Sie Domains, klicken Sie auf Ihre Website und navigieren Sie zur Seite General Einstellungen. Die Karte Tracking script zeigt Ihren Snippet und einen Verify Installation Button.

Tracking-Skript-Karte mit Skript-Snippet mit HTML-, React-, Next.js- und First-Party-Tabs sowie einem Verify Installation Button
Kopieren Sie Ihren Tracking-Code von der General-Seite der Domain-Einstellungen.

Setup mit App Router (Next.js 13+)

Tracking-Skript hinzufügen

Fügen Sie das Zenovay-Tracking-Skript zu Ihrem Root-Layout mithilfe der Script-Komponente von Next.js hinzu:

app/layout.tsxTypeScript
import Script from 'next/script';

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

Das ist alles! Zenovay wird nun automatisch Seitenaufrufe in Ihrer Next.js-App verfolgen.

Setup mit Pages Router

Skript zu Custom App hinzufügen

Aktualisieren Sie Ihre _app.tsx-Datei:

pages/_app.tsxTypeScript
import Script from 'next/script';
import type { AppProps } from 'next/app';

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

Benutzerdefinierte Ereignisse verfolgen

Verwenden Sie window.zenovay zum Verfolgen benutzerdefinierter Ereignisse in Ihren Komponenten:

components/SignupButton.tsxTypeScript
'use client';

export function SignupButton() {
const handleSignup = async () => {
  // Your signup logic here
  const user = await signup();

  // Track the event
  if (window.zenovay) {
    window.zenovay('track', 'user_signup', {
      plan: 'free',
      source: 'homepage',
    });
  }
};

return (
  <button onClick={handleSignup}>
    Sign Up
  </button>
);
}

Serverseitiges Tracking

Für serverseitiges Event-Tracking senden Sie Ereignisse direkt an den Zenovay-Tracking-Endpoint. Dies ist ein öffentlicher Endpoint, der keinen API-Schlüssel erfordert:

app/api/checkout/route.tsTypeScript
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
const { amount } = await request.json();

// Process payment...

// Track conversion server-side via the public tracking endpoint
await fetch('https://api.zenovay.com/e/YOUR_TRACKING_CODE', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'User-Agent': request.headers.get('user-agent') || '',
    'X-Forwarded-For': request.headers.get('x-forwarded-for') || '',
  },
  body: JSON.stringify({
    type: 'event',
    payload: {
      name: 'purchase_complete',
      url: 'https://yoursite.com/checkout',
      props: { amount, currency: 'USD' },
    },
  }),
});

return NextResponse.json({ success: true });
}

Der Tracking-Endpoint (/e/:trackingCode) ist öffentlich und erfordert keinen API-Schlüssel. Leiten Sie den Original-User-Agent und die IP-Adresse des Benutzers für eine genaue Besucherzuordnung weiter.

Benutzer identifizieren

Verknüpfen Sie Ereignisse mit authentifizierten Benutzern:

app/dashboard/page.tsxTypeScript
'use client';

import { useEffect } from 'react';
import { useUser } from '@/hooks/useUser';

export default function Dashboard() {
const { user } = useUser();

useEffect(() => {
  if (user && window.zenovay) {
    window.zenovay('identify',user.id, {
      email: user.email,
      name: user.name,
      plan: user.subscription?.plan,
    });
  }
}, [user]);

return <div>Dashboard</div>;
}

Link-Klicks verfolgen

Verfolgen Sie externe Link-Klicks:

components/ExternalLink.tsxTypeScript
'use client';

export function ExternalLink({ href, children }: { href: string; children: React.ReactNode }) {
const handleClick = () => {
  if (window.zenovay) {
    window.zenovay('track', 'external_link_click', {
      url: href,
      text: children?.toString(),
    });
  }
};

return (
  <a
    href={href}
    onClick={handleClick}
    target="_blank"
    rel="noopener noreferrer"
  >
    {children}
  </a>
);
}

SPA-Seitenaufruf-Tracking

Für Client-seitige Navigation-Verfolgung im App Router:

app/analytics.tsxTypeScript
'use client';

import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

export function Analytics() {
const pathname = usePathname();
const searchParams = useSearchParams();

useEffect(() => {
  if (window.zenovay) {
    window.zenovay('track', 'pageview', {
      path: pathname,
      title: document.title,
    });
  }
}, [pathname, searchParams]);

return null;
}

// Add to your root layout:
// <Analytics />

TypeScript-Unterstützung

Fügen Sie Typdeklarationen für das globale zenovay-Objekt hinzu:

types/zenovay.d.tsTypeScript
declare global {
interface Window {
  zenovay: (...args: any[]) => void;
}
}

export {};

Testen in der Entwicklung

In der Entwicklung können Sie überprüfen, ob Ereignisse gesendet werden, indem Sie die Browser-Konsole öffnen und Netzwerkanfragen an api.zenovay.com beobachten. Das Zenovay-Dashboard zeigt auch Echtzeit-Ereignisdaten an.

hooks/useZenovay.tsTypeScript
// Optional: Create a helper hook for cleaner tracking calls
export function useZenovay() {
const track = (eventName: string, data?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('track',eventName, data);
  }
};

const identify = (userId: string, traits?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('identify', userId, traits);
  }
};

const trackGoal = (goalName: string, data?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('goal', goalName, data);
  }
};

return { track, identify, trackGoal };
}

Nächste Schritte

Ihre Next.js-App verfolgt nun Analytics mit Zenovay! Überprüfen Sie Ihr Dashboard, um Echtzeit-Daten zu sehen.

Weitere Informationen:

War diese Seite hilfreich?