Aller au contenu principal
Zenovaydocs
5 min de lecture

Démarrage rapide Next.js

Intégrez Zenovay Analytics dans votre application Next.js. Supporte à la fois App Router (Next.js 13+) et Pages Router.

Installation

Aucun package npm n'est nécessaire. Zenovay utilise un script de suivi léger que vous ajoutez à votre mise en page.

Trouvez votre code de suivi dans l'application Zenovay : ouvrez Domains, cliquez sur votre site, puis accédez à la page des paramètres General. La carte Tracking script affiche votre extrait de code et un bouton Verify Installation.

Carte du script de suivi affichant l'extrait de script avec les onglets HTML, React, Next.js et First-Party, et un bouton Verify Installation
Copiez votre code de suivi à partir de la page des paramètres General du domaine.

Configuration avec App Router (Next.js 13+)

Ajouter le script de suivi

Ajoutez le script de suivi Zenovay à votre mise en page racine en utilisant le composant Script de Next.js :

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>
);
}

C'est tout ! Zenovay suivra automatiquement les pages vues dans votre application Next.js.

Configuration avec Pages Router

Ajouter le script à l'application personnalisée

Mettez à jour votre fichier _app.tsx :

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"
    />
  </>
);
}

Suivi des événements personnalisés

Utilisez window.zenovay pour suivre les événements personnalisés dans vos composants :

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>
);
}

Suivi côté serveur

Pour le suivi des événements côté serveur, envoyez les événements directement au point de terminaison de suivi Zenovay. C'est un point de terminaison public qui ne nécessite pas de clé API :

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 });
}

Le point de terminaison de suivi (/e/:trackingCode) est public et ne nécessite pas de clé API. Transmettez le User-Agent et l'adresse IP de l'utilisateur original pour une attribution précise des visiteurs.

Identifier les utilisateurs

Associez les événements aux utilisateurs authentifiés :

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>;
}

Suivi des clics de lien

Suivi les clics sur les liens externes :

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>
);
}

Suivi des pages vues en SPA

Pour le suivi de la navigation côté client dans 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 />

Support TypeScript

Ajoutez des déclarations de type pour l'objet global zenovay :

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

export {};

Test en développement

En développement, vous pouvez vérifier que les événements sont envoyés en ouvrant la console du navigateur et en observant les requêtes réseau vers api.zenovay.com. Le tableau de bord Zenovay affiche également les données des événements en temps réel.

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 };
}

Prochaines étapes

Votre application Next.js suit maintenant les analytics avec Zenovay ! Consultez votre tableau de bord pour voir les données en temps réel.

Continuez l'apprentissage :

Cette page vous a-t-elle été utile ?