この例について

Boutercup Industry は最近、顧客の成功事例を共有し、ユーザーベースとエンゲージメントするためにブログを開始しました。Boutercup Supplies のエンジニアは、シングルページ アプリケーション（SPA）としてブログを作成しました。Botercup Industry 社のサイト信頼性エンジニアである Rai は、RUM でブログをモニターして、ルート変更、ルートの長さ、バックエンドコールの詳細を理解しています。また、RUM でカスタムイベントを使用して、ユーザーがブログのコンテンツにどのように関与するかを監視することもできます。

Splunk RUM を使用した SPA のインストゥルメント化

ブラウザ用の Splunk RUM が、SPA のルート変更に関するメトリックを自動的に収集する。ルート変更は、期間が 0 秒間のイベントです。

Splunk RUM で SPA をモニタするには、AI は次の手順を実行します。

1. kai がブログをインストゥルメント化し、アプリケーションに BuntercupBlogという名前を付けます。 Splunk RUM を使用して SPA をインストゥルメント化する手順については、「Splunk RUM のブラウザ RUM エージェントのインストール」を 参照してください。

2. kai は RUM を開きます。ナビゲーション パネルから、ソースとして RUM と ブラウザ を選択し、アプリケーションとして BuntercupBlog を 選択します。

   アプリケーション サマリー ダッシュボードで、AI はアプリケーションの正常性に関する主要なメトリックを確認します。

   • Webバイタル

   • ページビュー/エラー

   • ルートの変更

   • ネットワークリクエスト/エラー

   • JavaScriptエラー

   • ディテクタ

3. ケイは、タグ スポットライトを開くために、 [ページビュー/ルート変更 メトリック] で [すべて表示] を選択して、ルート変更を確認します。次の図は、RUM でのページビューおよびルート変更メトリック用の URL のセットの例を示しています。

   

4. 個々のセッションを探索するために、AI は [ユーザーセッション（User sessions）]を開きます。

ブログ投稿に対するユーザーエンゲージメントを測定するためのカスタムイベントを作成する

kai は、「Like」のメトリックをキャプチャし、ブログの投稿でアクションを共有し、Battercup Industryがユーザーのコンテンツとのやり取りを測定できるようにしたいと考えています。ブログの投稿が評価された場合、ルートは変更されず、URL も変更されないため、kai はこのワークフローをキャプチャするためのカスタムイベントを作成します。カスタムイベントは、カスタム JavaScript ロジックでワークフローをモニターする必要がある場合に、複数ページアプリの単一ページアプリで活用するための良いツールです。

ブログ投稿の評価を測定する Splunk RUM でカスタムイベントを作成するために、kai は次のことを行います。

1. kai は、 blog.likes と呼ばれるカスタムイベントを作成し、Buttercup再開のコンテンツへのユーザーの関与を追跡します。

   次に、AI がトレーサを初期化し、ブラウザ用の Splunk RUM の NPM パッケージを使用してカスタムイベントを作成する方法の例を示します。

   import {trace} from '@opentelemetry/api'
   
   const tracer = trace.getTracer('blogLoader');
   const span = tracer.startSpan('blog.likes', {
     attributes: {
         'workflow.name': 'blog.likes'
     }
   });
   
   // time passes
   span.end();

2. 自分が作成したカスタムイベントのメトリックを確認するために、Ka はタグスポットライトに移動します。そこで、カスタムイベントでフィルタ処理を行って、 回線の状態に固有のメトリックを表示できます。

サマリー

この例では、AI は次のタスクを完了しました。

• 「Splunk RUM 用の ブラウザ RUM エージェントのインストール」の手順に従って、Splunk RUMで SPA がインストゥルメント化された。

• 「カスタムイベントの作成」No Content found for /db/organizations/splunk/repositories/portal-production/content/documents/ObservabilityCloud/rum/RUM-custom-events.dita#d9ced1e23b4ef4f7ab1b63aa572681630/rum-custom-eventの手順に従って、ユーザーエンゲージメントをよりよく理解するために、ブログの「リクエスト」や「共有」を監視するカスタムイベントを作成。

Splunk Observability Cloud を使用したエクスペリエンスを最適化する方法の詳細については、次のリソースを参照してください。