Docs » Splunk RUM を使用してアプリケーションとサービスを監視するシナリオ » シナリオ：カスタムイベントを作成し単一ページのアプリケーションを監視する

シナリオ：カスタムイベントを作成し単一ページのアプリケーションを監視する 🔗

次のシナリオは、架空のeコマース企業である Buttercup Industries を取り上げています。

このシナリオについて 🔗

Buttercup Industries は最近、顧客のサクセスストーリーを共有し、ユーザーベースとエンゲージするためにブログを開始しました。Buttercup Industries のエンジニアは、ブログをシングルページアプリケーション（SPA）として作成しました。Buttercup Industries のサイト信頼性エンジニアである Kai は、RUM を使用してブログを監視し、ルートの変更、ルートの継続時間、バックエンドのコールについて詳しく学んでいます。Kai はまた、RUM のカスタムイベントを活用して、ユーザーがブログのコンテンツにどのように関与するかをモニターしています。

Splunk RUM で SPA をインストルメンテーションする 🔗

Splunk RUM for Browser は、SPA のルート変更に関するメトリクスを自動的に収集します。ルート変更は、継続時間が0秒のイベントです。

Splunk RUM で SPA を監視するために、Kai は以下の手順を実行します：

  1. Kai はブログを計測し、アプリケーション名を ButtercupBlog とします。Splunk RUM で SPA を計測するステップについては、Splunk RUM 用の ブラウザ RUM エージェントをインストールする を参照してください。

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

    アプリケーションサマリーダッシュボードでは、Kai はアプリケーションの健全性に関する主要なメトリクスを見ることができます：

    • ウェブバイタル

    • ページビュー／エラー

    • ルート変更

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

    • JavaScriptエラー

    • ディテクター

  3. KaiはTag Spotlightを開き、ページビューとルート変更 メトリクスの すべて見る をクリックすることで、ルート変更を見ることができます。次の画像は、RUMのページビューとルート変更メトリクスのURLの例を示しています。

  4. 個々のセッションを調べるには、Kai は ユーザーセッション を開きます。

ブログ記事のユーザーエンゲージメントを測定するカスタムイベントを作成する 🔗

Kaiは、Buttercup Industriesがユーザーがコンテンツとどのようにやり取りしているかを測定するために、ブログ投稿の「いいね！」と共有アクションのメトリクスを取得したいと考えています。誰かがブログ投稿に「いいね！」を押したときにルートが変更されたり、URLが変更されたりすることはないので、Kaiはこのワークフローをキャプチャするためにカスタムイベントを作成します。カスタムイベントは、カスタムJavaScriptロジックでワークフローを監視したいときに、複数ページアプリやシングルページアプリでKaiが活用できる素晴らしいツールです。

Splunk RUM でブログ記事への「いいね！」を計測するカスタムイベントを作成するには、Kai は次のようにします：

  1. Kai は、blog.likes というカスタムイベントを作成し、ユーザーが Buttercup Blog のコンテンツにどのように関与するかを追跡します。

以下は、Kai がトレーサーを初期化し、Splunk RUM for Browser の 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();

  1. 作成したカスタムイベントのメトリクスを見るために、Kai はTag Spotlightに移動し、カスタムイベントでフィルタリングして、blog.likes に固有のメトリクスを表示します。

概要 🔗

このシナリオでの Kai の作業：

Splunk Observability Cloud での体験を最適化する方法については、以下のリソースをご覧ください：

サブジェクト

リソース

ビデオチュートリアルとブログ記事

Splunk RUM ドキュメント

This page was last updated on 2023年11月10日.