Top Trends in Cybersecurity for 2024 | 
RUM The Halls of Your Edgio Site (データ付き)
Edgio Sites(Frontend Cloud Platform)上に構築されたNext.jsウェブサイトのユーザーの操作方法について、より深い洞察を得たいか? Real User Monitoring（RUM）を有効にすると、ユーザーエクスペリエンスに関する貴重なデータを収集し、パフォーマンスのボトルネックを特定し、サイトを最適化してユーザーエンゲージメントを向上させることができる。
このガイドでは、EdgioサイトにデプロイされたNext.jsプロジェクトでRUMを有効にするためのステップバイステップのアプローチを提供する。 特定のコード例はNext.jsを対象としているが、一般的な概念は他のJSフレームワークにも適用できる。
潜る前に：
このガイドでは、Next.jsウェブサイトがEdgio組織に既にデプロイされていることを前提としている。 もしそれについて復習したいなら、Edgio SitesにNext.jsをデプロイする方法に関するドキュメントにアクセスすることができる。 さらに、プロジェクトフォルダ構造とRUMコードは、使用しているJSフレームワークによってわずかに異なる場合がある。
RUMを有効にする手順：
- 一意のRUMトークンを見つける: Edgio Consoleにログインしたら、>>Edgioダッシュボード内でプロパティ固有の環境Real User Monitoringに移動する。 あなたの特性のために生成された一意のトークンを見つける。
- RUMパッケージをインストールする:ターミナルを開き、プロジェクトディレクトリに移動する。 npmまたはyarnを使用して@edgio/rumパッケージをインストールする
npm install@edgio/rum
または
yarn add @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;
‘replace_with_your_token’を、Edgioから取得した実際のトークンに置き換えることを忘れないように。
- RUMメトリクスをレイアウトにインポートする: src/app/layout.tsxファイル(またはメインレイアウトファイル)に移動し、ステップ5で作成したRumMetricsコンポーネントをインポートする。
JavaScript –
‘./rum’からRumMetricsをインポート；
- レイアウトにRUMを追加する:レイアウトコンポーネントのエクスポート機能(通常はlayoutなどの名前の関数)内で、<RumMetrics/を追加して、>レイアウトがロードされるたびにRUMの初期化が行われるようにする。 これは、Next.jsアプリケーション内のすべてのページロードまたはナビゲーションイベントにRUMを注入する。
例を挙げると、
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”のようなメッセージが表示される。
Edgio Sites Next.js WebサイトでRUMを有効にした。 事前定義された場所やデバイスからのユーザーインタラクションをシミュレートする合成モニタリングとは異なり、RUMはさまざまなデバイス、ネットワーク、地理的な場所にわたる実際のユーザーインタラクションからデータをキャプチャする。
このデータを使用すると、次のことが可能になる。
- リアルタイムの影響を見る:サイトへの変更がCore Web Vitalsと全体的なユーザーエクスペリエンスにどのように影響するかをリアルタイムで観察できるため、応答と調整を迅速に行うことができる。
- Web Vitalsをアプリケーションルートに関連付ける: RUMでは、Core Web Vitalsをアプリケーションのルートに関連付けることで、アプリケーションのさまざまな部分のパフォーマンスを理解できる。
- ディメンション全体のパフォーマンスの分析: RUMでは、国、デバイスタイプ、接続タイプなどのさまざまなディメンションにわたってパフォーマンスを分析し、最適化が必要な特定の領域を特定するのに役立つ。
- 検索ランキングへの影響を特定する: Core Web Vitalsは検索エンジンのランキング要素であるため、RUMは検索ランキングに悪影響を与える可能性のあるページを特定するのに役立ち、最も必要とされる最適化に優先順位を付けることができる。
今すぐEdgio SitesプロジェクトでRUMを有効にして、貴重なユーザーインサイトを獲得しよう! RUMの詳細については、Edgio RUMのドキュメント「Real User Monitoring（RUM）」を参照
