アプリケーションに固有のユーザ情報をブラウザのスナップショットに追加できます。この情報はキーと値のペアとして表されます。これは JavaScript エージェント構成に付加され、その後で EUM サーバに送信されるビーコンに付加されます。

JavaScript エージェントは、ページタイプ(基本、Ajax、仮想)と使用されるメソッド(IIFE、関数ポインタ、リテラル)に応じて、ユーザデータを異なる方法で初期化します。JavaScript エージェントが各ページタイプとメソッドのユーザデータを初期化するタイミングについては、「カスタムユーザデータを設定するメソッド」を参照してください。

ページ内のユーザデータに対して許可される最大サイズは、2048 文字(CORS ビーコン)または 100 バイト(イメージビーコン)です。最大サイズには、キーと値のペア、括弧などの構文文字、引用符などが含まれます。

カスタムユーザデータの表示

カスタムユーザデータは、ブラウザ分析、ブラウザスナップショット、およびセッションに表示されます。コントローラ UI でユーザデータを表示および使用する方法の詳細については、次のタブを参照してください。

ブラウザ分析の次のスクリーンショットでは、ユーザデータ vehicleYear を使用してレコードをソートします。また、ユーザデータを表示するためのフィールドを選択することもできます。

[Browser Snapshots] タブの次のスクリーンショットは、ユーザデータを使用して結果をフィルタリングする方法を示しています。

次のスクリーンショットは、[Session Details] ダイアログの [Session Summary] のユーザデータ表示です。カスタムユーザデータを含む基本ページがセッションの最初のページである場合には、セッションにはカスタムユーザデータのみが含まれます。 

カスタムユーザデータを設定するメソッド

各ページタイプ(基本、Ajax、仮想)のカスタムデータを設定するには、いくつかのメソッドを使用できます。各メソッドには、独自の構文、実行時間、およびユースケースがあります。次の表に、各メソッドとページタイプの実行時間とユースケース例の概要を示します。

方式タイプページタイプ実行時間ユースケースの例
Immediately Invoked Function Expressions(IIFE)基本これらは、定義されるとすぐに実行される JavaScript 関数です。自己実行無名関数とも呼ばれています。

基本/仮想ページまたは Ajax リクエストが、異なるリソースからの情報に応じて変化する場合は、IIFE を使用してカスタムユーザデータの静的情報を設定できます。

たとえば、2 つの異なるサーバスクリプトが基本ページのコンテンツを生成する場合、クライアントの IIFE を使用して静的ユーザデータを設定できます。



Ajax
仮想
関数ポインタ

基本JavaScript エージェントは、onload イベントがトリガーされたときに関数ポインタを実行します。cookie、ページ、およびメタデータから抽出されたデータ。
Ajaxこのイベントは、Ajax コールが発信されたときにトリガーされます。Ajax イベントのカスタムユーザデータは、AJAX リクエストに付加されます。URL、HTTP メソッド、リクエストペイロードなどの Ajax リクエストに関するメタデータ。
仮想このイベントは、仮想ページが作成されたときにトリガーされます。仮想ページは、基本ページの動的に再作成されたバージョンであり、VPageView イベント用のカスタムユーザデータが仮想ページレコードに付加されます。仮想ページの作成により、この情報がページのどこかで生成されるか、または検出される場合に使用。URL と DOM の変更に基づいて設定されたユーザ固有のフィールドまたはユーザデータ。
リテラル

基本カスタムデータを設定するときは、リテラル値を使用するだけです。値は、IIFE と同様に、値が定義されるとすぐに設定されます。

定数。サーバで抽出され、設定される静的データ。

Ajax
仮想

ユーザデータ型

トリガーされるイベントコールバックごとに、さまざまなデータ型のキーと値のペアを含む次のオブジェクトを返すことによって、ユーザデータを追加できます。各ユーザデータ型は、特定のデータ型のプロパティを含むオブジェクトです。

データ タイプ説明

userData

このデータ型は、string 型の 1 つまたは複数のプロパティを設定するためのものです。
{
   "username": "john_thompson",
   "email": "jthompson@gmail.com"
};
JS

userDataLong

このデータ型は、long 型の 1 つまたは複数のプロパティを設定するためのものです。
{
    "numberOfProducts": 17,
    "numberOfSales": 1213
};
JS
userDataDouble
このデータ型は、double 型の 1 つまたは複数のプロパティを設定するためのものです。
{
    "monthlyVisitFrequency": 0.13333333,
    "avgCustomerConverstion": 0.0361922
}
JS

userDataBoolean

このデータ型は、boolean 型の 1 つまたは複数のプロパティを設定するためのものです。
{
    "returnCustomer": true,
    "subscriber": false
};
JS
userDataDate
このデータ型は、date 型の 1 つまたは複数のプロパティを設定するためのものです。
{
    "checkoutTime": ((new Date()).getTime())
};
JS

ユーザデータオブジェクトの構文

各ページタイプのオブジェクトとしてユーザデータを JavaScript エージェント構成に追加します。 

基本ページ、Ajax、および仮想ページには、次の対応するユーザデータオブジェクトがあります。

  • PageView
  • Ajax
  • VPageView

PageView、Ajax、および VPageView オブジェクトのすべてで、ユーザデータ型で構成される同じ構文が使用されます。[JSON Syntax] タブでは、各ユーザデータ型のプロパティ名は任意であり、単に説明のために使用されます。

{
    userData: {
        dataPropertyOne: "String",
        dataPropertyTwo: "String",
        ...
    },
    userPageName: "String",
    userDataDate: {
        dateProperty: Date
    },
    userDataLong: {
        longProperty: Long
    },
    userDataDouble: {
        doubleProperty: Double
    },
    userDataBoolean: { 
        booleanProperty: Boolean
    }
}
JS
{
    userData: {
        "email": "johndoe@example.com",
        "userID": "94612"
    },
    userPageName: "News Home",
    userDataDate: {
       "loginTime": ((new Date()).getTime())
    },
    userDataLong: {
        "numberOfProducts": 17
    },
    userDataDouble: {
        "monthlyVisitFrequency": 0.13333333
    },
    userDataBoolean: { 
	    "subscribed": true 
    }
}
JS

ユーザデータを設定するための Ajax データのキャプチャ

Ajax イベントのユーザデータを設定すると、JavaScript エージェント構成では、HTTP メソッド、リクエスト URL、および Ajax リクエストのリクエストペイロードのプロパティを持つ context オブジェクトが使用できます。この情報を使用して、ユーザデータ構成オブジェクトの値を設定できます。

JavaScript エージェントは、Ajax リクエストからの応答のインターセプトや公開は行いません。したがって、レポートするユーザデータには、リクエスト情報(HTTP メソッド、リクエスト URL、およびリクエストペイロード)のみを含めることができます。

Ajax コンテキストオブジェクト

Ajax リクエストの URL および HTTP メソッドにアクセスするには、context オブジェクトの method および url プロパティにアクセスするだけです。Ajax リクエストのリクエストペイロードについては、最初にペイロードパラメータ(HTTP メソッドまたは Ajax URL)と照合して data プロパティにアクセスする必要があります。ペイロードパラメータと一致するフィルタを定義する方法については、「Ajax ペイロードパラメータの照合」を参照してください。

context オブジェクトには次のプロパティがあります。

プロパティ説明データ タイププロパティにアクセスするための要件
methodAjax リクエストを作成するために使用される HTTP メソッド。stringXHR コール
urlAjax リクエストを作成するために使用される URL。 stringXHR コール
dataAjax リクエストに付加されるリクエストペイロード。本文として xhr.send に渡すことができる任意のデータ型
  • XHR コール
  • ペイロードパラメータの XHR フィルタ

Ajax ペイロードパラメータの照合

リクエストペイロードにアクセスするには、xhr.payloadParams 配列を使用して、HTTP メソッドや Ajax URL を照合する必要があります。Ajax URL と照合する場合、1 つまたは複数のパターンを指定できます。HTTP メソッドを照合するには、HTTP メソッドを指定する 1 つまたは複数のオブジェクトを追加します。

「HTTP メソッドの照合」の例では、HTTP メソッド「POST」と「GET」を照合するために payloadParams 配列が使用されます。「URL の照合」の例では 、文字列「.*/xhr/uptime'」を使用して URL を照合するために payloadParams 配列が使用されます。

<script type='text/javascript' charset='UTF-8'>
   window['adrum-config'] = {
    xhr: {
        payloadParams: [{method: 'POST'}, {method: 'GET'}]
    },
    ...
}
JS
window['adrum-config'] = {
    xhr: {
        payloadParams: [{urls: [{pattern: '.*/xhr/uptime'}]}]
    },
    ...
}
JS

Ajax ペイロードフィルタの例

従来の Ajax リクエスト

次の例では、従来の Ajax リクエストペイロードのデータを使用して、カスタムユーザデータを設定します。Fetch API コールのリクエストペイロードをキャプチャする場合は、「Fetch API を使用した Ajax リクエスト」を参照してください。

この例では、HTTP メソッドが POST の場合のみ、Ajax リクエストペイロードのデータを使用してユーザデータ構成オブジェクトを設定します。

<script type='text/javascript' charset='UTF-8'>   
    window['adrum-config'] = {
        xhr: {
            payloadParams: [{method: 'POST'}]
        },
        userEventInfo: {
            "Ajax" : function(context) {
                if (context.data && context.data.indexOf("purchase") > -1) {
                    // The URLSearchParams API does not work on IE/Edge
                    var payload = new URLSearchParams(context.data);
                    return {
                        userData: {
                            username: payload.get("username"),
                            email: payload.get("email"),
                            phone: payload.get("phone")
                        },
                        userDataLong: {
                            customerId: Number(payload.get("customer_id"),
                            totalPurchases: Number(payload.get("total_purchases")
                        },
                        userDataDouble: {
                            purchaseTotal: Number(payload.get("total") 
                    },
                    userDataBoolean: {
                        discounted: Boolean(payload.get("discounted"),
                        vipMember: Boolean(payload.get("member")
                    },
                    userDataDate: {
                        purchaseTime: Date.now()
                    }
                }
            }
        }
    };
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
JS

この例では、Ajax URL がパターン ".*/transaction" と一致する場合のみ、Ajax リクエストペイロードのデータを使用してユーザデータ構成オブジェクトのみを設定します。たとえば、URL http://example.com/transaction はこのパターンに一致し、ユーザデータ構成が Ajax リクエストペイロードのデータを使用して設定されます。

<script type='text/javascript' charset='UTF-8'>
    window['adrum-config'] = {
        xhr: {
            payloadParams: [{urls: [{pattern: '.*/transaction'}]}]
        },
        userEventInfo: {
            "Ajax" : function(context) {
                if (context.data && (context.data.indexOf("username") > -1) && (context.data.indexOf("customer_id") > -1) && (customer.data.indexOf("phone") > -1)) {
                    // The URLSearchParams API does not work on IE/Edge
                    var payload = new URLSearchParams(context.data);
                    return {
                        userData: {
                            username: payload.get("username"),
                            email: payload.get("email"),
                            phone: payload.get("phone")
                        },
                        userDataLong: {
                            customerId: Number(payload.get("customer_id")
                            totalPurchases: Number(payload.get("total_purchases") || 0
                        },
                        userDataDouble: {
                            purchaseTotal: Number(payload.get("total") || 0
                        },
                        userDataBoolean: {
                            discounted: Boolean(payload.get("discounted") || false,
                            vipMember: Boolean(payload.get("member") || false
                        },
                        userDataDate: {
                            purchaseTime: Date.now()
                        }
                   }
                }
            }
        };
    }
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
JS

Fetch API を使用した Ajax リクエスト

次の例は、JavaScript エージェント構成を使用して、Fetch API を使用する Ajax コールの HTTP メソッド、リクエスト URL、および リクエスト本文を照合する方法を示しています。Fetch API コールは、コンテキストを追加するためにも提供されます。ただし、独自のリクエストオブジェクトfetch メソッドに指定した場合は、JavaScript エージェントはリクエスト本文についてはcannot access。

この Fetch API の例では、HTTP メソッドが POST の場合に、Ajax リクエストペイロードのデータを設定します。

<script type="text/javascript" charset="UTF-8">
    // Note: URLSearchParams() is not supported in IE/Edge
    let queryParams = new URLSearchParams(window.location.search.substr(1));
    fetch('https://my-json-server.typicode.com/typicode/demo/posts', {
        method: 'post',
        body: queryParams.toString()
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        console.log('Posted content:', data.request_url);
    });
</script>
JS

この例では、HTTP メソッドが POST で Ajax URL がパターン ".*/posts" と一致する場合のみ、Ajax リクエストペイロードのデータを使用してユーザデータ構成オブジェクトを設定します。

<script type='text/javascript' charset='UTF-8'>
    window['adrum-config'] = {
      xhr: {
        payloadParams: [{method: 'POST'}, {urls: [{pattern: '.*/posts'}]}]
      },
      userEventInfo: {
        "Ajax": function (context) {
          var payload = null;
          if (context.data && (context.data.indexOf("id") > -1) && (context.data.indexOf("title") > -1)) {
            // The URLSearchParams API does not work on IE/Edge
            payload = new URLSearchParams(context.data).toString();
          } else if (context.data && context.data.indexOf("id") > -1) {
            // The URLSearchParams API does not work on IE/Edge
            var params = new URLSearchParams(context.data); 
            params.set("title", "Post for " + params.get("id"));
            payload = params.toString();
          } else {
            payload = "Payload is not available";
          }
          return {
            userData: {
              username: "xhr_user",
              cart: "218.50",
              payload: payload
            }
          }
        }
      }
    };
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
JS

カスタムユーザデータの例

次の例は、さまざまなページタイプのカスタムデータを設定し、さまざまなメソッドを使用する方法を示しています。

関数ポインタを使用したユーザデータの設定

次の例では、関数 extractUserData を実行して PageView オブジェクトの userPageName プロパティに値を割り当てます。これにより、cookie からデータが抽出されます。

<script type='text/javascript' charset='UTF-8'>     
    (function(config){
        (function(info) {
            info.PageView = extractUserData;
        })(config.userEventInfo || (config.userEventInfo = {}))
    })(window['adrum-config'] || (window['adrum-config'] = {}));
 
    function extractUserData() { 
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.indexOf("role=") === 0) {
                var role = cookie.substring(5);
            }
        }
        return {
            userPageName: role
        };
    }
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
JS

無名関数を使用したユーザデータの設定

また、仮想ページのユーザデータを設定するために、次の例に示すように、オブジェクトを返す無名関数を使用することもできます。

<script type="text/javascript" charset="UTF-8">  
    (function(config){
         (function(info) {
             info.VPageView = function () { 
                 return {
                     userData: {
                         version: window.location.href.split("/")[4],
                         space: space(),
                         email: getEmail()
                     },
                     userPageName: $('title').get(0).text,
                     userDataDate: { currentTime: ((new Date()).getTime()) },
                     userDataBoolean: { watchingPage: watchingPage() }
                 }
             }
         })(config.userEventInfo || (config.userEventInfo = {}))
    })(window['adrum-config'] || (window['adrum-config'] = {}));
</script>
<script src="//cdn.appdynamics.com/adrum/adrum-latest.js" type="text/javascript" charset="UTF-8"/>
XML

複数のメソッドを使用したユーザデータの設定

また、この例では、 Ajax イベントのユーザデータを設定するために、リテラル値と名前付きおよび無名関数を組み合わせて使用することもできます。context オブジェクトは、Ajax イベントにのみ使用できます。このオブジェクトには、プロパティ data(リクエストペイロードを格納)、method(Ajax リクエストの作成に使用する HTTP メソッド)、および url(Ajax リクエスト URL)があります。  

<script type='text/javascript' charset='UTF-8'>
    (function(config){
        (function(info) {
            info.Ajax = function(context) { 
                return { 
                    userPageName: $('title').get(0).text,
                    userData: extractUserData(context)
                    userDataBoolean: {
				        "visited": true
                    }
                }
            };
        })(config.userEventInfo || (config.userEventInfo = {}))
   })(window['adrum-config'] || (window['adrum-config'] = {}));
 
   function extractUserData(context) { 
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.indexOf("email=") === 0) {
                var role = cookie.substring(5);
            }
        }
        return {
            role: role,
            url: context.url,
            method: context.method
        };
    }
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
XML