Testar grátis

Instalar em Next.js e React

Atualizado em 28 de outubro de 2026

Tag no layout, eventos em navegação sem recarregar a página e tipagem do window.utmetrica.

Next.js (App Router)

Coloque a tag no layout raiz. Ela é renderizada pelo servidor com os atributos data-* intactos.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR">
      <head>
        <script src="https://utmetrica.com.br/sdk/tracker.v1.js" data-key="SUA_CHAVE" async />
      </head>
      <body>{children}</body>
    </html>
  );
}

React com Vite ou similar

Cole a tag em index.html, antes de </head>.

Navegação sem recarregar

O rastreador intercepta history.pushState, history.replaceState e o botão voltar do navegador, e registra uma visualização por rota nova (caminho mais parâmetros de consulta). Roteadores que usam a History API, como o do Next.js e o React Router, funcionam sem configuração.

Rotas por hash (/#/pagina) não geram visualização: a parte depois do # não é lida.

TypeScript

// utmetrica.d.ts
interface Window {
  utmetrica?: {
    track(name: string, props?: Record<string, string | number | boolean>): void;
    pageview(): void;
    setConsent(granted: boolean): void;
    getVisitorId(): string | null;
    decorate(url: string): string;
    flush(): void;
  };
}

Use sempre window.utmetrica?.track(...): como o script é async, ele pode ainda não ter carregado quando o seu código roda.

Veja também