On this page:

Related pages:

Your Rating:
Results:
PatheticBadOKGoodOutstanding!
18 rates

You can add user information that is specific to your application to a browser snapshot. The information is expressed as key-value pairs that are attached the JavaScript Agent configuration and later included in the beacons sent to the EUM Server.

The JavaScript Agent initializes user data differently depending on the page type (base, Ajax, virtual) and the method used (immediately invoked function expressions, function pointers, and literals). See Methods for Setting Custom User Data to learn when the JavaScript Agent initializes the user data for each page type and method.

The maximum size allowed for user data in a page is 2048 characters (CORS beacon) or 100 bytes (image beacon). The maximum size includes the keys-value pairs, syntax characters such as braces, and quotation marks.

View Custom User Data 

Custom user data appears in Browser Analyze, Browser Snapshots, and in Sessions. View the following tabs to learn more about how user data is viewed and used in the Controller UI.

Browser Analyze

In the following screenshot of Browser Analyze, the user data vehicleYear is used to sort the records. You can also select fields to view user data.

Browser Snapshots

The following screenshot of the Browser Snapshots tab shows you how to filter results with user data.

Sessions

You view user data in the Session Summary of the Session Details dialog as shown in the following screenshot. In sessions, the custom user data is only included when the base page with the custom user data is the first page of the session. 

Methods for Setting Custom User Data 

You can use several methods to set custom data for each page type (base, Ajax, virtual). Each method has its own syntax, execution time, and use case. The following table outlines the execution time and potential use case for each method and page type.

Method TypePage TypeExecution TimePotential Use Cases
Immediately Invoked Function Expressions (IIFE)BaseThese are JavaScript functions that run as soon as they are defined. They're also known as self-executing anonymous functions.

If your base/virtual page or Ajax request depends on information from different resources, you can set static information for custom user data with IIFE.

For example, if two different server scripts generate content for the base page, you could use the IIFE on the client to set the static user data.



Ajax
Virtual
Function pointers

BaseThe JavaScript Agent executes function pointers when the onload event is triggered.Data extracted from cookies, the page, and meta data.
AjaxThis event is triggered when an Ajax call is made. Custom user data for the Ajax events are attached to AJAX requests.Meta data regarding the Ajax request such as the URL, HTTP method, or the request payload.
VirtualThis event is triggered when the virtual page is created. The virtual page is a dynamically recreated version of the base page, and custom user data set for VPageView events are attached to the virtual page records.Use if the information is derived or found somewhere on the page because of the creation of the virtual page. User-specific fields or user data set based on the URL and DOM changes.
Literals

BaseYou can simply use literal values to set custom data. The values, as with IIFE, are set as soon as the values are defined.

Constants, static data extracted and set on the server.

Ajax
Virtual

User Data Types

For each event callback that is triggered, you can add user data by returning the following objects containing key-value pairs of different data types. Each user data type is an object containing properties of a specific data type.

Data TypeDescriptionExample

userData

This data type is for setting one or more properties of type string.
{
   "username": "john_thompson",
   "email": "jthompson@gmail.com"
};

userDataLong

This data type is for setting one or more properties of type long.
{
    "numberOfProducts": 17,
    "numberOfSales": 1213
};
userDataDouble
This data type is for setting one or more properties of type double.
{
    "monthlyVisitFrequency": 0.13333333,
    "avgCustomerConverstion": 0.0361922
}

userDataBoolean

This data type is for setting one or more properties of type boolean.
{
    "returnCustomer": true,
    "subscriber": false
};
userDataDate
This data type is for setting one or more properties of type date.
{
    "checkoutTime": ((new Date()).getTime())
};

Syntax of User Data Objects

You add user data as objects for each page type to the JavaScript Agent configuration. 

The base page, Ajax, and virtual pages have the following corresponding user data objects:

  • PageView
  • Ajax
  • VPageView

The PageView, Ajax, and VPageView objects all have the same syntax consisting of the user data types. In the JSON Syntax tab, the property names for each user data type are arbitrary and are simply used for illustration.

JSON Syntax

{
    userData: {
        dataPropertyOne: "String",
        dataPropertyTwo: "String",
        ...
    },
    userPageName: "String",
    userDataDate: {
        dateProperty: Date
    },
    userDataLong: {
        longProperty: Long
    },
    userDataDouble: {
        doubleProperty: Double
    },
    userDataBoolean: { 
        booleanProperty: Boolean
    }
}

JSON Example

{
    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 
    }
}

Capture Ajax Data for Setting User Data

When setting user data for the Ajax event, the JavaScript Agent configuration provides a context object that has properties for the HTTP method, the request URL, and the request payload of the Ajax request. You can use this information to set values for the user data configuration object.

The JavaScript Agent does not intercept or expose the response from the Ajax request. Thus, you can only include the request information (HTTP method, request URL, and request payload) in the user data that you report.

Ajax Context Object

To access the URL and HTTP method of the Ajax request, you can simply access the method and url properties of the context object. For the request payload of the Ajax request, you need to first match the payload parameters (HTTP method or Ajax URL) to access the data property. See Match the Ajax Payload Parameters to learn how to define the filters to match the payload parameters.

The context object has the following properties:

PropertyDescriptionData TypeRequirement to Access Property
methodThe HTTP method used to make the Ajax request.stringXHR call
urlThe URL used to make the Ajax requeststringXHR call
dataThe request payload attached to the Ajax request.Any data type that can be passed as the body to xhr.send.
  • XHR call
  • XHR filter for the payload parameter

Match the Ajax Payload Parameters

To access the request payload, you need to use xhr.payloadParams array to match the HTTP method and/or the Ajax URL. To match the Ajax URL, you can specify one or more patterns. To match the HTTP method, you include one or more objects specifying HTTP methods.

In the "Match HTTP Methods" example, the payloadParams array is used to match the HTTP methods "POST" and "GET". In the "Matching URLs" example, the payloadParams array is used to match URLs with the following string: '.*/xhr/uptime'

Match HTTP Methods

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

Match URLs

window['adrum-config'] = {
    xhr: {
        payloadParams: [{urls: [{pattern: '.*/xhr/uptime'}]}]
    },
    ...
}

Ajax Payload Filter Examples

Conventional Ajax Requests

In the following examples, the data from a conventional Ajax request payload is used to set custom user data. For capturing the request payload for Fetch API calls, see Ajax Requests Using the Fetch API.

Match HTTP Methods Example

This example only sets the user data configuration objects with data from the Ajax request payload if the HTTP method is POST.

<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>

Match URLs Example

This example only sets the user data configuration objects with data from the Ajax request payload if the Ajax URL matches the pattern ".*/transaction". For example, the URL http://example.com/transaction would match the pattern and cause the user data configuration to be set with data from the Ajax request payload.

<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>

Ajax Requests Using the Fetch API

The example below demonstrates how to use the JavaScript Agent configuration to match the HTTP method, the request URL, and the request body for Ajax calls using the Fetch API. The Fetch API call is also provided to add context.

Fetch API Call

This Fetch API example sets the from the Ajax request payload if the HTTP method is POST.

<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>

The JavaScript Agent cannot access the request body, however, if you supply your own Request object to the fetch method.

Match HTTP Method and URL Example

This example only sets the user data configuration objects with data from the Ajax request payload if the HTTP method is POST and the Ajax URL matches the pattern ".*/posts".

<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>

Custom User Data Examples

The following examples show you how to set custom data for different page types and using the different methods:

Setting User Data with Function Pointers

The example below assigns a value to the userPageName property of the PageView object by executing the function extractUserData, which extracts data from the cookies.

<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>

Setting User Data with an Anonymous Function

You can also use anonymous functions that return an object as shown in this example for setting user data for virtual pages.

<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'></script>

Setting User Data with Multiple Methods

You might also want to use a combination of literal values, named and anonymous functions as this example does for setting user data for the Ajax event. Note, the context object is only available for Ajax events, and this object has the properties data (stores the request payload),  method (HTTP method used to make Ajax request), and url (the Ajax request 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>