4 min de leitura

Integração Next.js

Adicione análises do Zenovay ao seu aplicativo Next.js usando o componente Script integrado para carregamento otimizado.

App Router (Next.js 13+)

Adicione o componente Script ao seu layout raiz:

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://api.zenovay.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

Substitua YOUR_TRACKING_CODE pelo código de rastreamento do seu site. Encontre-o no aplicativo em Domains → [seu site] → General (cartão de script de rastreamento, aba Next.js).

Cartão de script de rastreamento mostrando o snippet do script com abas HTML, React, Next.js e First-Party — Seu código de rastreamento está na página General das configurações do seu domínio, na aba Next.js.

Pages Router (Herdado)

Para o Pages Router, adicione o script ao _app.tsx:

pages/_app.tsxTSX

import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
return (
  <>
    <Script
      src="https://api.zenovay.com/z.js"
      data-tracking-code="YOUR_TRACKING_CODE"
      strategy="afterInteractive"
    />
    <Component {...pageProps} />
  </>
);
}

Estratégias de Script

O Next.js fornece diferentes estratégias de carregamento:

Estratégia	Descrição	Caso de Uso
`afterInteractive`	Carrega após a página se tornar interativa	Recomendado para análises
`lazyOnload`	Carrega durante o tempo ocioso do navegador	Scripts não críticos
`beforeInteractive`	Carrega antes da hidratação da página	Apenas scripts críticos

Estratégia RecomendadaTSX

<Script
src="https://api.zenovay.com/z.js"
data-tracking-code="YOUR_TRACKING_CODE"
strategy="afterInteractive"
/>

Variáveis de Ambiente

Use variáveis de ambiente para o código de rastreamento:

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const trackingCode = process.env.NEXT_PUBLIC_ZENOVAY_ID;

return (
  <html lang="en">
    <head>
      {trackingCode && (
        <Script
          src="https://api.zenovay.com/z.js"
          data-tracking-code={trackingCode}
          strategy="afterInteractive"
        />
      )}
    </head>
    <body>{children}</body>
  </html>
);
}

.env.localBash

NEXT_PUBLIC_ZENOVAY_ID=ZV_ABC123XYZ

Rastreamento de Primeira Parte (Contornar Bloqueadores de Anúncios)

Para melhor precisão, use rastreamento de primeira parte:

app/layout.tsxTSX

import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://metrics.yourdomain.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

O rastreamento de primeira parte requer um registro CNAME DNS. Consulte o Guia de Rastreamento de Primeira Parte para instruções de configuração.

Exportação Estática (Cloudflare Pages)

Para exportações estáticas, o componente Script funciona da mesma forma:

next.config.jsJavaScript

/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// ... other config
};

module.exports = nextConfig;

O script de rastreamento será incorporado às páginas HTML geradas.

Componentes de Servidor

O script de rastreamento funciona automaticamente com React Server Components. Nenhuma configuração especial é necessária.

Middleware e Edge Runtime

Para aplicativos usando Edge runtime, o componente Script do lado do cliente lida com rastreamento como de costume. As análises do lado do servidor podem usar a integração de API.

Verificação

Após a instalação:

Construa e implante seu aplicativo Next.js
Abra DevTools → aba Network
Procure por solicitações para api.zenovay.com
Verifique seu Painel Zenovay para dados recebidos

Solução de Problemas

O script não está carregando no desenvolvimento?

O script carrega na navegação da página, não no carregamento inicial no modo dev
Construa e visualize previamente (npm run build && npm start) para testar adequadamente

Tags de script duplicadas?

Adicione o Script apenas uma vez no seu layout raiz
Não o adicione em páginas individuais

Avisos de incompatibilidade de hidratação?

Use strategy="afterInteractive" para evitar problemas de SSR
Certifique-se de que o script está na seção <head>

Problemas de Política de Segurança de Conteúdo?

Adicione api.zenovay.com à sua diretiva CSP script-src
Para primeira parte: adicione seu subdomínio CNAME