WebおよびHTML5用RUM SDKでWebサイトのユーザーデータを監視する - Application Real-Time Monitoring Service

ユーザーセッション、ページビュー（PV）、ユーザービュー（UV）、ページ読み込み時間を監視したり、ユーザーIDに基づいて問題を特定したりすることで、WebアプリケーションまたはHTML5アプリケーションのユーザーエクスペリエンスを向上させたい場合は、アプリケーションにWebおよびHTML5用Real User Monitoring（RUM）SDKを設定できます。

重要

RUMは、2024年6月24日午前0時0分0秒（UTC +8）から商用利用が可能です。詳細については、請求をご参照ください。テクニカルサポートを受けるには、DingTalkグループチャット（ID：67370002064）にご参加ください。

ワークフロー

RUMアプリケーションを作成する：WebアプリケーションまたはHTML5アプリケーションを監視するためのRUMアプリケーションを作成します。次に、Alibaba Cloud Content Delivery Network（CDN）を介してSDKを導入するJavaScriptコードをコピーして保存します。
SDKを導入する：単一のHTMLファイルの場合は、JavaScriptコードを<body>に挿入します。複数のHTMLファイルの場合は、レイアウトファイルを使用してJavaScriptコードを導入し、すべてのページで参照します。
監視データを表示する：SDKは自動的にデータを報告します。アプリケーションの詳細ページでWebサイトのユーザーデータを表示します。
アラートを設定する：アラートルールと通知ポリシーを設定し、アラート履歴を表示します。

準備

このトピックでは、シンプルなWebサイトプログラムを例に、パブリックIPアドレスにバインドされたElastic Compute Service（ECS）インスタンスをWebサイトサーバーとして使用します。ECSインスタンスへのログイン方法については、Workbenchを使用してSSH経由でLinuxインスタンスに接続するをご参照ください。

RUMは、セッション数とカスタムレポートの送信数に基づいて料金を請求し、1つの可観測性キャパシティユニット（OCU）は、一定数のセッションとカスタムレポートの送信に対応します。各Alibaba Cloudアカウントには、毎月100 OCUの無料枠があります。詳細については、請求の概要をご参照ください。

1. RUMアプリケーションを作成する

Application Real-Time Monitoring Service (ARMS) コンソールにログインします。左側のナビゲーションペインで、リアルユーザー監視 >アプリケーション一覧を選択します。表示されるページで、アプリケーションを追加をクリックします。

表示されるペインで、アプリケーションの種類としてWebおよびH5を選択し、アプリケーション名を入力し、その他の設定はデフォルトのままにして、作成をクリックします。生成されたJavaScriptコードをコピーします。

<script>
window.__rum = {
  "pid": "jjd****@37****",
  "endpoint": "https://jjd****-default-cn.rum.aliyuncs.com"
};
</script>
<script type="text/javascript" src="https://jjd****-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

パラメーター	説明
`pid`	WebアプリケーションまたはHTML5アプリケーションのID。
`endpoint`	WebアプリケーションまたはHTML5アプリケーションのデータ報告先アドレス。
`<script type="text/javascript" src="...">`	CDNを使用してSDKを読み込みます。

2. SDKを導入する

単一のHTMLファイルの場合は、<body>にJavaScriptコードを挿入できます。複数のHTMLファイルの場合は、レイアウトファイルを使用してJavaScriptコードを導入し、すべてのページで参照できます。このセクションでは、サンプルWebサイトプログラムshopping.zipをレイアウトファイルで導入します。layout.htmlファイルで、<script>タグでマークされたセクションの内容を、前の手順で保存したJavaScriptコードに置き換えます。
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>
    <script>
        window.__rum = {
            "pid": "jj*****",  // PIDを指定します。
            "endpoint": "https://jj****-default-cn.rum.aliyuncs.com"
        };
    </script>
    <script type="text/javascript" src="https://jj******-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
```
SDKを導入した後、サーバーのターミナルでpython app.pyと入力してWebサイトプログラムを実行します。

3. 監視データを表示する

ブラウザのアドレスバーに${ECSインスタンスのパブリックIPアドレス:5000}と入力してWebサイトにアクセスします。
ARMS コンソールにログインします。左側のナビゲーションペインで、リアルユーザー監視 >アプリケーション一覧を選択します。監視に使用したアプリケーションの名前をクリックします。詳細については、WebページとHTML5ページの監視の詳細をご参照ください。

4. アラートを設定する

アラートルールを作成する：アプリケーションを選択し、アラート条件を設定し、通知ポリシーパラメーターを通知ポリシーを指定しないに設定します。次に、アラートルールのIDをコピーします。
通知ポリシーを作成する：アラートイベントの一致条件を設定します。条件として指定できるアラートルールIDは、前の手順で生成されたIDです。次に、プロンプトに従ってイベントグループと通知方法を設定します。
アラート履歴を表示する：アラート履歴の表示方法については、過去の警告イベントを表示するをご参照ください。

次のステップ

このトピックでは、SDKはCDNを介して同期的に読み込まれます。CDNベースの非同期読み込みとnpmパッケージもサポートされています。これらの方法の手順とシナリオについては、WebアプリケーションまたはHTML5アプリケーションを統合するをご参照ください。
WebおよびHTML5用RUM SDKは、アプリケーションID、データ報告先アドレス、アプリケーション環境などの設定項目をサポートしています。詳細については、WebおよびHTML5用RUM SDKの設定例をご参照ください。