Analytics

Integra tracking de visitas y eventos en tu SaaS con Vercel Analytics y opcionalmente Google Analytics.

Vercel Analytics

Instalacion

npm install @vercel/analytics

Configuración

Añade el componente <Analytics /> en tu layout principal:

app/layout.tsx

import { Analytics } from "@vercel/analytics/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Vercel Analytics funciona automáticamente en producción cuando despliegas en Vercel. En desarrollo local no envia datos.

Eventos personalizados

Trackea acciones especificas de tus usuarios:

import { track } from "@vercel/analytics";

// En un boton de compra
<button onClick={() => track("checkout_clicked", { plan: "pro" })}>
  Comprar Pro
</button>

// Despues de un registro exitoso
track("user_registered", { method: "email" });

// Al completar onboarding
track("onboarding_completed", { step: 4 });

Vercel Speed Insights (opcional)

Añade métricas de rendimiento (Web Vitals):

npm install @vercel/speed-insights

app/layout.tsx

import { SpeedInsights } from "@vercel/speed-insights/next";

// Añadelo junto a Analytics
<Analytics />
<SpeedInsights />

Google Analytics (opcional)

Si prefieres o necesitas Google Analytics, usa next/script:

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-TU_ID"
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('consent', 'default', {
              analytics_storage: 'denied',
              ad_storage: 'denied',
            });
            gtag('config', 'G-TU_ID');
          `}
        </Script>
      </body>
    </html>
  );
}

Si usas Google Analytics en la UE, necesitas un banner de cookies para cumplir con GDPR. Configura consent como denied por defecto y activalo cuando el usuario acepte.

Variable de entorno

Guarda el ID en una variable de entorno para no hardcodearlo:

.env.local

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}

Eventos recomendados para SaaS

Evento	Cuando trackearlo
`page_view`	Automatico con Vercel Analytics
`checkout_clicked`	Al hacer clic en boton de compra
`checkout_completed`	En la página `/success`
`user_registered`	Despues del registro exitoso
`lead_captured`	Al enviar formulario de email
`faq_opened`	Al expandir una pregunta del FAQ

Personalizacion

Vercel Analytics: Solo necesitas desplegar en Vercel. Se activa automáticamente.
Google Analytics: Reemplaza G-TU_ID con tu Measurement ID de GA4.
Eventos custom: Usa track() de Vercel o gtag('event', ...) de GA en cualquier componente.

Analytics

On this page