Análise para Next.js

Análise de produto para Next.js

Coloque o PulsePanda no seu app Next.js e capture visualizações de página, eventos, session replay e mapas de calor em todas as rotas — App Router ou Pages Router — sem configurar um backend ou lutar com a hidratação.

Comece grátis Guia de instalação

Por que isso importa

O que as equipes de Next.js finalmente conseguem ver

Mudanças de rota ficam sem rastreamento

A navegação do lado do cliente no Next.js não dispara um carregamento completo de página, então análises ingênuas perdem a maioria das visualizações. O PulsePanda conecta-se ao roteador e conta cada mudança de rota.

Você lança recursos às cegas

Rastreie eventos personalizados para cadastros, upgrades e uso de recursos para ver o que realmente é usado após cada deploy.

Bugs são difíceis de reproduzir

O session replay registra o DOM exato e os erros do console, para que você possa assistir à renderização quebrada em vez de adivinhar a partir de um stack trace.

Configuração

Adicionar o PulsePanda ao Next.js

Adicione o snippet uma vez no seu layout raiz. Use o Script componente com afterInteractive para que ele carregue sem bloquear sua primeira renderização.

App Router — app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://pulsepanda.dev/sdk.js"
          data-project="YOUR_PROJECT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Usando o Pages Router? Adicione o mesmo <Script> para pages/_app.tsx em vez disso. Análise web, cliques capturados automaticamente, session replay e mapas de calor começam imediatamente.

Fluxo de trabalho

Da instalação ao insight

Instale o snippet

Adicione o script uma vez ao seu projeto Next.js. Análise web, cliques capturados automaticamente, session replay e mapas de calor começam a coletar imediatamente.

Rastreie o que importa

Chame pulsepanda.track() em ações importantes e pulsepanda.identify() após o login para conectar eventos, sessões e feedback a cada usuário.

Aja com base nos dados

Construa funis, assista aos replays por trás das desistências, leia mapas de calor e colete feedback dentro do produto — tudo em um só workspace.

O que você ganha

Um snippet, o panorama completo

Camada de análiseVisualizações de página, eventos personalizados, funis de conversão e retenção.

Camada de comportamentoSession replay, mapas de calor de clique e rolagem e contexto de erro.

Camada de feedbackPesquisas dentro do produto, widgets de feedback, formulários e um quadro de votação de recursos.

Perguntas frequentes

Perguntas sobre Next.js

O PulsePanda rastreia mudanças de rota do lado do cliente no Next.js?

Sim. O SDK escuta a navegação da History API, então cada transição do App Router ou Pages Router é contada como uma visualização de página automaticamente — sem necessidade de eventos manuais do roteador.

O snippet vai prejudicar meus Core Web Vitals?

Não. O script é adiado e carregado com a estratégia afterInteractive, então ele roda depois que seu conteúdo é renderizado e não bloqueia o LCP nem a interação.

Posso enviar eventos personalizados a partir de server components?

Eventos personalizados são enviados do navegador com pulsepanda.track(). Chame-o a partir de client components ou manipuladores de eventos; os server components renderizam a página que carrega o SDK.

Páginas relacionadas

Explorar mais

Adicione análise ao seu app Next.js

Instale uma vez e conecte análise, session replay, mapas de calor, funis e feedback em minutos.

Comece grátis