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

Rastreamento de Primeira Parte com Next.js

Configure um proxy de primeira parte em sua aplicação Next.js para contornar bloqueadores de anúncios e proteção de rastreamento do navegador.

Dificuldade: Fácil - Esta é a opção mais simples para projetos Next.js. Apenas adicione algumas linhas no seu arquivo de configuração.

Por Que Funciona (Mesma Origem)

Esta abordagem usa /api/_z/script.js que está na mesma origem do seu site. Firefox ETP e outras proteções de rastreamento bloqueiam apenas requisições entre origens diferentes.

  • Navegador vê: seudominio.com/api/_z/script.js — mesma origem (primeira parte)
  • Next.js reescreve a requisição para o servidor Zenovay no lado do servidor (o navegador nunca vê isto)
  • Toda proteção de rastreamento é contornada porque a requisição é de primeira parte

Antes de Começar

Certifique-se de ter:

  • Um projeto Next.js 12+ (App Router ou Pages Router)
  • Seu código de rastreamento Zenovay (encontrado em Domains → seu site → General → Tracking script, na aba First-Party)
  • Acesso ao seu arquivo next.config.js ou next.config.ts

Formato do Seu Código de Rastreamento

Seu código de rastreamento é assim: ZV_XXXXXXXXXX

  • Começa com ZV_
  • Seguido por 10 caracteres (letras e números)
  • SENSÍVEL A MAIÚSCULAS - copie exatamente

Exemplo: ZV_Q8U0GYD70WR

Card do script de rastreamento mostrando o snippet do script com abas HTML, React, Next.js e First-Party
Encontre seu código de rastreamento e o snippet Next.js pronto para usar em Domains → seu site → General → Tracking script.

Como Funciona

Reescritas Next.js funcionam como um proxy do lado do servidor. Quando um navegador solicita /api/_z/script.js, Next.js a busca de api.zenovay.com/fp/script.js e a devolve. O navegador vê apenas seu domínio.

Navegador → seudominio.com/api/_z/script.js  (Primeira parte)
               ↓
         Reescrita Next.js
               ↓
         api.zenovay.com/fp/script.js (Servidor para servidor)

Etapa 1: Configurar Reescritas

Adicione a configuração de reescrita ao seu arquivo de configuração Next.js.

Qual arquivo de configuração?

  • next.config.js - Se seu projeto usa JavaScript
  • next.config.mjs - Se seu projeto usa módulos ES
  • next.config.ts - Se seu projeto usa TypeScript (Next.js 15+)

Para next.config.js (JavaScript)

next.config.jsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
// Add this rewrites configuration
async rewrites() {
  return [
    {
      // Proxy all requests to /api/_z/* to Zenovay's first-party endpoint
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Para next.config.mjs (Módulos ES)

next.config.mjsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

export default nextConfig

Para next.config.ts (TypeScript - Next.js 15+)

next.config.tsTypeScript
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

export default nextConfig

Se Você Já Tem Reescritas

Se sua configuração já possui uma função rewrites(), adicione a reescrita Zenovay ao array existente:

next.config.js (com reescritas existentes)JavaScript
const nextConfig = {
async rewrites() {
  return [
    // Your existing rewrites...
    {
      source: '/old-page',
      destination: '/new-page',
    },
    // Add Zenovay rewrite
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Etapa 2: Adicionar o Script de Rastreamento

Agora adicione o script de rastreamento à sua aplicação.

App Router (Next.js 13+)

Adicione o 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="/api/_z/script.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
)
}

Pages Router

Adicione o script ao seu _app.tsx personalizado:

pages/_app.tsxTSX
import Script from 'next/script'
import type { AppProps } from 'next/app'

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

Substitua YOUR_TRACKING_CODE pelo seu código de rastreamento real do painel Zenovay (ex: ZV_Q8U0GYD70WR).

Etapa 3: Reiniciar Seu Servidor de Desenvolvimento

Importante! Next.js armazena em cache o arquivo de configuração. Você DEVE reiniciar seu servidor de desenvolvimento após editar next.config.js.

TerminalBash
# Stop your current dev server (Ctrl+C)
# Then restart it
npm run dev

Etapa 4: Implantar Suas Mudanças

TerminalBash
# For Vercel (automatic deployment)
git add .
git commit -m "Add Zenovay first-party tracking"
git push

# Or manual Vercel deployment
vercel deploy

# For other platforms
npm run build && npm run start

Etapa 5: Verificar Se Está Funcionando

Verificação 1: Desenvolvimento Local

  1. Abra seu site em http://localhost:3000
  2. Pressione F12 para abrir DevTools
  3. Clique na aba Network
  4. Atualize a página
  5. Filtre por script.js
  6. Você deve ver uma requisição para /api/_z/script.js com status 200

Verificação 2: Modo Strict do Firefox (Mais Importante!)

Firefox tem a proteção de rastreamento mais rigorosa. Se funcionar no Firefox, funciona em todos os lugares.

  1. Abra o navegador Firefox
  2. Clique no botão de menu (três linhas, canto superior direito) → Configurações
  3. Clique em Privacidade e Segurança na barra lateral esquerda
  4. Em "Proteção aprimorada contra rastreamento", selecione Rigorosa
  5. Visite seu site
  6. Abra DevTools (F12) → aba Network
  7. Atualize e verifique se /api/_z/script.js carrega com status 200

Verificação 3: Painel Zenovay

  1. Vá para app.zenovay.com e faça login
  2. Clique no seu site
  3. Visite seu site em outra aba
  4. Em 1-2 minutos, você deve ver a visita aparecer no seu painel

Lista de Verificação Final

Antes de terminar, verifique TODOS estes itens:

  • next.config.js tem a regra de reescrita para /api/_z/:path*
  • Servidor de desenvolvimento foi reiniciado após mudança de configuração
  • Tag de script usa /api/_z/script.js (não a URL Zenovay direta)
  • Atributo data-tracking-code contém seu código de rastreamento correto
  • Testado no Firefox com Proteção aprimorada contra rastreamento definida como Rigorosa
  • Visitas aparecendo no painel Zenovay

Solução de Problemas

Script Retorna 404

Causa: A reescrita não está configurada corretamente ou o servidor não foi reiniciado.

Solução:

  1. Reinicie seu servidor de desenvolvimento - Esta é a correção mais comum
  2. Verifique se o arquivo next.config.js foi salvo
  3. Verifique se o caminho corresponde exatamente: /api/_z/:path*
  4. Certifique-se de estar usando source e destination (não from e to)

Script Carrega Mas Nenhum Dado Aparece

Causa: O código de rastreamento pode estar incorreto.

Solução:

  1. Encontre seu código de rastreamento em Domains → seu site → General → Tracking script
  2. Certifique-se de que data-tracking-code corresponde exatamente (sensível a maiúsculas)
  3. Verifique o console do navegador (F12 → aba Console) para erros

Reescritas Funcionam Localmente Mas Não em Produção

Causa: Algumas plataformas de hospedagem lidam com reescritas de maneira diferente.

Solução:

  • Vercel: Reescritas funcionam automaticamente
  • Netlify: Adicione a reescrita ao netlify.toml também
  • Auto-hospedado: Certifique-se de que seu servidor suporte reescritas Next.js

Geolocalização Incorreta

Causa: O IP real do visitante não está sendo encaminhado.

Solução: Para Vercel, isso funciona automaticamente. Para outras plataformas, você pode precisar de middleware:

middleware.tsTypeScript
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
if (request.nextUrl.pathname.startsWith('/api/_z/')) {
  const response = NextResponse.rewrite(
    new URL(`https://api.zenovay.com/fp/${request.nextUrl.pathname.replace('/api/_z/', '')}${request.nextUrl.search}`)
  )

  // Forward the real client IP
  const clientIP = request.headers.get('x-forwarded-for')?.split(',')[0]
                || request.headers.get('x-real-ip')
                || ''

  response.headers.set('X-Zenovay-Real-IP', clientIP)

  return response
}
}

export const config = {
matcher: '/api/_z/:path*',
}

Exemplo Completo

Aqui está um exemplo completo de next.config.js:

next.config.jsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
// Your existing config options...
reactStrictMode: true,

// Zenovay first-party proxy rewrite
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

E um app/layout.tsx completo:

app/layout.tsxTSX
import Script from 'next/script'
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
  <html lang="en">
    <head>
      {/* Zenovay Analytics - First-Party Tracking */}
      <Script
        src="/api/_z/script.js"
        data-tracking-code="ZV_Q8U0GYD70WR"  // Replace with your tracking code
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
)
}

Próximos Passos

Esta página foi útil?