Web & H5 SDK を使用した Web サイトのユーザーデータモニタリング - Application Real-Time Monitoring Service

ARMS リアルユーザーモニタリング Web & H5 SDK を組み込み、ブラウザおよび H5 ページのセッション、ページビュー (PV)、ユニークビジター (UV)、ページロード時間、その他のメトリクスを追跡し、ユーザー ID によって問題を特定して、Web サイトのユーザーエクスペリエンスを向上させます。

重要

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

ソリューション概要

アプリケーションの作成：コンソールでアプリケーションを作成し、Web & H5 ページをモニタリングします。CDN 経由で Web & H5 SDK を読み込む JavaScript スニペットをコピーして保存します。
SDK の導入：単一の HTML ファイルの場合は、<head> セクションにスクリプトコードを挿入します。複数の HTML ファイルの場合は、レイアウトファイルにスクリプトを含め、そのレイアウトファイルをすべてのページで参照します。
モニタリングデータの確認：SDK が自動的にデータを送信します。アプリケーション詳細ページで Web サイトのユーザーメトリクスを確認します。
アラートの作成：アラートルールと通知ポリシーを設定し、アラート履歴を確認します。

データの準備

本トピックでは、パブリック IP アドレスを持つ Elastic Compute Service (ECS) インスタンスでホストされているサンプル Web サイトを使用します。ECS インスタンスへのログインについては、「ワークベンチを使用した Linux インスタンスへのログイン」をご参照ください。

リアルユーザーモニタリングは、セッション数とカスタムレポート数に基づいて課金されます。1 OCU は、特定の数のセッションとカスタムレポートに相当します。各ユーザーには、月あたり 100 OCU の無料クォータが提供されます。料金の詳細については、「課金概要」をご参照ください。

1. アプリケーションの作成

ARMS コンソールにログインし、ユーザー体験監視 » アプリケーションリスト の順に移動して、アプリケーションの追加 をクリックします。

[Create Application] パネルで、アプリケーションタイプとして [Web & H5] を選択します。

右側のパネルにアプリケーション名を入力して、作成をクリックします。他のパラメーターはデフォルト値のままにして、JavaScript スニペットをコピーします。

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

パラメータ	説明
`endpoint`	Web & H5 アプリケーションのデータをレポートするためのエンドポイント。
`<script type="text/javascript" src="...">`	CDN 経由で Web & H5 SDK を読み込むためのスクリプト。

2. SDK の導入

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

3. モニタリング詳細の確認

ブラウザで ${public IP address of the ECS instance}:5000 と入力して Web サイトにアクセスし、操作を行います。
ARMS コンソールで、ユーザー体験監視 > アプリケーションリスト に移動します。対象のアプリケーション名をクリックすると、その概要、セッショントレース、ページアクセス、リソース読み込みなどのメトリクスを表示できます。モニタリングページの詳細については、「Web & H5 モニタリングの詳細」をご参照ください。

4. アラートの作成

アラートルールを作成: ターゲットアプリケーションとアラート条件を設定し、通知ポリシー を 通知ポリシーを指定しない に設定します。作成後、アラートルール ID をコピーします:

左側のメニューで [alert rules] をクリックします。リストから新しく作成したアラートルールを見つけ、そのアラートルール ID をコピーします。
通知ポリシーの作成：アラートイベントのマッチングルールを設定します。前の手順でコピーした ID とアラートルール ID が等しくなるように条件を設定します。セットアップウィザードに従って、イベントのグループ化と通知受信者を設定します。
アラート履歴の確認：「アラートイベント履歴の確認」をご参照ください。

次のステップ

本トピックでは、デフォルトの CDN 同期読み込み方法を使用しています。リアルユーザーモニタリングは、CDN 非同期読み込みおよび npm パッケージのインストールもサポートしています。3 つの方法すべての設定手順と使用シナリオについては、「Web & H5 アプリケーションの導入」をご参照ください。
Web & H5 SDK は、アプリケーション ID、レポートエンドポイント、アプリケーション環境などの設定項目をサポートしています。詳細については、「SDK 設定リファレンス」をご参照ください。