RUM SDK の統合による Web & HTML5 アプリパフォーマンス追跡 - Application Real-Time Monitoring Service (ARMS)

Web または HTML5 アプリケーションにリアルユーザーモニタリング (RUM) を設定して、ユーザーセッション、ページビュー (PV)、ユーザービュー (UV)、およびページの読み込み時間を追跡します。設定後、RUM SDK は Application Real-Time Monitoring Service (ARMS) コンソールにデータをレポートし、そこでパフォーマンスを監視し、ユーザー ID ごとに問題を診断できます。

重要

RUM は、2024年6月24日 00:00:00 (UTC+8) より商用利用が可能になりました。料金の詳細については、「課金」をご参照ください。テクニカルサポートについては、DingTalk グループ (ID: 67370002064) にご参加ください。

ワークフロー

RUM アプリケーションの作成  -->  SDK のインストール  -->  設定の確認  -->  モニタリングデータの表示  -->  アラート機能の設定

RUM アプリケーションの作成：ARMS コンソールで Web または HTML5 アプリケーションを登録し、SDK の初期化コードを取得します。
SDK のインストール：生成された JavaScript スニペットを HTML ページに追加します。
設定の確認：ブラウザでサイトを開き、コンソールにデータが表示されることを確認します。
モニタリングデータの表示：モニタリングダッシュボードでセッション数、ページの読み込みパフォーマンス、その他のメトリックを確認します。
アラート機能の設定：パフォーマンス低下に対するアラートルールと通知ポリシーを設定します。

前提条件

開始する前に、以下が準備できていることを確認してください：

ARMS が有効化された Alibaba Cloud アカウント
実行中の Web または HTML5 アプリケーション (このガイドでは、パブリック IP アドレスを持つ Elastic Compute Service (ECS) インスタンスでホストされているサンプル Web サイトを使用します。ログイン方法については、「パスワードまたはキーを使用して Linux インスタンスに接続する」をご参照ください)

説明

各 Alibaba Cloud アカウントには、毎月 100 可観測性容量単位 (OCU) の無料クォータが付与されます。RUM の料金は、セッション数とカスタムレポートの送信数に基づいており、各 OCU は両方の一定数をカバーします。詳細については、「課金概要」をご参照ください。

ステップ 1: RUM アプリケーションの作成

ARMS コンソールにログインします。左側のナビゲーションウィンドウで、[リアルユーザーモニタリング] > [アプリケーションリスト] を選択します。[アプリケーションの追加] をクリックします。
表示されたパネルで、アプリケーションタイプとして [Web & H5] を選択し、アプリケーション名を入力し、デフォルト設定のまま [作成] をクリックします。

生成された JavaScript コードをコピーします。このコードは次のステップで HTML ページに追加します。以下のプレースホルダーを、生成されたコードの値に置き換えてください：

プレースホルダー	説明	例
`<your-app-pid>`	Web または HTML5 アプリケーションの一意の ID。	`jjd**@37**`
`<your-rum-endpoint>`	モニタリングデータをレポートするためのエンドポイント。	`https://jjd****-default-cn.rum.aliyuncs.com`
`<your-sdk-url>`	SDK をホストするコンテンツデリバリーネットワーク (CDN) の URL。	`https://jjd****-sdk.rum.aliyuncs.com`

   <script>
   window.__rum = {
     "pid": "<your-app-pid>",           // RUM によって割り当てられたアプリケーション ID
     "endpoint": "<your-rum-endpoint>"  // データレポートのエンドポイント
   };
   </script>
   <script type="text/javascript" src="<your-sdk-url>/v2/browser-sdk.js" crossorigin></script>

ステップ 2: SDK のインストール

JavaScript スニペットを HTML ページに追加します。プロジェクトの構造に応じて、次のいずれかの方法を選択してください：

単一の HTML ファイル：スニペットを <body> タグ内に貼り付けます。
共有レイアウトを持つ複数の HTML ファイル：スニペットをレイアウトファイルに追加して、すべてのページで読み込まれるようにします。

次の例では、共有レイアウトファイルを持つサンプル Web サイトプログラム shopping.zip を使用します。

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Site</title>
    <!-- RUM SDK: ステップ 1 のスニペットをここに貼り付けます -->
    <script>
        window.__rum = {
            "pid": "<your-app-pid>",          // ご利用のアプリケーション ID に置き換えてください
            "endpoint": "<your-rum-endpoint>" // ご利用のデータレポートのエンドポイントに置き換えてください
        };
    </script>
    <script type="text/javascript" src="<your-sdk-url>/v2/browser-sdk.js" crossorigin></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

スニペットを追加した後、アプリケーションを起動します：

python app.py

説明

このガイドでは、同期的な CDN 読み込みを使用します。CDN ベースの非同期読み込みと npm パッケージもサポートされています。これらのメソッドの手順とシナリオについては、「Web アプリケーションまたは HTML5 アプリケーションの統合」をご参照ください。

ステップ 3: 設定の確認

ブラウザで http://<ECS-public-IP>:5000 を開き、いくつかのページを閲覧してセッションデータを生成します。
ARMS コンソールにログインし、[リアルユーザーモニタリング] > [アプリケーションリスト] に移動し、アプリケーションが表示され、データが受信されていることを確認します。

数分経ってもアプリケーションが表示されない場合は、以下を確認してください：

JavaScript スニペットが HTML 内に正しく配置され、他のスクリプトより先に読み込まれていること。
pid と endpoint の値が、ステップ 1 で生成されたコードと一致していること。
ブラウザの開発者コンソールに、SDK スクリプト URL に関するネットワークエラーが表示されていないこと。

ステップ 4: モニタリングデータの表示

[アプリケーションリスト] ページでアプリケーション名をクリックして、モニタリングダッシュボードを開きます。ダッシュボードには、セッション数やページの読み込みパフォーマンスなどの主要なメトリックが表示されます。

すべてのダッシュボードメトリックの詳細な説明については、「Web および HTML5 ページのモニタリング詳細」をご参照ください。

ステップ 5: アラート機能の設定

アラートルールの作成

アラートルールを作成します：アプリケーションを選択し、アラート条件を設定し、[通知ポリシー] を [通知ポリシーを指定しない] に設定します。
次のステップのために、アラートルール ID をコピーします。

通知ポリシーの作成

通知ポリシーを作成します：一致条件に、前のステップで取得したアラートルール ID を入力します。次に、イベントグループと通知方法を設定します。

アラート履歴の表示

過去のアラートイベントを確認するには、「過去のアラートイベントの表示」をご参照ください。

次のステップ

他の SDK インストール方法を試す：CDN ベースの非同期読み込みと npm パッケージが利用可能です。詳細については、「Web アプリケーションまたは HTML5 アプリケーションの統合」をご参照ください。
SDK 構成のカスタマイズ：アプリケーション ID、データレポート用のアドレス、アプリケーション環境などのオプションを設定します。設定項目の完全なリストについては、「Web および HTML5 用 RUM SDK のサンプル構成」をご参照ください。