RHUM les Halls de votre site Edgio (avec données!)
Voulez-vous obtenir des informations plus approfondies sur la façon dont les utilisateurs interagissent avec votre site Next.js construit sur les sites Edgio (Frontend Cloud Platform)? Activer Real User Monitoring (RUM) vous permet de collecter des données précieuses sur l’expérience utilisateur, vous aidant à identifier les goulots d’étranglement de performances et à optimiser votre site pour un meilleur engagement des utilisateurs.
Ce guide fournit une approche étape par étape pour activer RUM sur votre projet Next.js déployé sur des sites Edgio. Alors que les exemples de code spécifiques ciblent Next.js, les concepts généraux s’appliquent également à d’autres frameworks JS.
Avant de plonger dans:
Ce guide suppose que votre site Web Next.js est déjà déployé dans votre organisation Edgio. Si vous souhaitez un rappel à ce sujet, vous pouvez consulter notre documentation sur la façon de déployer Next.js sur les sites Edgio . De plus, la structure du dossier du projet et le code RUM peuvent varier légèrement en fonction du framework JS que vous utilisez.
Étapes pour activer RUM :
- Localisez votre jeton RUM unique : une fois connecté à Edgio Console, accédez à Property > Specific Environment > Real User Monitoring dans le tableau de bord Edgio. Vous trouverez un jeton unique généré pour votre propriété.
- Installez le package RUM : ouvrez votre terminal et accédez au répertoire de votre projet. Installez le paquet @edgio/RUM en utilisant npm ou du fil :
npm install @edgio/rum
ou
fil ajouter @edgio/rhum - Vérifiez l’installation : Vérifiez que le paquet @edgio/RUM est listé dans vos dépendances package.JSON et existe dans le répertoire node_modules.
- Créer le fichier de configuration RUM : créez un nouveau fichier nommé RUM.TS dans le dossier src/app de votre projet.
- Implémenter la collecte de mesures RUM : ajoutez le code suivant au fichier 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;
N’oubliez pas de remplacer ‘REPLACE_WITH_YOUR_token’ par votre jeton obtenu d’Edgio.
- Importer les métriques RUM dans votre mise en page : accédez au fichier src/app/layout.tsx (ou votre fichier de mise en page principal) et importez le composant RumMetrics que vous avez créé à l’étape 5 :
JavaScript –
Importer RumMetrics depuis ‘./RUM’;
- Ajouter RUM à la mise en page : dans la fonction d’exportation du composant de mise en page (généralement une fonction nommée mise en page ou similaire), ajoutez <RumMetrics /> pour vous assurer que l’initialisation RUM se produit à chaque chargement de la mise en page. Cela injecte DU RHUM dans chaque chargement de page ou événement de navigation dans votre application Next.js.
Voici un exemple :
JavaScript
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
Vérification :
- Lancez votre site Web : lancez votre site Web Next.js et ouvrez la console du développeur du navigateur.
- Recherchez les journaux de la console RUM : si RUM a été initialisé avec succès, vous devriez voir des messages tels que « initialisation des mesures RUM… » et « mesures RUM initialisées » dans la console.
Voilà ! vous avez activé LE RHUM avec succès sur votre site Edgio sites Next.js. Contrairement à la surveillance synthétique, qui simule les interactions des utilisateurs à partir d’emplacements et d’appareils prédéfinis, RUM capture les données à partir des interactions réelles des utilisateurs sur divers appareils, réseaux et emplacements géographiques.
Avec ces données, vous pouvez :
- Voir l’impact en temps réel : vous pouvez observer comment les modifications apportées à votre site affectent Core Web Vitals et l’expérience utilisateur globale en temps réel, ce qui permet une réponse et des ajustements plus rapides.
- Corréler les données vitales du Web aux routes de l’application : RUM vous permet de comprendre les performances des différentes parties de votre application en corrélant les données vitales du Web avec les routes de votre application.
- Analyser les performances selon les dimensions : RUM vous permet d’analyser les performances selon différentes dimensions, telles que le pays, le type d’appareil et le type de connexion, ce qui vous aide à identifier les domaines spécifiques qui peuvent nécessiter une optimisation.
- Identifier l’impact sur le classement de recherche : puisque Core Web Vitals est un facteur de classement pour les moteurs de recherche, RUM vous aide à identifier quelles pages pourraient affecter négativement votre classement de recherche, vous permettant de prioriser les optimisations là où elles sont le plus nécessaires.
Alors allez-y et activez RUM sur votre projet Edgio sites dès aujourd’hui pour commencer à obtenir des informations précieuses sur les utilisateurs! Pour plus d’informations sur le RUM, reportez-vous à la documentation Edgio RUM – Real User Monitoring (RUM)
