CDN を使用したブラウザ監視の実装 - - Alibaba Cloud ドキュメントセンター

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

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

ARMS コンソールにログインします。
左側のナビゲーションペインで、ブラウザ監視 > ブラウザ監視 を選択します。上部のナビゲーションバーで、リージョンを選択します。
ブラウザ監視 ページで、右上隅にある Create Application Site をクリックします。
フロントエンド、モバイル、およびクライアントアプリケーション統合センター パネルの 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>
      // 非同期ロード: 提供されたコードをコピーし、HTML ページの <body> 要素の最初の行に貼り付けてから、アプリケーションを再起動します。
      !(function (c, b, d, a) {
        c[a] || (c[a] = {})
        c[a].config = {
          pid: 'xxx', // プロジェクトの固有 ID。サイト作成時に ARMS によって自動的に生成されます。
          appType: 'web',
          imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
          sendResource: true,
          enableLinkTrace: true,
          behavior: true,
          useFmp: true,
          enableSPA: true,
        }
        with (b) with (body) with (insertBefore(createElement('script'), firstChild)) setAttribute('crossorigin', '', (src = d))
      })(window, document, 'https://retcode.alicdn.com/retcode/bl.js', '__bl')
    </script>
    <div id="app"></div>
  </body>
</html>

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

npm パッケージ:

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

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

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

例:

<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://retcode.alicdn.com/retcode/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 リファレンスを参照してください。