La integración de Google Analytics (GA) en una aplicación Next.js permite realizar un seguimiento eficaz de las interacciones de los usuarios en todo el sitio web. Dadas las capacidades de renderizado del lado del servidor de Next.js, el enfoque es ligeramente diferente al de los frameworks sólo del lado del cliente.
- Configuración de una propiedad de Google Analytics
- Crear un módulo de GA
- Añada el script GA a su aplicación
- Seguimiento de las visitas a la página
- Implementar el seguimiento de eventos
- Pruebe y despliegue
- Consideraciones y prácticas recomendadas
- Reflexiones finales
Profundicemos en el proceso.
Configuración de una propiedad de Google Analytics
En primer lugar, asegúrese de que dispone de una propiedad de Google Analytics. Si no es así, cree una en su cuenta de Google Analytics, optando por una propiedad de Google Analytics 4 (GA4). Recibirá un "ID de medición" (como 'G-XXXXXXXXXX').
Crear un módulo de GA
Cree un módulo JavaScript para GA. Este módulo se encargará de la inicialización y el seguimiento de las páginas vistas y los eventos. Cree un archivo como lib/ga/index.js:
export const GA_TRACKING_ID = 'YOUR_MEASUREMENT_ID'; export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url, }); }; export const event = ({ action, category, label, value }) => { window.gtag('event', action, { event_category: category, event_label: label, value: value, }); };Sustituya YOUR_MEASUREMENT_ID por su ID de medición real.
Añada el script GA a su aplicación
En su archivo _document.js (cree uno en su directorio pages si no existe), incluya el script de Google Analytics:
import Document, { Html, Head, Main, NextScript } from 'next/document' import { GA_TRACKING_ID } from '../lib/ga' export default class MyDocument extends Document { render() { return ( <Html> <Head> {/* Etiqueta global del sitio (gtag.js) - Google Analytics */} <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} /> ) } }Seguimiento de las visitas a la página
En _app.js, utiliza la función pageview para realizar un seguimiento de las visitas a la página:
import { useEffect } from 'react' import { useRouter } from 'next/router' import * as ga from '../lib/ga' export default function MyApp({ Component, pageProps }) { const router = useRouter() useEffect(() => { const handleRouteChange = (url) => { ga.pageview(url) } router.events.on('routeChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) } }, [router.events]) return <Componente {...pageProps} /> }Implementar el seguimiento de eventos
Siempre que necesites realizar un seguimiento de eventos personalizados en tu aplicación, importa la función de eventos de tu módulo GA y utilízala:
import * as ga from '../lib/ga' ga.event({ action: 'submit_form', category: 'Contacto', label: 'Formulario de contacto', value: 'El usuario ha enviado un formulario de contacto' })Pruebe y despliegue
Pruebe su integración a fondo, asegurándose de que las vistas de página y los eventos se rastrean como se espera. Implemente la aplicación y supervise el panel de control de Google Analytics.
Consideraciones y prácticas recomendadas
- Cumplimiento de la privacidad: Asegúrese de que su implementación cumple con las leyes de privacidad como GDPR. Esto puede incluir la adición de mecanismos de consentimiento del usuario para el seguimiento.
- Depuración: Utilice herramientas como el depurador de Google Analytics para Chrome para validar la configuración.
- Seguimiento del lado del servidor frente al lado del cliente: Tenga en cuenta lo que se rastrea en el lado del servidor frente al lado del cliente en las aplicaciones Next.js.
Reflexiones finales
La integración de Google Analytics en una aplicación Next.js permite obtener información detallada sobre el comportamiento de los usuarios y el rendimiento del sitio. Sin embargo, es importante recordar que Google Analytics puede ser complejo y no adecuado para todas las organizaciones.
En Simple Analytics, ofrecemos una solución más sencilla y centrada en la privacidad, que simplifica el proceso de análisis a la vez que respeta la privacidad del usuario. Compruébelo usted mismo en nuestro panel de control.