Integración de Google Analytics en tu sitio web paso a paso

Clase 14 de 17Curso de Introducción a Jamstack

Resumen

Medir el comportamiento de tus visitantes es fundamental para tomar decisiones estratégicas sobre el contenido de tu sitio web. Google Analytics es la herramienta gratuita de Google que te permite obtener trazabilidad completa: quién visita tu sitio, qué hace, desde dónde accede y qué dispositivos utiliza. Integrarla correctamente desde el inicio te prepara para analizar campañas, monetizar y optimizar tu presencia digital.

¿Cómo crear una cuenta de Google Analytics paso a paso?

El primer paso es acceder a la URL de Google Analytics y contar con una cuenta de Gmail para vincular los servicios de Google. Al hacer clic en empezar a medir [0:46], se inicia el proceso de creación de una nueva propiedad.

  • Asigna como nombre de cuenta tu dominio, por ejemplo oscarbarajas.co.
  • En la configuración de compartir datos, puedes elegir qué información compartes con Google o dejar los valores por defecto [1:12].
  • El nombre de la propiedad identifica el espacio donde se medirán las estadísticas de tu sitio [1:30].

¿Por qué es importante configurar el huso horario y la moneda?

El huso horario determina cómo se reportan las estadísticas temporales. Selecciona el que corresponda a tu ubicación geográfica; por ejemplo, Colombia utiliza GTM -5 [1:47]. La moneda se configura en dólares por defecto, pero puedes cambiarla según tu región cuando empieces a monetizar. Ambos valores son editables más adelante sin problema.

¿Qué información de la empresa se debe completar?

Google solicita datos básicos sobre el tipo de empresa y el sector [2:22]. Puedes indicar que es una empresa pequeña del sector informático y seleccionar los objetivos de uso: medir la interacción de clientes con el sitio y medir datos de varios dispositivos y plataformas [2:38]. Después de aceptar los términos de servicio, se accede al panel administrativo.

¿Cómo obtener el código de seguimiento para tu página web?

Desde el panel administrativo puedes añadir diferentes recursos: aplicación iOS, aplicación Android o una página web [3:10]. Al seleccionar página web, introduces tu dominio y habilitas HTTPS, que en este caso ya estaba configurado previamente con Cloudflare [3:25].

Google Analytics genera automáticamente métricas como:

  • Páginas vistas.
  • Desplazamientos (scrolls).
  • Clics de salida.

Al crear el flujo, se genera un ID único de seguimiento y los scripts necesarios para la integración [3:52].

¿Cómo insertar Google Analytics en un proyecto Next.js?

La integración en Next.js requiere modificar un archivo específico dentro de la estructura del proyecto. En la carpeta source/pages, se encuentra el archivo _document [4:22], que es el recurso donde se agregan elementos globales que aplican a todas las páginas del sitio.

Dentro de _document existen tres secciones clave:

  • Head: la parte superior del documento HTML.
  • Body: donde se renderizan los componentes y scripts.
  • Sección de scripts adicionales.

¿Cómo se inserta el script de forma correcta en Next.js?

No basta con pegar el código tal cual lo proporciona Google. En Next.js se utiliza la propiedad dangerouslySetInnerHTML [5:22] para insertar bloques de HTML dentro de un componente <script>. La estructura requiere pasar un objeto con la clave __html y el contenido del script de Analytics envuelto en template literals (comillas francesas) [5:40].

El primer <script> externo que carga la librería de Google se mantiene como etiqueta estándar. El segundo, que contiene la configuración con tu ID de seguimiento, se adapta usando dangerouslySetInnerHTML para que Next.js lo procese correctamente [6:08].

¿Cómo desplegar los cambios a producción?

Una vez guardado el archivo, los cambios se envían al repositorio mediante los siguientes comandos en la terminal [6:55]:

bash git status git add . git commit -m "update Google Analytics" git push origin master

Esto dispara un nuevo compilado automático en la plataforma de despliegue, integrando Google Analytics en producción. A partir de ese momento, la herramienta comenzará a recopilar datos de tráfico y comportamiento de los visitantes.

Si quieres profundizar en el análisis de datos y sacarle el máximo provecho a los reportes, existe un curso especializado en Google Analytics que complementa esta integración. ¿Ya tienes Analytics en tu sitio? Comparte tu experiencia en los comentarios.