RON Los pasillos de su sitio Edgio (¡con datos!)
¿Quieres obtener información más profunda sobre cómo los usuarios interactúan con tu sitio web next.js construido en Edgio Sites (Frontend Cloud Platform)? Habilitar el Real User Monitoring (RUM) le permite recopilar datos valiosos sobre la experiencia del usuario, lo que le ayuda a identificar cuellos de botella de rendimiento y optimizar su sitio para una mejor participación del usuario.
Esta guía proporciona un enfoque paso a paso para habilitar RUM en su proyecto Next.js implementado en sitios Edgio. Mientras que los ejemplos de código específicos se dirigen a next.js, los conceptos generales también se aplican a otros frameworks JS.
Antes de bucear en:
Esta guía asume que su sitio web next.js ya está implementado en su organización Edgio. Si desea un repaso sobre eso, puede dirigirse a nuestra documentación sobre cómo implementar next.js en Edgio Sites. Además, la estructura de la carpeta del proyecto y el código RUM pueden variar ligeramente dependiendo del marco JS que estés usando.
Pasos para habilitar EL RON:
- Localice su token de RON único: Después de haber iniciado sesión en Edgio Console, vaya a >>Monitoreo de usuario real del entorno específico de la propiedad dentro del panel de control de Edgio. Encontrarás un token único generado para tu propiedad.
- Instale el paquete RUM: Abra su terminal y navegue hasta el directorio de su proyecto. Instale el paquete @edgio/rum usando npm o yarn:
npm instalar @edgio/rum
o
añada @edgio/ron - Verifique la instalación: Verifique que el paquete @edgio/rum esté listado en sus dependencias package.json y exista dentro del directorio node_modules.
- Crear el archivo de configuración RUM: Crea un nuevo archivo llamado rum.ts dentro de la carpeta src/app de tu proyecto.
- Implementar la colección de métricas de RUM: Agregue el siguiente código al archivo RUM.ts:
JavaScript
'use client';
import { useEffect } from 'react';
import { Metrics } from '@edgio/rum';
const RumMetrics = () => {
useEffect(() => {
console.log('Initializing RUM metrics...');
new Metrics({
token: 'REPLACE_WITH_YOUR_TOKEN', // Replace with your unique token from Edgio
}).collect();
console.log('RUM metrics initialized');
}, []);
return null;
};
export default RumMetrics;
Recuerde reemplazar ‘REPLACE_WITH_YOUR_TOKEN’ con su token real obtenido de Edgio.
- Importar métricas DE RUM en su diseño: Vaya al archivo src/app/layout.tsx (o su archivo de diseño principal) e importe el componente RumMetrics que creó en el paso 5:
JavaScript –
Importar RumMetrics desde ‘./rum’;
- Añadir RON al layout: Dentro de la función de exportación del componente layout (normalmente una función llamada layout o similar), agregue <RumMetrics /> para asegurarse de que la inicialización DEL RON ocurre cada vez que se carga el layout. Esto inyecta RON en cada carga de página o evento de navegación dentro de su aplicación next.js.
Aquí hay un ejemplo:
JavaScript
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
Verificación:
- Inicie su sitio web: Encienda su sitio web next.js y abra la consola del desarrollador del navegador.
- Busque registros de consola de RON: Si EL RON se ha inicializado correctamente, debería ver mensajes como «Inicializar métricas DE RON…» y «RUM metrics inicialized» dentro de la consola.
Has habilitado con éxito EL RON en tu sitio web de Edgio Sites next.js. A diferencia de la monitorización sintética, que simula las interacciones del usuario desde ubicaciones y dispositivos predefinidos, RUM captura datos de las interacciones reales del usuario a través de varios dispositivos, redes y ubicaciones geográficas.
Con estos datos puedes:
- Consulte Impacto en tiempo real: Puede observar cómo los cambios en su sitio afectan a Core Web Vitals y a la experiencia general del usuario en tiempo real, lo que permite una respuesta y ajustes más rápidos.
- Correlacionar Web Vitals con las rutas de aplicación: RUM le permite comprender el rendimiento de diferentes partes de su aplicación mediante la correlación de Core Web Vitals con las rutas de su aplicación.
- Analizar el rendimiento en todas las dimensiones: RUM le permite analizar el rendimiento en varias dimensiones, como el país, el tipo de dispositivo y el tipo de conexión, lo que le ayuda a identificar áreas específicas que pueden necesitar optimización.
- Identificar Impacto en el Ranking de Búsqueda: Dado que los Core Web Vitals son un factor de clasificación para los motores de búsqueda, RUM te ayuda a identificar qué páginas podrían estar afectando negativamente tu ranking de búsqueda, lo que te permite priorizar las optimizaciones donde más se necesitan.
¡Así que sigue adelante y habilita EL RON en tu proyecto de Edgio Sites hoy mismo para empezar a obtener valiosos conocimientos de usuario! Para obtener más información sobre EL RON, consulte la documentación de Edgio RUM – Real User Monitoring (RUM)
