Introducción
Google Analytics 4 (GA4) es la última versión de la herramienta de análisis web de Google. Ofrece una serie de mejoras y nuevas características sobre Universal Analytics. En este post, te mostraré cómo integrar GA4 en una aplicación Next.js para que puedas empezar a medir el tráfico y el comportamiento de los usuarios en tu sitio web.
Pasos para la Integración
1. Configurar Google Analytics 4
Primero, necesitas configurar una cuenta de Google Analytics 4 si aún no lo has hecho.
- Ve a Google Analytics.
- Crea una nueva propiedad GA4 y obtén tu ID de medición (formato:
G-XXXXXXXXXX).
2. Configurar Next.js
A continuación, integra GA4 en tu aplicación Next.js.
Añadir Variables de Entorno
Asegúrate de que tu ID de medición esté almacenado en una variable de entorno. Puedes hacer esto agregando una variable en tu archivo .env.local:
GA_TRACKING_ID=G-XXXXXXXXXX
Modificar next.config.js
Añade la variable de entorno a la configuración de Next.js:
// next.config.js
module.exports = {
reactStrictMode: true,
env: {
GA_TRACKING_ID: process.env.GA_TRACKING_ID,
},
};
Crear el Script de Google Analytics
Modifica tu archivo _document.tsx para incluir el script de GA4:
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<meta name="google-site-verification" content="S5LcVHc201QJKtQlaNvkg4VGzGC6JoyYjHzE_zzHr1I" />
<script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.GA_TRACKING_ID}');
`,
}}
/>
<link rel="icon" href="https://blog.jqemprendedorve.com/wp-content/uploads/2023/08/cropped-logo.png" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Extender la Interfaz Window
Crea un archivo global.d.ts en el directorio types para extender la interfaz Window y evitar errores de TypeScript:
// types/global.d.ts
export { };
declare global {
interface Window {
dataLayer?: Record<string, any>[];
GA_INITIALIZED?: boolean;
}
}
Modificar _app.tsx para el Manejo de Rutas
Asegúrate de que GA4 registre las vistas de página correctamente:
// pages/_app.tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import '../styles/globals.css';
import { initGA, logPageView } from '../lib/ga';
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
useEffect(() => {
if (!window.GA_INITIALIZED) {
initGA();
window.GA_INITIALIZED = true;
}
const handleRouteChange = () => {
if (document.startViewTransition) {
document.startViewTransition(() => Promise.resolve());
}
logPageView();
};
router.events.on('routeChangeStart', handleRouteChange);
return () => {
router.events.off('routeChangeStart', handleRouteChange);
};
}, [router]);
return <Component {...pageProps} />;
}
export default MyApp;
Conclusión
Integrar Google Analytics 4 en tu aplicación Next.js es un proceso sencillo que te permitirá obtener valiosa información sobre el comportamiento de los usuarios en tu sitio web. Siguiendo los pasos descritos en este post, podrás configurar GA4 y empezar a recopilar datos de manera eficiente.
Espero que este post te haya sido útil.
Deja un comentario