Instalar Google Analytics con NextJS

¿Qué es Google Analytics?

Google Analytics es una herramienta de análisis web que te permite medir y analizar el tráfico de tu sitio web.

Consiguiendo un ID de Google Analytics

Lo primero que vamos a necesitar es conseguir un ID de Google Analytics. Asi que estos son los pasos para obtenerlo:

ve a Google Analytics

Lo primero que vamos a hacer es crear una cuenta de Google Analytics.

Haz clic en "Crear cuenta"
Introduce el nombre de tu sitio web
Selecciona la zona horaria y la moneda adecuadas
Haz clic en "Siguiente"

En el caso de que ya tengas una cuenta de Google Analytics, puedes saltarte los pasos anteriores y directamente crear una nueva propiedad.

Para crear una nueva propiedad, haz clic en "Crear" desde el panel de administración de Google Analytics.

Crear propiedad

Te haran algunas preguntas sobre como quieres ver los reportes de tu sitio web, por ejemplo la moneda o la zona horaria.

y te preguntaran la cantidad de personas que trabajan en tu sitio web puedes colocar la cantidad de personas que trabajan en tu sitio web. que gustes

Una vez termines todas las preguntas te daran unas opciones para escoger la plataforma pueder ser web, android o ios.

Configura un flujo de datos
- Selecciona "Web" como plataforma
- Introduce la URL de tu sitio web
- Asigna un nombre al flujo de datos
- Haz clic en "Crear flujo"
Obtén tu ID de medición
- Una vez creado el flujo, se mostrará tu ID de medición (comienza con "G-")
- Guarda este ID, lo necesitaremos para implementar Google Analytics en NextJS

Una vez lo selecciones te daran un google Analytics ID, este ID es el que vamos a usar para instalar Google Analytics en NextJS.

Cuenta creada

Instalando Google Analytics en NextJS

Una vez que tengas tu ID de Google Analytics, puedes implementarlo en tu proyecto NextJS de dos formas:

Usa @next/third-parties para añadir Google Analytics @next/third-parties es una biblioteca que proporciona una colección de componentes y utilidades que mejoran el rendimiento y la experiencia de desarrollo al cargar bibliotecas de terceros populares en tu aplicación Next.js. Está disponible con Next.js 14 (instala next@latest).

El componente GoogleAnalytics se puede utilizar para incluir Google Analytics 4 en tu página a través de la etiqueta de Google (gtag.js). Por defecto, carga los scripts originales después de que ocurra la hidratación en la página.

1. Implementación global (para todas las rutas)

Modifica tu archivo app/layout.tsx de la siguiente manera:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}): {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

Reemplaza G-XYZ con tu ID de Google Analytics.

2. O si quieres hacerlo para una ruta específica

Si prefieres implementar Google Analytics solo en ciertas páginas, incluye el componente en el archivo de la página:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

Verificación de la instalación

Para verificar que Google Analytics está funcionando correctamente:

Visita tu sitio web
Abre la consola de Google Analytics
Ve a la sección "Informes en tiempo real"
Deberías ver tu actividad registrada en tiempo real

Cuenta instalada

¡Y eso es todo! Ahora podrás analizar el tráfico de tu sitio web con Google Analytics.