Pular para o conteúdo principal
Zenovaydocs
5 min de leitura

Início Rápido com Next.js

Integre o Zenovay Analytics em seu aplicativo Next.js. Suporta tanto o App Router (Next.js 13+) quanto o Pages Router.

Instalação

Nenhum pacote npm é necessário. O Zenovay usa um script de rastreamento leve que você adiciona ao seu layout.

Encontre seu código de rastreamento no aplicativo Zenovay: abra Domains, clique no seu site e vá para a página de configurações General. O card Tracking script mostra seu snippet e um botão Verify Installation.

Card do script de rastreamento mostrando o snippet do script com abas HTML, React, Next.js e First-Party, e um botão Verify Installation
Copie seu código de rastreamento da página de configurações General do seu domínio.

Configuração com App Router (Next.js 13+)

Adicionar Script de Rastreamento

Adicione o script de rastreamento do Zenovay ao seu layout raiz usando o componente Script do 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>
);
}

É isso! O Zenovay rastreará automaticamente as visualizações de página em seu aplicativo Next.js.

Configuração com Pages Router

Adicionar Script ao App Personalizado

Atualize seu arquivo _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

Use window.zenovay para rastrear eventos personalizados em seus 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>
);
}

Rastreamento no Servidor

Para rastreamento de eventos no servidor, envie eventos diretamente para o endpoint de rastreamento do Zenovay. Este é um endpoint público que não requer uma chave de 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 });
}

O endpoint de rastreamento (/e/:trackingCode) é público e não requer uma chave de API. Encaminhe o User-Agent e endereço IP do usuário original para atribuição precisa do visitante.

Identificar Usuários

Associe eventos a usuários 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 Cliques em Links

Rastreie cliques em links 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>
);
}

Rastreamento de Visualizações de Página em SPA

Para rastreamento de navegação no lado do cliente no 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 />

Suporte TypeScript

Adicione declarações de tipo para o objeto global zenovay:

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

export {};

Testando em Desenvolvimento

Em desenvolvimento, você pode verificar se os eventos estão sendo enviados abrindo o console do navegador e observando as requisições de rede para api.zenovay.com. O painel do Zenovay também mostra dados de eventos em tempo 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 Passos

Seu aplicativo Next.js agora está rastreando análises com o Zenovay! Confira seu painel para ver dados em tempo real.

Continue aprendendo:

Esta página foi útil?