RUM le sale del tuo sito Edgio (con dati!)
Desiderate ottenere informazioni più approfondite su come gli utenti interagiscono con il vostro sito Web Next.js basato su Edgio Sites (Frontend Cloud Platform)? L’attivazione del monitoraggio degli utenti reali (RUM, Real User Monitoring) consente di raccogliere dati preziosi sull’esperienza utente, aiutandovi a identificare i colli di bottiglia delle performance e a ottimizzare il vostro sito per migliorare il coinvolgimento degli utenti.
Questa guida fornisce un approccio passo-passo per abilitare RUM nel progetto Next.js distribuito nei siti Edgio. Mentre gli esempi di codice specifici sono destinati a Next.js, i concetti generali si applicano anche ad altri framework JS.
Prima di immergerti:
In questa guida si presuppone che il sito Web Next.js sia già stato distribuito nell’organizzazione Edgio. Se si desidera un aggiornamento su questo argomento, è possibile consultare la nostra documentazione su come distribuire Next.js su Edgio Sites. Inoltre, la struttura delle cartelle del progetto e il codice RUM potrebbero variare leggermente a seconda del framework JS utilizzato.
Passaggi per attivare RUM:
- Individuare il token RUM univoco: Dopo aver effettuato l’accesso a Edgio Console, accedere a Property > Specific Environment > Real User Monitoring nel dashboard Edgio. Troverai un token univoco generato per la tua proprietà.
- Installare il pacchetto RUM: Aprire il terminale e accedere alla directory del progetto. Installare il pacchetto @edgio/rum utilizzando npm o filato:
installazione npm @edgio/rum
oppure
filato aggiungere @edgio/rum - Ricontrollare l’installazione: Verificare che il pacchetto @edgio/rum sia elencato nelle dipendenze package.json ed esista nella directory node_modules.
- Creare il file di configurazione RUM: Creare un nuovo file denominato rum.ts all’interno della cartella src/app del progetto.
- Implementare la raccolta di metriche RUM: Aggiungere il seguente codice al file 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;
Ricordati di sostituire ‘REPLACE_WITH_YOUR_TOKEN’ con il tuo token effettivo ottenuto da Edgio.
- Importare le metriche RUM nel layout: Accedere al file src/app/layout.tsx (o al file di layout principale) e importare il componente RumMetrics creato al punto 5:
JavaScript –
Importa RumMetrics da ‘./rum’;
- Aggiungere RUM al layout: All’interno della funzione di esportazione del componente di layout (in genere una funzione denominata layout o simile), aggiungere <RumMetrics /> per garantire che l’inizializzazione RUM avvenga ogni volta che il layout viene caricato. In questo modo viene iniettato RUM in ogni caricamento di pagina o evento di navigazione all’interno dell’applicazione Next.js.
Ecco un esempio:
JavaScript
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
Verifica:
- Avviare il sito Web: Aprire il sito Web Next.js e aprire la console di sviluppo del browser.
- Cercare i registri della console RUM: Se RUM è stato inizializzato correttamente, dovrebbero essere visualizzati messaggi come “Inizializzazione metriche RUM…” e “metriche RUM inizializzate” all’interno della console.
Voilà! RUM è stato abilitato correttamente sul sito Web Edgio Sites Next.js. A differenza del monitoraggio sintetico, che simula le interazioni degli utenti da posizioni e dispositivi predefiniti, RUM acquisisce i dati dalle interazioni effettive degli utenti su vari dispositivi, reti e posizioni geografiche.
Con questi dati è possibile:
- Scoprite l’impatto in tempo reale: Potete osservare in che modo le modifiche apportate al vostro sito influiscono sui principali parametri vitali Web e sull’esperienza utente complessiva in tempo reale, consentendo risposte e regolazioni più rapide.
- Correlare i segni vitali del Web ai percorsi delle applicazioni: RUM consente di comprendere le prestazioni delle diverse parti dell’applicazione correlando i principali segni vitali del Web ai percorsi dell’applicazione.
- Analizza le prestazioni in base alle dimensioni: RUM consente di analizzare le prestazioni in varie dimensioni, ad esempio paese, tipo di dispositivo e tipo di connessione, aiutandovi a identificare aree specifiche che potrebbero necessitare di ottimizzazione.
- Identificare l’impatto sulla classifica delle ricerche: Poiché i principali parametri vitali del Web sono un fattore di classificazione per i motori di ricerca, RUM aiuta a identificare quali pagine potrebbero influire negativamente sulla classifica delle ricerche, consentendoti di assegnare priorità alle ottimizzazioni dove sono più necessarie.
Quindi, procedete oggi stesso e attivate RUM sul vostro progetto Edgio Sites per iniziare a ottenere preziose informazioni sugli utenti! Per ulteriori informazioni SUL RUM, fare riferimento alla documentazione RUM Edgio – RUM (Real User Monitoring)
