ユーザーアクションの追跡

Real User Monitoring (RUM) Browser SDK は、ユーザージャーニー中に実行されるユーザーアクションを自動的に検出します。

ユーザーアクションを自動収集することで、アプリケーション内のすべてのクリックに手動でインスツルメントしなくても、ユーザー行動のインサイトを得ることが可能になるため、以下の目的を達成できます。

  • キーとなるインタラクションの実行（「カートへ追加」ボタンのクリックなど）を把握
  • 機能の適応を数値化
  • 特定のブラウザエラーにつながるステップを認識

独自のカスタムアクションを送信し、ユーザーアクションの収集を拡張できます。

注: 初期化パラメーター trackInteractions は、アプリケーション内のユーザークリックの収集を有効にします。ページに含まれている機密データと非公開データは、やり取りされた要素を特定するために含まれる場合があります。Datadog へ送信される情報を制御するには、アクション名を手動で設定するか、Browser SDK のグローバルスクラビングルールをインスツルメントします。

どのようなインタラクションが追跡されますか？

Browser SDK は自動的にクリックを追跡します。以下の すべて の条件が満たされると、クリックアクションが作成されます。

  • クリックが処理された 100ms 以内にアクティビティを検出（アクティビティはネットワークリクエストまたは DOM ミューテーションの開始時として定義）。
  • クリックによって新規ページの読み込みは開始しない。この場合、Browser SDK で新規 RUM ビューイベントが生成されます。
  • アクションに名前を計算することが可能です（アクションの命名に関する詳細をご参照ください）。

アクションタイミングメトリクス

すべての RUM イベントタイプのデフォルト属性に関する詳細は、収集されるデータをご覧ください。サンプリングまたはグローバルコンテキストの構成に関する情報は、RUM データとコンテキストの変更をご覧ください。

メトリクスタイプ説明
action.loading_time数値（ns）アクションのロード時間。
action.long_task.count数値このアクションについて収集されたすべてのロングタスクの数。
action.resource.count数値このアクションについて収集されたすべてのリソースの数。
action.error.count数値このアクションについて収集されたすべてのエラーの数。

アクションのロード時間の計算方法

インタラクションが検出されると、RUM SDK によりネットワークリクエストと DOM ミューテーションが監視されます。ページで 100ms 以上アクティビティがないと、アクションが完了したとみなされます（アクティビティは進行中のネットワークリクエストまたは DOM ミューテーションとして定義）。

アクションの属性

属性タイプ説明
action.id文字列ユーザーアクションの UUID。
action.type文字列ユーザーアクションのタイプ。カスタムユーザーアクションの場合、custom に設定されます。
action.target.name文字列ユーザーが操作したエレメント。自動収集されたアクションのみ対象。
action.name文字列作成されたユーザーフレンドリーな名称 (Click on #checkout など)。カスタムユーザーアクションの場合は、API コールで提供されたアクション名。

クリックアクションの名前を宣言

RUM ライブラリは、クリックアクションの命名にさまざまなストラテジーを使用します。制御を強化するには、アクションの命名に使用されるクリック可能な要素（またはその親）に data-dd-action-name 属性を定義します。

<a class="btn btn-default" href="#" role="button" data-dd-action-name="Login button">Try it out!</a>

<div class="alert alert-danger" role="alert" data-dd-action-name="Dismiss alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

バージョン 2.16.0 以降、actionNameAttribute 初期化パラメーターを使用して、アクションに名前を付けるために使用される独自の属性を指定できます。例:

<script>
  DD_RUM.init({
    ...
    trackInteractions: true,
    actionNameAttribute: 'data-custom-name',
  ...
  })
</script>

<a class="btn btn-default" href="#" role="button" data-custom-name="Login button">Try it out!</a>

注: 両方の属性が要素に存在する場合、data-dd-action-name が優先されます。

カスタムアクション

カスタムアクションは、addAction API を使用して手動で宣言および送信されるユーザーアクションです。ユーザージャー中に発生するイベントに関連する情報の送信に使用されます。以下の例では、訪問者がチェックアウトボタンをクリックしたすると、RUM SDK がユーザーのカートデータを収集します。ここでは、カート内のアイテム数、アイテムリスト、カート内のアイテム総額が収集されます。 

    import { datadogRum } from '@datadog/browser-rum';

datadogRum.addAction('<NAME>', '<JSON_OBJECT>');

// コード例
datadogRum.addAction('checkout', {
    cart: {
        amount: 42,
        currency: '$',
        nb_items: 2,
        items: ['socks', 't-shirt'],
    },
});

    DD_RUM.onReady(function() {
    DD_RUM.addAction('<NAME>', '<JSON_OBJECT>');
})

// コード例
DD_RUM.onReady(function() {
    DD_RUM.addAction('checkout', {
        cart: {
            amount: 42,
            currency: '$',
            nb_items: 2,
            items: ['socks', 't-shirt'],
        },
    });
})

    window.DD_RUM && DD_RUM.addAction('<NAME>', '<JSON_OBJECT>');

// コード例
window.DD_RUM &&
    DD_RUM.addAction('checkout', {
        cart: {
            amount: 42,
            currency: '$',
            nb_items: 2,
            items: ['socks', 't-shirt'],
        },
    });

    その他の参考資料

    お役に立つドキュメント、リンクや記事:

    RUM カスタムアクションをコードから送信ガイド more more リアルユーザーモニタリングブログ more more Datadog でビューを検索するDOCUMENTATION more more イベントへの視覚化の適用DOCUMENTATION more more RUM ダッシュボードDOCUMENTATION more more