Application Real-Time Monitoring Service:その他の種類のミニプログラムのモニタリング

基本的な使用方法

基本的なセットアップは、npm パッケージのインストールと初期化、ログのレポート、セキュリティドメイン名の構成という 3 つのステップで構成されます。

1. npm パッケージをインストールして初期化します。

   1. ご利用のミニプログラムプロジェクトで、モニタリングを有効にするために @arms/js-sdk npm パッケージをインストールします。

      npm install @arms/js-sdk

   2. /utils ディレクトリ内の monitor.js ファイルに以下のコードを追加して、SDK を初期化します。

      説明

      JavaScript (JS) ファイルの名前と場所はカスタマイズできます。

      import MiniProgramLogger from '@arms/js-sdk/miniapp';
      const Monitor = MiniProgramLogger.init({
          pid: 'xxx',
          uid: 'userxxx', // ユーザー ID を設定します。UV 統計に使用されます。
          region: 'cn', // アプリケーションがデプロイされているリージョンを指定します。中国本土の場合は 'cn'、中国本土以外の場合は 'sg' を設定してください。デフォルト値は 'cn' です。
          // 基本的なミニプログラムモニタリングでは、RPC 関数を手動で提供する必要があります。
          // ご利用のビジネスロジックに基づいて関数を実装してください。以下の例は DingTalk E-App での呼び出し方法を示しています。
          sendRequest: (url, resData) => {
                // この部分を必ず設定してください。GET および POST レポートの両方をサポートしています。
              // DingTalk でのデモ
              var method = 'GET';
              var data;
              if (resData) {
                  method = 'POST';
                  data = JSON.stringify(resData);
              }
              dd.httpRequest({
                  url: url,
                  method: method,
                  data: data,
                  fail: function (error) {
                      //...
                  }
              });
          },
           // 現在のページパスを取得する関数を手動で提供します。
           // ご利用のビジネスロジックに基づいて関数を実装してください。以下の例は DingTalk E-App での呼び出し方法を示しています。
           getCurrentPage: () => {
                // この部分を必ず設定してください。
              if (typeof getCurrentPages !== 'undefined' && typeof getCurrentPages === 'function') {
                  var pages = (getCurrentPages() || []);
                  var pageLength = pages.length;
                  var currPage = pages[pageLength - 1];
                  return (currPage && currPage.route) || null;
              }
           }
      });
      
      export default Monitor;

      説明

      パラメーターの詳細については、「SDK パラメーター」をご参照ください。

2. ログをレポートします。

   1. app.js 内で、以下のいずれかの方法を使用してログをレポートします。

      • Monitor.hookApp(options) メソッドを使用して、エラーログを自動的にキャプチャします。options パラメーターは、ご利用の App の元の構成オブジェクトです。

        import Monitor from '/utils/monitor';
        
            App(Monitor.hookApp({
              onError(err) {
                console.log('onError に入りました:', err);
              },
              onLaunch() {
                console.log('onLaunch に入りました');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            }));                

      • Monitor.error(err) メソッドを使用して、エラーログを手動でレポートします。

        import Monitor from '/utils/monitor';
        
            App({
              onError(err) {
                  Monitor.error(err);
                console.log('onError に入りました:', err);
              },
              onLaunch() {
                console.log('onLaunch に入りました');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            });

   2. ページの JS ファイル内で、以下のいずれかの方法を使用してログをレポートします。

      • Monitor.hookPage(options) メソッドを使用して、ページビュー (PV) およびヘルスデータを自動的にレポートします。

        説明

        このメソッドは API リクエストを自動的にレポートしません。

        import Monitor from '/utils/monitor';
        
            Page(Monitor.hookPage({
               data: {},
                onLoad(query) {
                },
                onReady() {
                    // ページのロードが完了しました。
                },
                onShow() {
        
                },
                onLoad(query) {
        
                },
                onHide() {
        
                },
                onUnload() {
        
                },
                onTitleClick() {
                    /**
                     * カスタムイベントトラッキングデータをレポートします。
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            }));

      • API メソッドを呼び出してデータを手動でレポートします。

        説明

        API メソッドの詳細については、「API メソッド」をご参照ください。

        import Monitor from './util/monitor';
        
            Page({
               data: {},
                onShow() {
                    Monitor.pageShow();
                },
                onHide() {
                    Monitor.pageHide();
                },
                onUnload() {
                    Monitor.pageHide();
                },
                onTitleClick() {
                    /**
                     * カスタムイベントトラッキングデータをレポートします。
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            });

3. セキュリティドメイン名を構成します。

   • region を cn に設定した場合、有効なドメイン名のリストに https://arms-retcode.aliyuncs.com を追加します。

   • region を sg に設定した場合、有効なドメイン名のリストに https://arms-retcode-sg.aliyuncs.com を追加します。

API メソッド

ほとんどのログレポート API は Web ブラウザ監視 SDK と一貫性があります。その他の API の使用方法は以下に記載されています。

• 現在のページの PV データを送信するには、Page の onShow ライフサイクルメソッド内で pageShow() メソッドを呼び出します。

  説明

  このメソッドを hookPage() メソッドと一緒に使用しないでください。そうしないと、重複した PV ログがレポートされます。

  import Monitor from '/util/monitor';
  Page({
      onShow: function() {
          Monitor.pageShow();
      }
  })

• 現在のページのヘルスデータを送信し、ヘルスレベルとページ滞在時間を測定するには、Page の onHide および onUnload ライフサイクルメソッド内で pageHide() メソッドを呼び出します。

  説明

  このメソッドを hookPage() メソッドと一緒に使用しないでください。そうしないと、重複したログがレポートされます。

  import Monitor from '/util/monitor';
    Page({
  
        onHide: function() {
            Monitor.pageHide();
        },
        onUnload: function() {
            Monitor.pageHide();
        }
        ... 
    })

高度なシナリオ

基本的な使用方法が要件を満たさない場合は、このセクションの高度なシナリオをご検討ください。

• uid の設定（UV 統計用）

  • ユーザー ID が SDK 初期化前に利用可能な場合は、init 構成内で直接 uid を設定できます。

  • ユーザー ID が初期化時に利用できない場合は、アプリケーションの onShow イベント前に取得し、setCommonInfo({uid: 'xxx'}) を呼び出して uid を設定できます。

• ミニプログラムの共通情報の設定

  setCommonInfo メソッドを使用して、ミニプログラムの共通情報を設定します。ARMS ブラウザ監視は以下のフィールドを分析します。

  • sr：画面の解像度

  • vp：ビューポート

  • dpr：デバイスピクセル比

  • ul：ドキュメント言語

  • dr：ドキュメントリファラー

  • ct：ネットワーク接続タイプ（例：Wi-Fi または 3G）

    警告

    setCommonInfo メソッドでフィールドを多く設定しすぎないでください。リクエスト長制限を超えると、リクエストが失敗する可能性があります。

SDK パラメーター

ARMS ブラウザ監視は、詳細設定用の SDK パラメーターを提供しています。以下の表では、このシナリオに適用される一般的なパラメーターについて説明します。

SDK パラメーターの完全なリストについては、「ブラウザ監視 SDK 構成」をご参照ください。