RUM The Halls of Your Edgio Site (mit Daten!)
Möchten Sie tiefere Einblicke in die Interaktion von Benutzern mit Ihrer Next.js-Website erhalten, die auf den Edgio Sites (Frontend Cloud Platform) basiert? Durch die Aktivierung von Real User Monitoring (RUM) können Sie wertvolle Daten zur Benutzererfahrung sammeln, um Leistungsengpässe zu erkennen und Ihre Website für eine bessere Benutzerinteraktion zu optimieren.
Dieses Handbuch bietet eine Schritt-für-Schritt-Anleitung zur Aktivierung von RUM auf Ihrem Next.js-Projekt, das auf Edgio-Sites bereitgestellt wird. Während die spezifischen Codebeispiele auf Next.js abzielen, gelten die allgemeinen Konzepte auch für andere JS-Frameworks.
Vor dem Eintauchen:
In diesem Handbuch wird davon ausgegangen, dass Ihre Next.js-Website bereits in Ihrer Edgio-Organisation bereitgestellt ist. Wenn Sie eine Auffrischung dazu wünschen, können Sie in unserer Dokumentation zur Bereitstellung von Next.js auf Edgio Sites nachschlagen. Außerdem können die Struktur des Projektordners und der RUM-Code je nach verwendetem JS-Framework leicht variieren.
Schritte zum Aktivieren VON RUM:
- Suchen Sie Ihr eindeutiges RUM-Token: Nachdem Sie sich bei Edgio Console angemeldet haben, navigieren Sie >>im Edgio Dashboard zu Property Specific Environment Real User Monitoring. Sie finden ein eindeutiges Token, das für Ihre Immobilie generiert wurde.
- Installieren Sie das RUM-Paket: Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem Projektverzeichnis. Installieren Sie das @edgio/rum-Paket mit npm oder YARN:
npm @edgio/rum installieren
Oder
Garn @edgio/rum hinzufügen - Überprüfen Sie die Installation doppelt: Stellen Sie sicher, dass das @edgio/rum-Package in den Package.JSON-Abhängigkeiten aufgeführt ist und im Verzeichnis node_modules vorhanden ist.
- Erstellen Sie die RUM-Konfigurationsdatei: Erstellen Sie eine neue Datei namens rum.TS im Ordner src/App Ihres Projekts.
- Implementieren Sie die Sammlung RUM-Metriken: Fügen Sie der Datei rum.TS den folgenden Code hinzu:
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;
Denken Sie daran, „REPLACE_WITH_YOUR_TOKEN“ durch Ihr tatsächliches Token zu ersetzen, das Sie von Edgio erhalten haben.
- Importieren von RUM-Metriken in Ihr Layout: Navigieren Sie zur Datei src/App/Layout.tsx (oder Ihrer Hauptlayout-Datei), und importieren Sie die in Schritt 5 erstellte RumMetrics-Komponente:
JavaScript –
RumMetrics aus ‚./rum‘ importieren;
- Hinzufügen von RUM zum Layout: Fügen Sie innerhalb der Exportfunktion der Layoutkomponente (in der Regel eine Funktion namens Layout oder Ähnliches) <RumMetrics / hinzu>, um sicherzustellen, dass die RUM-Initialisierung beim Laden des Layouts erfolgt. Dadurch wird RUM in jedes Seitenlade- oder Navigationsereignis in Ihrer Next.js-Anwendung eingefügt.
Hier ein Beispiel:
JavaScript
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
Überprüfung:
- Starten Sie Ihre Website: Starten Sie Ihre Next.js-Website, und öffnen Sie die Entwicklerkonsole des Browsers.
- Suchen Sie nach RUM-Konsolenprotokollen: Wenn RUM erfolgreich initialisiert wurde, sollten in der Konsole Meldungen wie „RUM-Metriken werden initialisiert…“ und „RUM-Metriken initialisiert“ angezeigt werden.
Voila! Sie haben RUM erfolgreich auf Ihrer Edgio Sites Next.js Website aktiviert. Im Gegensatz zur synthetischen Überwachung, bei der Benutzerinteraktionen von vordefinierten Standorten und Geräten simuliert werden, erfasst RUM Daten von tatsächlichen Benutzerinteraktionen über verschiedene Geräte, Netzwerke und geografische Standorte hinweg.
Mit diesen Daten können Sie:
- Sehen Sie die Auswirkungen in Echtzeit: Sie können in Echtzeit beobachten, wie Änderungen an Ihrer Website die wichtigsten Web Vitals und die allgemeine Benutzererfahrung beeinflussen. Dies ermöglicht schnellere Reaktionen und Anpassungen.
- Web Vitals mit Anwendungsrouten korrelieren: MIT RUM können Sie die Leistung verschiedener Teile Ihrer Anwendung verstehen, indem Sie Core Web Vitals mit den Routen Ihrer Anwendung korrelieren.
- Analyse der Leistung in verschiedenen Dimensionen: MIT RUM können Sie die Leistung in verschiedenen Dimensionen wie Land, Gerätetyp und Verbindungstyp analysieren. So können Sie bestimmte Bereiche identifizieren, die möglicherweise optimiert werden müssen.
- Auswirkungen auf das Suchranking identifizieren: Da Core Web Vitals ein Ranking-Faktor für Suchmaschinen sind, hilft Ihnen RUM, zu identifizieren, welche Seiten sich negativ auf Ihre Suchrangliste auswirken könnten. So können Sie Optimierungen dort priorisieren, wo sie am dringendsten benötigt werden.
Nutzen Sie also noch heute RUM für Ihr Edgio Sites-Projekt, um wertvolle Einblicke in die Benutzer zu gewinnen! Weitere Informationen zu RUM finden Sie in der Edgio RUM-Dokumentation – Real User Monitoring (RUM)
