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.