Appending additional key properties/columns to BRUM monitoring

[Stephen_Cunliff]

When implementing BRUM (via HTML/JS code injection into the code of an application) we can set configuration options for the apiKey, spa2, etc.

However if there is a need to pass in additional meta data, that could be retrieved when running a query:

SELECT * FROM browser_records

It isn't super clear from these docs ( https://docs.appdynamics.com/display/PRO21/Add+Custom+User+Data+to+a+Page+Browser+Snapshot ) what the correct data structure is:

PS There are also a bunch of missing closing parens ")" in the "Conventional Ajax Requests" sample code.

I think I've correctly understood that when sending data back, it needs to be organized into these buckets depending on the datatype we are trying to pass back in. Here's the updated code sample with the correct parens, and comments for each data "bucket".

<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: {
              //String properties
              username: payload.get("username"),
              email: payload.get("email"),
              phone: payload.get("phone")
            },
            userDataLong: {
              //Long properties
              customerId: Number(payload.get("customer_id")),
              totalPurchases: Number(payload.get("total_purchases"))
            },
            userDataDouble: {
              //Double properties
              purchaseTotal: Number(payload.get("total"))
            },
            userDataBoolean: {
              //Boolean properties
              discounted: Boolean(payload.get("discounted")),
              vipMember: Boolean(payload.get("member"))
            },
            userDataDate: {
              //Date properties
              purchaseTime: Date.now()
            }
          }
      }
    }
  };
</script>
<script src="//cdn.appdynamics.com/adrum/adrum-latest.js" type="text/javascript" charset="UTF-8"></script>

Ok, so now for my particular case, all users are logged in (enterprise app), so we'd like to pass in 2 identifiers that let's us know which user, and which company a giving request is for. This will be particularly helpful with tracking down some users with rouge or broken browser extensions that are making various ajax requests while the user navigates our application.

I'm looking to capture this additional property on Ajax, PageView, and VPageView. Does what I've coded below "smell" right? (ignoring all other aspects of the adrum-config)

  window['adrum-config'] = {
    userEventInfo: {
      "Ajax" : function(context){
        return {
          userData: {
            user: sessionStorage.get("user"),
            cust: sessionStorage.get("company")
          }
        }
      },
      "PageView" : function(context){
        return {
          userData: {
            user: sessionStorage.get("user"),
            cust: sessionStorage.get("company")
          }
        }
      },
      "VPageView" : function(context){
        return {
          userData: {
            user: sessionStorage.get("user"),
            cust: sessionStorage.get("company")
          }
        }
      },
    }
  };

...or do I need to also specify all method verbs I want to track this on?... e.g. GET/POST/PUT/HEAD/...

[Stephen_Cunliff · Accepted solution]

Sadly I was a victim of my own code. 😞

I had some typos in my code sample, specifically around "sessionStorage.getItem()" (In my haste I was missing the "Item") and thus it all fell down.

The following code works fine:

  window['adrum-config'] = {
    userEventInfo: {
      "Ajax" : function(context){
        return {
          userData: {
            user: sessionStorage.getItem("user"),
            cust: sessionStorage.getItem("company")
          }
        }
      },
      "PageView" : function(context){
        return {
          userData: {
            user: sessionStorage.getItem("user"),
            cust: sessionStorage.getItem("company")
          }
        }
      },
      "VPageView" : function(context){
        return {
          userData: {
            user: sessionStorage.getItem("user"),
            cust: sessionStorage.getItem("company")
          }
        }
      },
    }
  };

This other post helped me discover the issue walking through other examples and examining where the data should appear in the POST back to the AppDynamics server: https://community.appdynamics.com/t5/Knowledge-Base/Troubleshooting-EUM-custom-user-data/ta-p/26267

[iamryan]

Hi @Stephen.Cunliffe,

I wanted to let you know I shared your feedback with the Docs team and they made some edits.

They updated the code syntax and provide more examples, you can check out the Doc here: https://docs.appdynamics.com/display/PRO21/Add+Custom+User+Data+to+a+Page+Browser+Snapshot

[Stephen_Cunliff]

Still stuck on this, does anyone have any info on how to correctly pass this extra info, or more clear APIs?

[Morelz]

Hi Stephen

It is a bit confusing trying to figure out how to get the data. Here is an example of how we just extracted the UserAgent through normal html code. 

As long as the variable is accessible when called, it should be able to be passed to the userData in AppDynamics

Hope this can atleast help you to populate the data needed, will go through your code to see if I can assist.

</script>
<script type='text/javascript' charset='UTF-8'>
window['adrum-start-time'] = new Date().getTime();
(function(config){
config.appKey = 'XXXX-XXX-XXXX';
config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
config.beaconUrlHttp = 'http://fra-col.eum-appdynamics.com';
config.beaconUrlHttps = 'https://fra-col.eum-appdynamics.com';
config.xd = {enable : true};
(function(info) {
info.PageView = function () {
return {
userData: {
UserAgent: navigator.userAgent
}
}
}
})(config.userEventInfo || (config.userEventInfo = {}))
})(window['adrum-config'] || (window['adrum-config'] = {}));
</script>
<script src='https://cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>