概要

ブラウザモニタリングは、ユーザージャーニーで実行されるユーザーインタラクションを自動的に検出し、アプリケーション内のクリックをいちいち手動でインスツルメンテーションしなくても、ユーザーの行動に関するインサイトを提供します。

以下の目的を達成できます。

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

収集する情報の管理

初期化パラメーター trackUserInteractions は、アプリケーション内のユーザークリックの収集を有効にします。つまり、ページに含まれている機密データと非公開データは、ユーザーによってやり取りされた要素を特定するために含まれる場合があります。

Datadog に送信する情報を制御するには、プライバシーオプションでアクション名をマスクするアクション名を手動で設定する、または Datadog Browser SDK for RUM でグローバルスクラビングルールを実装することができます。

ユーザーインタラクションの追跡

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

  • クリックに続くアクティビティが検出されます。詳しくはページアクティビティの計算方法をご覧ください。
  • クリックによって新規ページの読み込みは開始しない。この場合、Datadog ブラウザ SDK で別の RUM ビューイベントが生成されます。
  • アクションの名前を計算することができます。詳しくは、クリックアクションの名前を宣言するを参照してください。

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

すべての RUM イベントタイプのデフォルト属性については、RUM ブラウザのデータ収集を参照してください。

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

Datadog Browser SDK for RUM は、クリックごとにページのアクティビティを監視することで、アクションのロード時間を計算します。ページにアクティビティがなくなると、アクションは完了したとみなされます。詳細については、ページアクティビティの計算方法を参照してください。

サンプリングまたはグローバルコンテキストに対する構成の詳細については、RUM データおよびコンテキストの変更を参照してください。

アクションの属性

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

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

Datadog Browser SDK for 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="visually-hidden">Error:</span>
    Enter a valid email address
</div>

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

例:

<script>
  window.DD_RUM.init({
    ...
    trackUserInteractions: 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 が優先されます。

アクション名の決定方法

Datadog Browser SDK は、クリックアクション名を決定するために異なる戦略を採用します。

  1. data-dd-action-name 属性やカスタム属性 (上記で説明した通り) がクリックされた要素 (またはその親) にユーザーによって明示的に設定されている場合、その値がアクション名として使用されます。

  2. data-dd-action-name 属性やそれに相当するものが設定されていない場合、要素のタイプに応じて、sdk は要素またはその親の labelplaceholderaria-label などの他の属性を使用してアクション名を構築します。これらの属性が見つからない場合、sdk は内部テキストをアクション名として使用します。

カスタムアクションの送信

ユーザーインタラクションのコレクションを拡張するには、addAction API を使用してカスタムアクションを送信します。これらのカスタムアクションは、ユーザージャーニー中に発生したイベントに関連する情報を送信します。

詳しくは、カスタムアクションの送信をご覧ください。

その他の参考資料

PREVIEWING: may/unit-testing