Saltar al contenido principal
Zenovaydocs
5 min de lectura

Inicio Rápido con Next.js

Integra Zenovay Analytics en tu aplicación Next.js. Soporta tanto App Router (Next.js 13+) como Pages Router.

Instalación

No se requiere ningún paquete npm. Zenovay utiliza un script de seguimiento ligero que agregues a tu layout.

Encuentra tu código de seguimiento en la aplicación de Zenovay: abre Dominios, haz clic en tu sitio, luego ve a la página de configuración General. La tarjeta Script de seguimiento muestra tu fragmento y un botón Verificar instalación.

Tarjeta de script de seguimiento mostrando el fragmento de script con pestañas de HTML, React, Next.js y Primera parte, y un botón Verificar instalación
Copia tu código de seguimiento desde la página de configuración General del dominio.

Configuración con App Router (Next.js 13+)

Agregar Script de Seguimiento

Agrega el script de seguimiento de Zenovay a tu layout raíz usando el componente 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>
);
}

¡Eso es! Zenovay ahora rastreará automáticamente las vistas de página en tu aplicación Next.js.

Configuración con Pages Router

Agregar Script a Custom App

Actualiza tu archivo _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"
    />
  </>
);
}

Rastrear Eventos Personalizados

Usa window.zenovay para rastrear eventos personalizados en tus componentes:

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

Rastreo del Lado del Servidor

Para rastrear eventos del lado del servidor, envía eventos directamente al punto final de rastreo de Zenovay. Este es un punto final público que no requiere una clave 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 });
}

El punto final de rastreo (/e/:trackingCode) es público y no requiere una clave API. Reenvía el User-Agent y la dirección IP del usuario original para una atribución de visitante precisa.

Identificar Usuarios

Asocia eventos con usuarios autenticados:

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

Rastrear Clics en Enlaces

Rastrea clics en enlaces externos:

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

Rastreo de Vistas de Página en SPA

Para rastreo de navegación del lado del cliente en 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 />

Soporte de TypeScript

Agrega declaraciones de tipo para el objeto global zenovay:

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

export {};

Pruebas en Desarrollo

En desarrollo, puedes verificar que los eventos se están enviando abriendo la consola del navegador y observando las solicitudes de red a api.zenovay.com. El panel de control de Zenovay también muestra datos de eventos en tiempo real.

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

Próximos Pasos

¡Tu aplicación Next.js ya está rastreando analytics con Zenovay! Consulta tu panel de control para ver datos en tiempo real.

Continúa aprendiendo:

¿Fue útil esta página?