4 min de lectura

Integración con Next.js

Añade análisis de Zenovay a tu aplicación Next.js usando el componente Script integrado para una carga óptima.

App Router (Next.js 13+)

Añade el componente Script a tu layout raíz:

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>
);
}

Reemplaza YOUR_TRACKING_CODE con el código de seguimiento de tu sitio. Encuéntralo en la aplicación bajo Domains → [tu sitio] → General (la tarjeta del script de seguimiento, pestaña Next.js).

Tarjeta de script de seguimiento mostrando el fragmento de script con pestañas HTML, React, Next.js y First-Party — Tu código de seguimiento está en la página General de la configuración de tu dominio, bajo la pestaña Next.js.

Pages Router (Heredado)

Para el Pages Router, añade el script a _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} />
  </>
);
}

Estrategias de Script

Next.js proporciona diferentes estrategias de carga:

Strategy	Descripción	Caso de uso
`afterInteractive`	Se carga después de que la página sea interactiva	Recomendado para análisis
`lazyOnload`	Se carga durante el tiempo de inactividad del navegador	Scripts no críticos
`beforeInteractive`	Se carga antes de la hidratación de la página	Solo scripts críticos

Estrategia RecomendadaTSX

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

Variables de Entorno

Usa variables de entorno para el código de seguimiento:

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

Seguimiento de First-Party (Omitir Bloqueadores de Anuncios)

Para mayor precisión, usa seguimiento de first-party:

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>
);
}

El seguimiento de first-party requiere un registro CNAME de DNS. Consulta la Guía de Seguimiento de First-Party para obtener instrucciones de configuración.

Exportación Estática (Cloudflare Pages)

Para exportaciones estáticas, el componente Script funciona de la misma manera:

next.config.jsJavaScript

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

module.exports = nextConfig;

El script de seguimiento se incrustará en las páginas HTML generadas.

Componentes de Servidor

El script de seguimiento funciona automáticamente con React Server Components. No se necesita configuración especial.

Middleware y Edge Runtime

Para aplicaciones que usan Edge runtime, el componente Script del lado del cliente maneja el seguimiento como de costumbre. Los análisis del lado del servidor pueden usar la integración de API.

Verificación

Después de la instalación:

Compila e implementa tu aplicación Next.js
Abre DevTools → pestaña Network
Busca solicitudes a api.zenovay.com
Comprueba tu Panel de Control de Zenovay para ver los datos entrantes

Solución de Problemas

¿El script no se carga en desarrollo?

El script se carga en la navegación de páginas, no en la carga inicial en modo dev
Compila y previsualiza (npm run build && npm start) para probar correctamente

¿Etiquetas de script duplicadas?

Solo añade el Script una vez en tu layout raíz
No lo añadas en páginas individuales

¿Advertencias de desajuste de hidratación?

Usa strategy="afterInteractive" para evitar problemas de SSR
Asegúrate de que el script esté en la sección <head>

¿Problemas de Política de Seguridad de Contenido?

Añade api.zenovay.com a tu directiva CSP script-src
Para first-party: añade tu subdominio CNAME