Web アプリケーションを監視するために Application Real-Time Monitoring Service (ARMS) のブラウザ監視機能を使用するには、Content Delivery Network (CDN) または Node Package Manager (npm) を使用して ARMS エージェントをインストールする必要があります。このトピックでは、npm を使用して Web アプリケーション用の ARMS ブラウザ監視エージェントをインストールする方法について説明します。
npm パッケージのインストール
という名前の npm パッケージをインストールします。@arms/js-sdk
npm install @arms/js-sdk --save
SDK の初期化
BrowserLogger.singleton
を使用して SDK を初期化します。
const BrowserLogger = require('@arms/js-sdk');
// BrowserLogger.singleton(conf) config を使用して、config で指定された設定を読み込みます。
const __bl = BrowserLogger.singleton({
pid: 'your-project-id',
// ログのアップロード先パスを指定します。
// SDK をシンガポールリージョンにデプロイする場合は、パスを https://arms-retcode-sg.aliyuncs.com/r.png? に設定します。
// SDK を米国 (シリコンバレー) リージョンにデプロイする場合は、パスを https://retcode-us-west-1.arms.aliyuncs.com/r.png? に設定します。
imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
// config で指定された他の設定を行います。
});
npm を使用して ARMS ブラウザ監視エージェントをインストールすると、SDK はユーザー ID (UID) を自動的に生成して、ユニークビジター数 (UV) などの情報を収集します。生成された UID はユーザーの識別に使用できますが、サービス属性はありません。 UID をカスタマイズする場合は、コードに次の内容を追加します。
uid: 'xxx', // UID はユーザーを識別するために使用されます。ビジネスに基づいて値を設定します。
例:
const BrowserLogger = require('@arms/js-sdk');
// BrowserLogger.singleton(conf) config を使用して、config で指定された設定を読み込みます。
const __bl = BrowserLogger.singleton({
pid: 'your-project-id',
// ログのアップロード先パスを指定します。
// SDK をシンガポールリージョンにデプロイする場合は、パスを https://arms-retcode-sg.aliyuncs.com/r.png? に設定します。
// SDK を米国 (シリコンバレー) リージョンにデプロイする場合は、パスを https://retcode-us-west-1.arms.aliyuncs.com/r.png? に設定します。
uid: 'xxx', // UID はユーザーを識別するために使用されます。ビジネスに基づいて値を設定します。
imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
// config で指定された他の設定を行います。
});
API 操作
単一インスタンスを返すために使用されるメソッド: @static singleton()
このメソッドは、npm を使用したブラウザ監視の実装にのみ適用されます。
次の表は、BrowserLogger.singleton(config,prePipe)
に設定できるパラメータを示しています。
このメソッドは、単一インスタンスオブジェクトを返す静的メソッドです。読み込まれた config パラメータと prePipe パラメータは、メソッドが初めて呼び出されたときにのみ有効になります。後続の呼び出しでは、生成されたインスタンスのみが返されます。
パラメータ | タイプ | 説明 | 必須 | デフォルト値 |
config | Object | サイト設定。 config で設定できるその他のパラメータの詳細については、SDK リファレンスをご参照ください。 | はい | なし |
prePipe | Array | 事前に報告する必要があるコンテンツ。 | いいえ | なし |
このメソッドを使用して、アプリケーションのエントリポイントで SDK を初期化し、呼び出しごとにインスタンスを取得できます。
その他のレポートメソッド
BrowerLogger.singleton
を使用してインスタンスを取得できます。
const __bl = BrowserLogger.singleton();
__bl
の他のメソッドの使用方法の詳細については、SDK メソッドをご参照ください。
その他のレポートメソッド
config の設定は、CDN を使用して ARMS ブラウザ監視エージェントをインストールする場合と同じです。詳細については、SDK リファレンスをご参照ください。
データの事前レポート
BrowserLogger.singleton()
が呼び出される前に実行されるコードのロジックに基づいて一部のデータを報告する必要がある場合は、データを事前に報告する必要があります。詳細については、データの事前レポートをご参照ください。
const BrowserLogger = require('@arms/js-sdk');
// pipe の構造は、CDN を使用して ARMS ブラウザ監視エージェントをインストールする場合と同じです。
const pipe = [
// 現在の HTML ページを API リクエストとして報告します。
['api', '/index.html', true, performance.now, 'SUCCESS'], // これは __bl.api(api, success, time, code, msg) と同等です。
// SDK が初期化された後、自動シングルページアプリケーション (SPA) 解決を有効にします。
['setConfig', {enableSPA: true}]
];
const __bl = BrowserLogger.singleton({pid:'一意のサイト ID'},pipe);
共通 SDK パラメータ
ARMS のブラウザ監視機能では、さまざまな SDK パラメータを設定して、より多くの要件を満たすことができます。次の表に、このトピックで説明されているシナリオで設定できるパラメータを示します。
|
|
|
|
|
pid | String | プロジェクトの一意の ID。 ARMS がサイトを作成するときに自動的に生成されます。 | はい | なし |
uid | String | ユーザーの ID。値はユーザーの識別子であり、ユーザーの検索に使用できます。カスタム値を指定できます。このパラメータを指定しない場合、SDK は 6 か月ごとに自動的に生成および更新されます。 | いいえ | SDK によって自動的に生成 |
tag | String | 入力タグ。各ログにはタグが付いています。 | いいえ | なし |
release | String | アプリケーションのバージョン。異なるバージョンのレポート情報を表示するために、このパラメータを設定することをお勧めします。 | いいえ |
|
environment | String | 環境フィールド。有効な値: prod、gray、pre、daily、および local。
| いいえ |
|
sample | Integer | ログサンプリング設定。値は 1 から 100 までの整数です。パフォーマンスログと成功 API ログは | いいえ |
|
behavior | Boolean | トラブルシューティングを容易にするためにエラーを報告するユーザーの行動を記録するかどうかを指定します。 | いいえ |
|
enableSPA | Boolean | ページの hashchange イベントをリッスンし、PV を再度報告します。これは、シングルページアプリケーションのシナリオに適用できます。 | いいえ |
|
enableLinkTrace | Boolean | バックツーバックトレース分析の詳細については、フロントツーバックトレース機能を使用して API エラーを診断するをご参照ください。 | いいえ |
|
設定できる SDK パラメータの詳細については、SDK リファレンスをご参照ください。