朗姆酒您的Edgio网站的大厅(与数据!)
您是否希望更深入地了解用户如何与基于Edgio Sites (Frontend Cloud Platform )构建的Next.js网站进行交互? 启用真实用户监控(RUM)可让您收集有关用户体验的宝贵数据，帮助您识别性能瓶颈并优化网站以提高用户参与度。
本指南提供了在Edgio网站上部署的Next.js项目上启用RUM的分步方法。 虽然特定代码示例以Next.js为目标,但一般概念也适用于其他JS框架。
在您潜水之前：
本指南假定您的Next.js网站已部署到您的Edgio。 如果您想复习一下,您可以查看我们的文档,了解如何在Edgio Sites上部署Next.js。 此外,项目文件夹结构和RUM代码可能会根据您使用的JS框架略有不同。
启用RUM的步骤：
- 找到您唯一的RUM令牌:登录Edgio控制台后,导航到>>Edgio仪表板中的属性特定环境真实用户监控。 您将找到为您的财产生成的唯一代币。
- 安装RUM软件包:打开终端并导航到项目目录。 使用NPM或YARN安装n ü@edgio/RUM软件包：
NPM install @edgio/rum
或
纱线添加@edgio/rum - 仔细检查安装：验证@edgio/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;
记住用从Edgio获得的实际令牌替换”replace_with_your_token”。
- 将RUM指标导入您的布局:导航到src/app/layout.tsx文件(或主布局文件),然后导入您在步骤5中创建的RumMetrics组件:
JavaScript –
从”./rum”导入RumMetrics；
- 将RUM添加到布局:在布局组件的导出功能(通常是名为layout或类似的功能)中,添加<RumMetrics />以确保每当加载布局时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 metric已初始化”等消息。
您已在您的Egio Sites Next.js网站上成功启用RUM。 与从预定义位置和设备模拟用户交互的综合监控不同，RUM从不同设备，网络和地理位置的实际用户交互中捕获数据。
借助此数据，您可以：
- 查看实时影响:您可以实时观察对网站的更改如何影响核心Web重要信息和整体用户体验,从而实现更快的响应和调整。
- 将Web生命周期与应用程序路由关联：RUM通过将核心Web生命周期与应用程序的路由关联，使您能够了解应用程序不同部分的性能。
- 跨维度分析性能：RUM允许您跨各个维度(如国家/地区，设备类型和连接类型)分析性能，帮助您识别可能需要优化的特定区域。
- 识别对搜索排名的影响:由于核心Web重要信息是搜索引擎的排名因素,RUM可帮助您识别哪些页面可能对搜索排名产生负面影响,从而允许您在最需要的地方优先优化。
现在就在您的Edgio Sites项目上启用RUM，开始获得宝贵的用户见解！ 有关RUM的更多信息，请参阅Edgio RUM文档–Real User Monitoring (RUM)
