RUM the Halls of Your Edgio Site (With Data!)
Do you want to gain deeper insights into how users interact with your Next.js website built on the Edgio Sites (Frontend Cloud Platform)? Enabling Real User Monitoring (RUM) allows you to collect valuable data on user experience, helping you identify performance bottlenecks and optimize your site for better user engagement.
This guide provides a step-by-step approach to enabling RUM on your Next.js Project deployed on Edgio Sites. While the specific code examples target Next.js, the general concepts apply to other JS frameworks as well.
Before you dive in:
This guide assumes your Next.js website is already deployed to your Edgio organization. If you would like a refresher on that, you can head over to our documentation on how to deploy Next.js on Edgio Sites. Additionally, the project folder structure and RUM code might vary slightly depending on the JS framework you’re using.
Steps to Enable RUM:
- Locate your unique RUM token: After you’re logged into Edgio Console, navigate to Property > Specific Environment > Real User Monitoring within the Edgio dashboard. You’ll find a unique token generated for your property.
- Install the RUM package: Open your terminal and navigate to your project directory. Install the @edgio/rum package using npm or yarn:
npm install @edgio/rum
or
yarn add @edgio/rum - Double-check the installation: Verify that the @edgio/rum package is listed in your package.json dependencies and exists within the node_modules directory.
- Create the RUM configuration file: Create a new file named rum.ts inside the src/app folder of your project.
- Implement RUM metrics collection: Add the following code to the rum.ts file:
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;
Remember to replace ‘REPLACE_WITH_YOUR_TOKEN’ with your actual token obtained from Edgio.
- Import RUM metrics into your layout: Navigate to the src/app/layout.tsx file (or your main layout file) and import the RumMetrics component you created in step 5:
JavaScript –
import RumMetrics from ‘./rum’;
- Add RUM to the layout: Within the layout component’s export function (typically a function named layout or similar), add <RumMetrics /> to ensure RUM initialization happens whenever the layout loads. This injects RUM into every page load or navigation event within your Next.js application.
Here’s an example:
JavaScript
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
Verification:
- Launch your website: Fire up your Next.js website and open the browser developer console.
- Look for RUM console logs: If RUM has been successfully initialized, you should see messages like « Initializing RUM metrics… » and « RUM metrics initialized » within the console.
Voila! you’ve successfully enabled RUM on your Edgio Sites Next.js website. Unlike synthetic monitoring, which simulates user interactions from predefined locations and devices, RUM captures data from actual user interactions across various devices, networks, and geographic locations.
With this data you can:
- See Real-Time Impact: You can observe how changes to your site affect Core Web Vitals and overall user experience in real time, allowing for quicker response and adjustments.
- Correlate Web Vitals to Application Routes: RUM enables you to understand the performance of different parts of your application by correlating Core Web Vitals with your application’s routes.
- Analyze Performance Across Dimensions: RUM allows you to analyze performance across various dimensions such as country, device type, and connection type, helping you to identify specific areas that may need optimization.
- Identify Impact on Search Ranking: Since Core Web Vitals are a ranking factor for search engines, RUM helps you identify which pages could be affecting your search ranking negatively, allowing you to prioritize optimizations where they are needed most.
So go ahead and enable RUM on your Edgio Sites project today to start gaining valuable user insights! For more information on RUM, refer to the Edgio RUM documentation – Real User Monitoring (RUM)
