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

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

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

このシナリオについて 🔗

Buttercup Industries recently started a blog to share customer success stories and engage with their user base. The engineers at Buttercup Industries created the blog as a single-page application (SPA). Kai, a site reliability engineer at Buttercup Industries, monitors the blog with RUM to learn more about route changes, route durations, and back-end calls. Kai also leverages custom events in RUM to monitor how users engage with content on the blog.

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 wants to capture metrics for like and share actions on blog posts to help Buttercup Industries gauge how users are interacting with the content. Since there is no route change, and no URL change when someone likes a blog post, Kai creates a custom event to capture this workflow. Custom events are a great tool for Kai to leverage with multiple-page apps single-page apps when they want to monitor a workflow with custom JavaScript logic.

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 ドキュメント

このページは 2023年11月10日 に最終更新されました。