:その他のミニプログラムの監視

基本的な使用方法

ミニプログラムを監視するには、npmパッケージの導入と初期化、ログの報告、セキュリティドメイン名の構成という、以下の操作を実行する必要があります。

1. npmパッケージを導入して初期化します。

   1. ミニプログラムプロジェクトで、 @arms/js-sdk という名前のnpmパッケージを導入して、ログの報告を容易にします。

      npm install @arms/js-sdk

   2. /utilsディレクトリのmonitor.jsファイルに次の情報を追加して、パッケージを初期化します。

      説明

      JavaScript (JS) ファイルの名前と保存パスを指定できます。

      import MiniProgramLogger from '@arms/js-sdk/miniapp';
      const Monitor = MiniProgramLogger.init({
          pid: 'xxx',
          uid: 'userxxx', // ユーザーの ID。Unique Visitor (UV) データの収集に使用されます。
          region: 'cn', // アプリケーションがデプロイされているリージョン。アプリケーションが中国にデプロイされている場合は cn に設定し、中国以外にデプロイされている場合は sg に設定します。デフォルト値は cn です。
          // ミニプログラムのブラウザ監視を実行するには、リモートプロシージャコール (RPC) メソッドを指定する必要があります。実装メソッドを記述します。次の例では、DingTalk E-App のメソッドを使用しています。
          sendRequest: (url, resData) => {
                // 次のスニペットは、ビジネス側で設定する必要があります。GET または POST メソッドがサポートされています。
              // demo in dingding
              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 パラメータは、アプリ固有のオブジェクトです。

        import Monitor from '/utils/monitor';
        
            App(Monitor.hookApp({
              onError(err) {
                console.log('Trigger onError:', err);
              },
              onLaunch() {
                console.log('Trigger onLaunch');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            }));                

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

        import Monitor from '/utils/monitor';
        
            App({
              onError(err) {
                  Monitor.error(err);
                console.log('Trigger onError:', err);
              },
              onLaunch() {
                console.log('Trigger onLaunch');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            });

   2. page.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 メソッド

ほとんどのログ報告メソッドは、ブラウザ監視 SDK と同じ目的を果たします。次のセクションでは、他のメソッドの呼び出し方法について説明します。

• 現在のページの PV データを送信するには、ページの onShow で pageShow() を呼び出します。

  説明

  pageShow() を hookPage() と一緒に呼び出さないでください。そうしないと、PV ログが繰り返し報告されます。

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

• ヘルスレベルやページ滞在時間などのヘルスデータを送信するには、ページの onHide および onUnload で pageHide() を呼び出します。

  説明

  pageHide() を hookPage() と一緒に呼び出さないでください。そうしないと、ログが繰り返し報告されます。

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

高度なシナリオ

基本的な使用方法では要件を満たせない場合は、次の高度なシナリオを参照してください。

• UV データを収集するために uid を設定します。

  • 監視 SDK が初期化される前にユーザー情報を取得できる場合は、 uid を設定できます。

  • 監視 SDK が初期化される前にユーザー情報を取得できない場合は、アプリケーションの onShow がトリガーされる前にユーザー情報を取得し、 setCommonInfo({uid: 'xxx'}) を呼び出して uid を設定できます。

• ミニプログラムの共通情報を構成します。

  setCommonInfo を呼び出して、ミニプログラムの共通情報を構成します。ARMS ブラウザ監視は、次のパラメータで統計分析を実行します。

  • sr: 画面のサイズ

  • vp: ブラウザウィンドウの表示セクション

  • dpr: 画面のピクセル比

  • ul: ドキュメントの言語

  • dr: ドキュメントの参照

  • ct: ネットワーク接続タイプ (Wi-Fi、3G など)

    警告

    一度に過剰なパラメータを構成するために setCommonInfo を呼び出さないでください。そうしないと、リクエストの長さが制約を超えてリクエストエラーが発生する可能性があります。

共通の SDK パラメータ

ARMS ブラウザ監視は、一連の SDK パラメータを提供します。追加の要件を満たすようにパラメータを設定できます。次の表では、このトピックで説明されているシナリオに適した共通パラメータについて説明します。

ARMS ブラウザ監視は、他の SDK パラメータも提供します。詳細については、「SDK リファレンス」をご参照ください。