Tracking usages of selected menu items

[Tom4]

Hi, 

in our application we want to track usage of selected items in 2 select boxes. Basically we need to find out how often are items in given select boxes selected (and if we should remove the least used ones).

I do not want to rely on URLs since the query params may change. I think that we should use JavaScript RUM API (dtrum). 

1. When i call dtrum.actionName("selection", some_id); 
2. But i am not sure how i should pass additional details what have been selected in both selectboxes. I have for example data: { first: "vegetables",  second: "apple" }

Could you please provide some guidance how to pass such data into action and also how to analyze this later in Dynatrace UI?

[Julius_Loman]

Yes, likely the best way is to utilize dtrum calls. I don't know your application, but most likely you want to capture the selection using user action properties. Those are independent of action names. You can capture the values by using different methods, dtrum being just one of them.

Then you can easily analyze for the action which values have been selected most often with combinations of another filters. 

dtrum.actionName creates a custom action. It's designed for situations when the user action is not detected. For example you have a calculator on the page and it does not trigger any XHR calls. Then such user interaction won't be captured as a user action and it's worth to create a custom action.

[Tom4]

We need to store metadata for each user action (can be multiple actions per 1 session) - so we need to use "User action property" via RUM JavaScript API. I understand that I need to first define props in application settings, otherwise Dynatrace would just throw them away and then I can start sending data using dtrum.addActionProperties - is that right?

I could not unfortunately find any example of that in documentation - so will try to put it in here and if something is wrong, please do correct my example in which I have 2 selectboxes and I need to persist both selected values and later filter on those values.

1. I first create "Custom defined property" under "Session and action properties"
   1. Expression type: JavaScript API, with data type of string
   2. Display name: first_selection (can be whatever)
   3. Key: key_1 (must be same as defined in JS?)
   4. Storage type: Store as use action property
2. I will repeat step 1 for the second value from selectbox and create key = key_2
3. In code i will call const id = dtrum.enterAction("name_of_selectbox"); where:
   1. actionName: can be whatever, or do i need to register this name somewhere in settings?
4. And then i code i will immediately call dtrum.addActionProperties(id, null, null, { key_1: "vegetables", key_2: "carrot" });
5. At the end i will call dtrum.leaveAction(id);

Will described steps be working and save me everytime 2 values selected by specific user in 2 selectboxes?

[Julius_Loman]

Correct, you need to define the properties first, including the source of data for them - being JavaScript API if you decide to use dtrum for that. The key must be the same key as you use in the JS and it will be a user action property if you want it to user action based. So exactly as you have in your first step. The display name can be a nice string such as "First selection".

To get familiar with the dtrum API it's best way to download the samples. Unfortunately you must download it from your environment. If you go to Settings > Web and mobile monitoring> Advanced setup you can download them, there are plenty of examples, including the sending the user action properties data. You must use it with conjunction of dtrum.addEnterActionListener() method. See example below:

            // STRING PROPERTIES
            var str = {string_one: 'stringValOne', string_two: 'stringValTwo'};
            function addStringProperties(actionId) {
                dtrum.addActionProperties(actionId, null, null, str);
            }
            function addStringPropertiesOnEnter () {
                if (typeof dtrum === "undefined") return;

                var str = {string_one: 'stringValOne', string_two: 'stringValTwo'};

                dtrum.addEnterActionListener(addStringProperties);
                loadData();
                dtrum.removeEnterActionListener(addStringProperties);
            }

 
Now it depends on how your application is working and how it is designed.

If you want to capture just changing of the selection value and the action itself does not trigger a XHR call, then you need to create the custom action with  dtrum.enterAction("Changing selection") or dtrum.enterAction(name_of_selectbox) as you have. Depends on if you need it captured as a single action for any selection of it's a separate user story (different action).

If you need to capture just those values in the next user step - so not capturing the changes of a selection, then you don't need to create a custom action. It really depends on what you need to track.

For example the select box is credit card type (e.g. Visa / Mastercard) you have a purchase "Button" in your app. If you want to track changes of the selection, create custom action(s). If you need to track the purchase and have the values which user had selected captured, just add the properties - your Load or XHR caption will be already captured as the action triggers a network call.

I hope this helps. Be sure to check other examples in the samples directory of the dtrum examples package.

[Tom4]

Unfortunately I could not find where to download the example you mentioned - i do not see "Web and mobile monitoring" and filters show nothing as well. I do not understand why the examples are not present/linked somewhere in the DtrumApi as libraries usually have.

• Could you please provide more exact steps where i should click to find those examples or even better send them in the response please?

I do not see why I would need to use addEnterActionListener, since i just need to send single action with some properties (I do not need to observe creation of other actions...). That's why i asked if it is enough to have:

// Create custom action with name "name_of_selectbox" 
const actionId = dtrum.enterAction("name_of_selectbox");

// Add custom props to an action (props need to be defined in UI!)
dtrum.addActionProperties(actionId, null, null, {key_1 : "vegetables", key_2: "carrot"});

// Send action to the Dynatrace along with added props
dtrum.leaveAction(actionId);

[Julius_Loman]

@Tom4 it'm attaching the examples for 1.255 here, You need to have the global permissions for settings in your environment, which you probably do not have. Agreed, the samples should be on the web publicly or be part of Dynatrace environment. Then users who do not have elevated permissions can access them.