New Relic Browserのカスタムイベント機能を利用して、ウェブアプリケーションにおけるユーザー行動を詳細に計測・分析する方法を解説します。

ウェブアプリケーションのパフォーマンス監視において、ページロード時間やJavaScriptエラーの把握は基本です。しかし、ビジネス上の意思決定には、それだけでは不十分なケースが多々あります。例えば、「特定のCTAボタンのクリック数」「フォームの完了率」といった、ビジネス指標に直結するユーザーアクションを追跡する必要があるからです。

New Relic Browserのカスタムイベントを活用すれば、これらの独自のユーザー行動をイベントとして記録し、New Relicの強力な分析プラットフォームで可視化・分析できるようになります。

今回のポイント

この記事の主要なポイントは、以下の2点に集約されます。

カスタムイベントの基本を学ぶ: newrelic.recordCustomEvent() メソッドを使って、ユーザーの特定アクションをイベントとしてNew Relicに送信する基本的な実装方法を理解します
イベントデータの活用方法を知る: New Relic の NRQL を使い、送信したカスタムイベントのデータを確認・分析する方法を習得します。これにより、ビジネスに役立つ洞察を得るための実践的なスキルを身につけます

最新のアップデートの詳細はこちら
New Relic アップデート一覧

無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！

New Relic Browserの概要

New Relic Browserは、ウェブアプリケーションのフロントエンド（ブラウザ側）パフォーマンスを監視するサービスです。主な機能には、以下のものが含まれます。

ページロード時間の測定
JavaScriptエラーの検出
非同期通信（AJAX）のパフォーマンス分析

これらの標準機能に加え、カスタムイベントを導入することで、監視の範囲をビジネスロジックやユーザー行動にまで広げることが可能です。

カスタムイベント送信の準備

カスタムイベントの送信には、ウェブサイトに組み込まれているNew Relic Browserエージェントを使用します。記事では、すでにエージェントが導入済みであることを前提とします。まだ導入されていない場合は、New Relicの公式ドキュメントを参照してセットアップを完了してください。Qiitaの記事でもインストール方法を紹介しています。

カスタムイベントの実装方法

カスタムイベントの送信には、newrelic.recordCustomEvent() メソッドを使用します。このメソッドは、addPageAction() よりも汎用性が高く、イベント名と属性を自由に定義できるため、より柔軟なデータ設計が可能です。送信されたデータは任意のイベント名で記録されます。

基本的な実装例

ユーザーが「お問い合わせ」ボタンをクリックした際に、イベントを送信する例です。

HTML

<button id="contact-button">お問い合わせ</button>

JavaScript

document.getElementById('contact-button').addEventListener('click', function() {
  // イベント名 'ButtonClick'、属性 { eventAction: 'contactButtonClick' } を持つカスタムイベントを送信
  newrelic.recordCustomEvent('ButtonClick', {
    eventAction: 'contactButtonClick'
  });
});

複数の属性付きイベントの実装例

イベントに複数の属性を含めることで、より詳細な情報を紐づけることが可能です。例えば、フォームが完了した際に、その種類や完了までの時間を記録します。

JavaScript

function sendFormCompletionEvent(formType, timeToComplete) {
  // イベントタイプ 'FormCompletion' と属性を送信
  newrelic.recordCustomEvent('FormCompletion', {
    formType: formType,
    timeToComplete: timeToComplete,
    userId: 'user-12345' // 例: ログインユーザーID
  });
}

第二引数のオブジェクトにキーと値のペアを追加することで、後々の分析が容易になります。

送信したイベントの分析

イベントを送信したら、New Relic の UI 上でデータが正しく収集されているか確認し、分析を進めます。

New Relic の UI 上での確認

New Relic の画面下部の Query your data をクリックします。

クエリビルダーに以下の NRQL（New Relic Query Language）を入力します。

全カスタムイベントの表示

recordCustomEvent() で送信されたデータは ButtonClick, FormCompletion というデータタイプに記録されます。

NRQL

SELECT eventAction, * FROM ButtonClick

NRQL

SELECT formType, timeToComplete, userId, * FROM FormCompletion

属性ごとの集計

FormCompletionイベントをformType属性ごとに集計します。

NRQL

SELECT count(*) FROM FormCompletion FACET formType

FACET句を使用することで、指定した属性の値ごとに集計結果をグループ化できます。

時系列分析

過去30分間におけるButtonClickイベントの発生推移をグラフ化します。

NRQL

SELECT count(*) FROM ButtonClick FACET eventAction TIMESERIES SINCE 30 minutes AGO

TIMESERIES句を使用することで、データの時間的な変化を可視化できます。

まとめ

New Relic Browserのカスタムイベントは、標準の監視では捉えきれないユーザー行動を可視化するための強力なツールです。

CTAクリック数やフォーム完了率の測定
動画再生やスクロール深度の追跡
A/Bテストの結果計測

といった、ビジネスに特化したデータを収集し、分析に活用することで、ウェブアプリケーションの改善サイクルを加速させることができます。

本記事で解説した内容を参考に、ぜひ皆様のプロジェクトでもカスタムイベントを導入し、より深い洞察を得るための基盤を構築してください。

New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！

New Relic株式会社のX(旧Twitter) や Qiita OrganizationOrganizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。

無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！