El análisis de datos es imprescindible si desea realizar un seguimiento de la cantidad de visitantes que recibe su sitio web. Hay diferentes formas de agregar análisis a su proyecto, incluido Google Analytics. Es un servicio gratuito y es relativamente simple de configurar.
Aprenda a agregar Google Analytics a su sitio usando Next.js, un marco de React para crear sitios web compatibles con SEO.
Configuración de Google Analytics
Google Analytics proporciona información en el comportamiento de las personas que visitan su sitio web. Le dice qué páginas obtienen la cantidad de visitas y le brinda datos de audiencia como la ubicación, la edad, el interés y el dispositivo que usan. Estos datos pueden ayudar a tomar decisiones sobre la dirección que debe tomar su negocio para tener éxito.
Para comenzar, visite el panel de análisis y cree una nueva cuenta siguiendo estos pasos:
- Haga clic en el Crear una cuenta botón en la pestaña de administración para crear una nueva cuenta.
- Agregue un nombre de cuenta en la sección Configuración de la cuenta.
- Cree la propiedad de análisis proporcionando un nombre.
- Agrega los detalles de la empresa. Seleccione las opciones que se aplican a su sitio web.
- Haga clic en el Crear botón para terminar de configurar la propiedad.
- Haga clic en flujo web para especificar el flujo de datos que debe rastrear Google Analytics.
- Especifique la URL de su sitio web y asigne un nombre al flujo de datos.
- Haga clic en las instrucciones de etiquetado y obtenga el script que usará en su sitio web.
- Copie el ID de medición (el código de seguimiento) para usarlo más tarde.
Una vez que obtenga el código de seguimiento, puede configurar el proyecto Next.js.
Configuración del proyecto Next.js
Si aún no tiene configurado un proyecto Next.js, consulte el Guía oficial de Next.js Para empezar.
Cuando creó la propiedad de etiqueta de sitio global, obtuvo un script como este:
<!-- Etiqueta de Google (gtag.js) -->
<script asíncrono src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<guion>
ventana.dataLayer = ventana.capa de datos || [];
funcióngtag(){capaDeDatos.push(argumentos);}
gtag('js', nuevoFecha());
gtag('configuración', 'G-NHVWK8L97D');
</script>
Debe agregar este script a la etiqueta principal de su sitio web. En Next.js, usa el componente Script de next/script. Este componente es una extensión de la etiqueta de secuencia de comandos HTML. Le permite incluir scripts de terceros en su sitio web Next.js y establecer su estrategia de carga, mejorando el rendimiento.
El Guión siguiente.js El componente ofrece diferentes estrategias de carga. La estrategia “afterinteractive” es adecuada para un script de análisis. Esto significa que se cargará después de que la página sea interactiva.
importar Guion de "siguiente/script"
<Script origen="" estrategia="despuésInteractivo" />
Abre el páginas/_app.js e importe el componente Script en la parte superior.
importar Guion de 'siguiente/script'
A continuación, modifique la declaración de devolución del componente de la aplicación para incluir la etiqueta de secuencia de comandos de Google Analytics.
importar '../estilos/globales.css'
importar Disposición de '../componentes/Disposición/Disposición'
importar Guion de 'siguiente/script'funciónMi aplicación({ Componente, accesorios de página }) {
devolver (
<>
<Estrategia de guión ="despuésInteractivo" origen="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Guion
identificación ='Google analitico'
estrategia="despuésInteractivo"
peligrosamenteSetInnerHTML={{
__html: `
ventana.dataLayer = ventana.capa de datos || [];
funcióngtag(){capaDeDatos.push(argumentos);}
gtag('js', nuevoFecha());
gtag('configuración', 'G-XXXXXXX', {
ruta_página: ventana.ubicación.ruta de acceso,
});
`,
}}
/>
<Disposición>
<Componente {...pageProps} />
</Layout>
</>
)
}
exportarpor defecto Mi aplicación
Tenga en cuenta que esta etiqueta es ligeramente diferente de la que proporciona Google Analytics. Utiliza peligrosamente SetInnerHTML e incluye una estrategia de carga. Sin embargo, funcionan igual.
Recuerde reemplazar G-XXXXXXX con su código de seguimiento. También es recomendable almacenar el código de seguimiento en un archivo .env para mantenerlo en secreto.
Agregar Google Analytics a una aplicación de una sola página
Puede usar la etiqueta de secuencia de comandos anterior para un sitio web normal y dejarlo así. Sin embargo, para una aplicación de una sola página como un sitio web de Next.js, debe realizar algunos pasos adicionales.
A aplicación de una sola página (SPA) es un sitio web que carga todo el contenido por adelantado, en respuesta a una solicitud inicial. El navegador carga contenido dinámicamente cuando un usuario hace clic en los enlaces para navegar por el sitio. No hace una solicitud de página, solo cambia la URL.
Esto es diferente para las páginas de Next.js que usan getServerSideProps, ya que el navegador las procesa a pedido.
La etiqueta de Google funciona registrando una vista de página cuando se carga una nueva página. Entonces, para los SPA, la etiqueta de Google solo se ejecuta una vez, cuando la página se carga inicialmente. Por lo tanto, debe registrar manualmente las vistas a medida que el usuario navega a diferentes páginas.
Ver la medida de una sola página Guía de Google Analytics aprender más.
Para registrar manualmente las vistas de página en Next.js usando el script gtag, cree una nueva carpeta llamadaliberación y agregar un nuevo archivo, gtag.js.
exportarconstante GA_MEASUREMENT_ID = proceso.env. GA_MEASUREMENT_ID;exportarconstante página vista = () => {
ventana.gtag("configuración", GA_MEASUREMENT_ID, {
página_ruta: URL,
});
};
exportarconstante evento = ({ acción, categoría, etiqueta, valor }) => {
ventana.gtag("evento", acción, {
event_category: categoría,
event_label: etiqueta,
valor,
});
};
A continuación, modifique /pages/_app.js para usar estas funciones y realizar un seguimiento de las vistas de página en el enlace useEffect.
importar '../estilos/globales.css'
importar Disposición de '../componentes/Disposición/Disposición'
importar Guion de 'siguiente/script'
importar { usar enrutador } de 'siguiente/enrutador';
importar { efecto de uso } de "reaccionar";
importar * como gtag de "../lib/gtag"funciónMi aplicación({ Componente, pageProps }: AppProps) {
constante enrutador = usar enrutador ();usarEfecto(() => {
constante handleRouteChange = (url) => {
gtag.vista de pagina(URL);
};enrutador.eventos.on("rutaCambiarCompletar", manejarCambioDeRuta);
devolver () => {
enrutador.eventos.off("rutaCambiarCompletar", manejarCambioDeRuta);
};
}, [enrutador.eventos]);
devolver (
<>
<Estrategia de guión ="despuésInteractivo" origen="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Guion
identificación ='Google analitico'
estrategia="despuésInteractivo"
peligrosamenteSetInnerHTML={{
__html: `
ventana.dataLayer = ventana.capa de datos || [];
funcióngtag(){capaDeDatos.push(argumentos);}
gtag('js', nuevoFecha());
gtag('configuración', 'G-XXXXXX', {
ruta_página: ventana.ubicación.ruta de acceso,
});
`,
}}
/>
<Disposición>
<Componente {...pageProps} />
</Layout>
</>
)
}
exportarpor defecto Mi aplicación
Este ejemplo usa los ganchos useRouter y useEffect para registrar una vista de página cada vez que el usuario navega a otra página.
Llame al método useRouter desde next/router y asígnelo a la variable del enrutador. En el enlace useEffect, escuche el evento routeChangeComplete en el enrutador. Cuando se active el evento, registre una vista de página llamando a la función handleRouteChange.
La declaración de devolución del gancho useEffect anula la suscripción del evento routeChangeComplete con el método 'off'.
Utilice Google Analytics para recopilar datos de usuario
Los datos son enormemente beneficiosos para tomar buenas decisiones, y agregar Google Analytics a su sitio web es una forma de recopilarlos.
Puede agregar Google Analytics a un proyecto de Next.js mediante enlaces para asegurarse de registrar todas las visitas a la página, incluso cuando una página utiliza el enrutamiento del lado del cliente. Ahora puede ver cuántas visitas obtiene su sitio en su panel de control de Google Analytics.