RUM the Halls of Your Edgecast Site (With Data!)
.png)
Do you want to gain deeper insights into how users interact with your Next.js website built on the Edgecast Jamstack 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 Edgecast Jamstack Platform with Next.js. 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 Edgecast organization. Additionally, the project folder structure and RUM code might vary slightly depending on the JS framework you're using.
Steps to Enable RUM:
1. Locate your unique RUM token:
Navigate to Property > Specific Environment > Real User Monitoring within the Edgecast dashboard. You'll find a unique token generated for your property.
2. Install the RUM package:
Open your terminal and navigate to your project directory. Install the @Edgecast/rum package using npm or yarn:
npm install @Edgecast/rum
or
yarn add @Edgecast/rum
3. Verify that the @Edgecast/rum package is listed in your package.json dependencies and exists within the node_modules directory.
4. Create the RUM configuration file:
Create a new file named rum.ts inside the src/app folder of your project.
5. Implement RUM metrics collection:
Add the following code to the rum.ts file:
JavaScript
'use client';
import { useEffect } from 'react';
import { Metrics } from '@Edgecast/rum';
const RumMetrics = () => {
useEffect(() => {
console.log('Initializing RUM metrics...');
new Metrics({
token: 'REPLACE_WITH_YOUR_TOKEN', // Replace with your unique token from Edgecast
}).collect();
console.log('RUM metrics initialized');
}, []);
return null;
};
export default RumMetrics;
Remember to replace 'REPLACE_WITH_YOUR_TOKEN' with your actual token obtained from Edgecast.
6. 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';
7. 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 Edgecast Jamstack Platform 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.
