CDN を使用してブラウザー監視を実装する方法 - Application Real-Time Monitoring Service

Application Real-Time Monitoring Service (ARMS) のブラウザー監視機能を使用して Web アプリケーションを監視するには、Alibaba Cloud Content Delivery Network (CDN) または Node Package Manager (npm) を使用して ARMS エージェントをインストールする必要があります。このトピックでは、CDN を使用して Web アプリケーションに ARMS ブラウザー監視エージェントをインストールする方法について説明します。

ブラウザー監視エージェントのインストール

ARMS コンソールにログインします。
左側のナビゲーションペインで、[ブラウザー監視] > [ブラウザー監視] を選択します。上部のナビゲーションバーで、リージョンを選択します。
[ブラウザー監視] ページで、右上隅にある アプリケーションサイトの作成をクリックします。
フロントエンド、モバイル、およびクライアントアプリケーション[統合センター] パネルの Web & H5 セクションで、をクリックします。
アプリケーションを作成[web & H5 の統合] パネルの手順で、カスタムアプリケーション名を入力します。
SDK拡張の構成項目[web & H5 の統合] パネルの手順で、必要なオプションを選択します。ページに貼り付ける BI エージェントのコードは、選択したオプションに基づいて生成されます。
- [自動 API レポートの無効化]: このオプションを選択した場合、__bl.api() メソッドを手動で呼び出して、API の成功率を報告する必要があります。
- [自動 SPA 解決の有効化]: このオプションを選択すると、ARMS はページの hashchange イベントを監視し、ページビュー (PV) を自動的にレポートします。このオプションは、シングルページアプリケーション (SPA) に適しています。
- [FMP 収集の有効化]: このオプションを選択すると、ARMS は First Meaningful Paint (FMP) に関連するデータを収集します。
- [ページリソースレポートの有効化]: このオプションを選択すると、onload イベントがトリガーされたときに、ページにロードされた静的リソースが報告されます。
- [アプリケーション監視との関連付け]: このオプションを選択すると、API リクエストはアプリケーション監視とエンドツーエンドで関連付けられます。
- [ユーザー行動のバックトラッキングの有効化]: このオプションを選択すると、JS エラー診断でユーザーの行動履歴を表示できます。
- [コンソール追跡の有効化]: このオプションを選択すると、コンソールでユーザーの行動が追跡されます。行動は、error、warn、log、または info です。
  重要
  この機能は、[コンソール] パネルのパスに影響します。

次のいずれかの方法で ARMS エージェントをインストールします。

非同期ロード: 提供されたコードをコピーし、HTML ページの <body> 要素の最初の行に貼り付けてから、アプリケーションを再起動します。 tab_bm_async_load

HTML の例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>ARMS</title>
  </head>
  <body>
    <script>
      !(function (c, b, d, a) {
        c[a] || (c[a] = {})  // c[a] が未定義の場合は空のオブジェクトを代入
        c[a].config = {
          pid: 'xxx', // プロジェクトID
          appType: 'web', // アプリケーションタイプ
          imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', // 画像URL
          sendResource: true, // リソース送信
          enableLinkTrace: true, // リンクトレース有効化
          behavior: true, // 動作追跡
          useFmp: true, // FMP使用
          enableSPA: true, // SPA有効化
        }
        with (b) with (body) with (insertBefore(createElement('script'), firstChild)) setAttribute('crossorigin', '', (src = d))
      })(window, document, 'https://sdk.rum.aliyuncs.com/v1/bl.js', '__bl')
    </script>
    <div id="app"></div>
  </body>
</html>

同期ロード: 提供されたコードをコピーし、HTML ページの <body> 要素の最初の行に貼り付けてから、アプリケーションを再起動します。

npm パッケージ:

次のコマンドを実行して npm パッケージをインストールします。
```
npm install alife-logger --save
```

コンソールから次のコマンドをコピーして実行し、npm パッケージを初期化します。

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"b590lhguqs@8cc3f63543d****",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,behavior:true,enableLinkTrace:true,enableConsole:true});

非同期ロードと同期ロードの違い

非同期ロード: 非ブロッキングロードとも呼ばれます。非同期ロードでは、JavaScript のロードが完了したかどうかに関係なく、ブラウザーは後続のページの処理を続けます。ページのパフォーマンスを高くする必要がある場合は、この方法を使用することをお勧めします。
重要
非同期ロードを使用する場合、監視 SDK が初期化を完了する前に、ARMS は JavaScript エラーまたはリソースロードエラーをキャプチャできません。
同期ロード: ブロッキングロードとも呼ばれます。同期ロードでは、JavaScript のロードが完了するまで、ブラウザーは後続のページの処理を続行しません。プロセス全体で JavaScript エラーとリソースのロードエラーをキャプチャする必要がある場合は、同期ロードを使用することをお勧めします。

カスタム UID

同期または非同期ロードを使用して ARMS ブラウザー監視エージェントをインストールすると、Web SDK はユーザー ID (UID) を自動的に生成して、ユニークビジター数 (UV) などの情報を収集します。 UID はユーザーの識別に使用できますが、ビジネス属性はありません。 UID をカスタマイズする場合は、コードの config に次のコンテンツを追加します。

uid: "xxx" // UID はユーザーの識別に使用されます。 ビジネス要件に基づいて UID を指定できます。

例:

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",appType:undefined,imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", uid: "xxxx"}; // uid を設定
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

重要

[SDK 拡張の構成] セクションでオプションを変更すると、コードが変更されます。コードをもう一度コピーして貼り付けます。

共通 SDK パラメーター

ARMS のブラウザー監視機能では、さまざまな SDK パラメーターを設定して、追加の要件を満たすことができます。次の表に、このトピックで説明されているシナリオに適した一般的なパラメーターを示します。

			必須	デフォルト値
pid	String	プロジェクトの一意の ID。サイトを作成するときに ARMS によって自動的に生成されます。	はい	なし
uid	String	ユーザーの ID。値はユーザーの識別子であり、ユーザーの検索に使用できます。カスタム値を指定できます。このパラメーターを指定しない場合、SDK は自動的に生成され、6 か月ごとに更新されます。	いいえ	SDK によって自動的に生成
tag	String	入力タグ。各ログにはタグが付いています。	いいえ	なし
release	String	アプリケーションのバージョン。異なるバージョンのレポート情報を表示するために、このパラメーターを構成することをお勧めします。	いいえ	`undefined`
environment	String	環境フィールド。有効な値: prod、gray、pre、daily、および local。値 prod はオンライン環境を示します。値 gray は段階的リリース環境を示します。値 pre はステージング環境を示します。値 daily は日次環境を示します。値 local はローカル環境を示します。	いいえ	`prod`
sample	Integer	ログサンプリング構成。値は 1 ～ 100 の整数です。パフォーマンスログと成功 API ログは、`1/sample` の比率でサンプリングされます。パフォーマンスログと成功 API ログのメトリックの詳細については、「統計メトリック」をご参照ください。	いいえ	`1`
behavior	Boolean	トラブルシューティングを容易にするためにエラーを報告するユーザーの行動を記録するかどうかを指定します。	いいえ	`true`
enableSPA	Boolean	ページの hashchange イベントをリッスンし、PV を再度報告します。これは、シングルページアプリケーションのシナリオに適用できます。	いいえ	`false`
enableLinkTrace	Boolean	バックツーバックトレース分析の詳細については、「フロントツーバックトレース機能を使用して API エラーを診断する」をご参照ください。	いいえ	`false`

ARMS のブラウザー監視機能は、要件をさらに満たすために、より多くの SDK パラメーターも提供します。詳細については、「SDK リファレンス」をご参照ください。