Rum the Halls of Your Edgio Site (有數據！)
您是否希望深入了解用戶如何與基於Edgio Sites (前端雲平臺)構建的Next.js網站交互？ 啟用真實用戶監控(RUM)可讓您收集有關用戶體驗的寶貴數據，幫助您識別性能瓶頸並優化您的網站以提高用戶參與度。
本指南提供了在Edgio站點上部署的Next.js項目上啓用RUM的分步方法。 雖然特定代碼示例針對Next.js，但一般概念也適用於其他JS框架。
潛水前：
本指南假定您的Next.js網站已部署到您的Edgio組織。 如果您想了解一下這方面的內容，可以參閱我們有關如何在Edgio站點上部署Next.js的文檔。 此外，項目文件夾結構和RUM代碼可能會因您使用的JS框架而稍有不同。
啟用RUM的步驟：
- 找到您唯一的RUM令牌：登入Edgio控制臺後，導航至>>Edgio儀表板中的屬性特定環境真實用戶監控。 您會發現為您的財產生成的唯一令牌。
- 安裝RUM包：打開終端並導航到項目目錄。 @NPM或紗線安裝Degio/RUM包：
npm @edgio/rum
或
紗線加上@edgio/rum - @安裝：驗證“dgio/rum”軟體包是否列在package.json相關性中，並且是否存在於node_modules目錄中。
- 創建RUM配置文件：在項目的src/app文件夾中創建一個名為rum.ts的新文件。
- 實施RUM度量收集：將以下代碼添加到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;
請記得將’replace_with_your_token’替換為從Edgio獲得的實際令牌。
- 將RUM指標導入布局：導航至src/app/layout.tsx文件(或主布局文件)，然後導入您在步驟5中創建的RUMetrics組件：
JavaScript –
從’./RUM’導入RumMetrics；
- 將RUM添加到布局：在布局組件的導出函數(通常是名為布局或類似函數)中，添加<RUMetrics />以確保在布局載入時進行RUM初始化。 這會將RUM注入Next.js應用程式中的每個頁面載入或導航事件。
下麵是一個示例：
JavaScript
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
驗證：
- 啟動您的網站：啟動Next.js網站並打開瀏攬器開發人員控制臺。
- 查找RUM控制臺日誌：如果RUM已成功初始化，則應在控制臺中看到”Initializing RUM metrics…”和”RUM metricsinitialized”等消息。
voila!您已在Edgio Sites Next.js網站上成功啟用RUM。 與類比來自預定義位置和設備的用戶交互的呲合監控不同，RUM從不同設備，網路和地理位置的實際用戶交互中捕獲數據。
利用這些數據，您可以：
- 查看實時影響：您可以實時觀察站點更改如何影響Core Web Vitals和整體用戶體驗，從而加快響應和調整速度。
- 將Web Vitals與應用程式路由關聯：RUM使您能夠通過將核心Web Vitals與應用程式路由關聯來了解應用程式不同部分的性能。
- 跨維度分析性能：RUM允許您跨國家/地區，設備類型和連接類型等不同維度分析性能，幫助您確定需要優化的特定領域。
- 識別對搜尋排名的影響：由於核心Web Vitals是搜尋引擎的排名因素，RUM可幫助您識別哪些頁面可能會對搜尋排名產生負面影響，從而使您可以在最需要優化的地方優先進行優化。
現在就開始在您的Edgio Sites項目上啟用RUM，開始獲得寶貴的用戶見解！ 有關RUM的更多資訊，請參閱Edgio RUM文檔–Real User Monitoring (RUM)
