Application Real-Time Monitoring Service:Web・H5 アプリケーションの接続

アプリケーションの作成

1. にログインします。 ARMSコンソールを使用します。

2. 左側のナビゲーションペインで [Real User Monitoring] > > アプリケーションリスト を選択し、上部メニューで対象のリージョンを選択します。

3. アプリケーションリスト ページで、アプリケーションの追加 をクリックします。

4. アプリの作成 パネルで、[Web & H5] をクリックします。

5. [Add Web & H5 Application] パネルで、アプリケーション名と説明を入力し、作成 をクリックします。

   説明

   アプリケーション名は一意である必要があります。

   アプリケーションが作成されると、[STEP 2] セクションにエンドポイントアドレスが表示されます。

6. [STEP 2] セクションで、インストール方法を選択し、エージェント SDK をインストールします。

   CDN 非同期読み込み

   次のコードをコピーし、HTML ページの <body> タグ内の最初の行として貼り付けます。

   説明

   次のコードの your endpoint を、アプリケーション用に生成されたエンドポイントアドレスに置き換えてください。

   <script>
     !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
       endpoint: "your endpoint"
     };
     with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
     })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js", "__rum");
   </script>

   CDN 同期読み込み

   次のコードをコピーし、HTML ページの <body> タグ内の最初の行として貼り付けます。

   説明

   次のコードの your endpoint を、アプリケーション用に生成されたエンドポイントアドレスに置き換えてください。

   <script>
     window.__rum = {
       endpoint: "your endpoint"
     };
   </script>
   <script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

   VuePress

   VuePress プロジェクトでは、ページごとの設定は不要です。HTML テンプレートファイルに CDN エージェントを一度挿入するだけで、すべてのページで有効になります。

   • VuePress 2.x (Vue 3)： テンプレートファイルは .vuepress/template.html です。.vuepress/config.mjs の templateBuild 設定項目でテンプレートパスを指定します。

     import { dirname } from 'path'
     import { fileURLToPath } from 'url'
     const __dirname = dirname(fileURLToPath(import.meta.url))
     export default defineUserConfig({
       templateBuild: __dirname + '/template.html',
     })

   • VuePress 1.x (Vue 2)： テンプレートファイルは .vuepress/index.html です。

   テンプレートファイルで、CDN エージェントスクリプトを <body> タグ内の最初の行として挿入します。

   重要

   エージェントスクリプトは <body> タグ内に配置する必要があります。<head> タグ内に配置すると、<body> がまだ読み込まれていないため、TypeError が発生します。

   プロジェクトに HTML テンプレートファイルがない場合は、代わりに npm パッケージのインストール方法を使用してください。

   npm パッケージ

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

      npm install @arms/rum-browser --save

   2. アプリケーションを初期化します。

      説明

      次のコードの your endpoint を、アプリケーション用に生成されたエンドポイントアドレスに置き換えてください。

      import armsRum from '@arms/rum-browser';
      armsRum.init({
        endpoint: "your endpoint"
      });

   重要

   SDK バージョン 0.1.x 以降、エンドポイントに必要なパラメーターが含まれているため、PID を渡す必要はなくなりました。最新の SDK とエンドポイントを使用していることを確認してください。

   以下に、各インストール方法について説明します：

   • 非同期読み込み：ノンブロッキング読み込みとも呼ばれます。ブラウザは JS スクリプトのダウンロード中にページの処理を続行します。ページのパフォーマンスを最優先する場合に推奨します。

     重要

     非同期読み込みでは、ARMS はエージェント SDK が読み込まれて初期化される前に発生する JS エラーやリソース読み込みエラーをキャプチャできません。

   • 同期読み込み：ブロッキング読み込みとも呼ばれます。ブラウザは JS スクリプトが読み込まれるのを待ってから、ページの残りの部分を処理します。ページが開いた瞬間からすべての JS エラーとリソース読み込みエラーをキャプチャする必要がある場合に推奨します。

   • npm パッケージ：ページへの外部スクリプトの読み込みを削減し、CDN 配信を管理し、リアルユーザーモニタリングを別のモジュールとして扱うことができます。

   CDN から SDK を読み込む場合、グローバル名前空間 RumSDK.default を使用して SDK 監視インスタンスにアクセスします。

   const armsRum = window.RumSDK.default;
   // RumSDK にアクセスする前に、SDK が読み込まれていることを確認してください。
   // SDK の読み込み前に __rum 設定が定義されていない場合は、ここで初期化できます。
   armsRum.init({
     endpoint: "your endpoint",
   });
   // 以下の使用方法は、npm と CDN 両方のインストール方法で共通です。
   armsRum.setConfig('env', 'pre');
   

関連ドキュメント

ARMS リアルユーザーモニタリング SDK は、さまざまな設定オプションを提供します。パラメーターの完全なリストについては、「SDK 設定リファレンス」をご参照ください。