Add custom data

Track any metrics you want (cart size, A/B tests, conversion info) using the addData API.

SpeedCurve RUM includes numerous metrics collected from real user web pages such as page load time, DNS lookup time, DOM size, etc. It also records User Timing marks and measures. But sometimes there's other information specific to your site that you would like to track.

This additional data that is specific to your website is called Custom Data. Examples include:

  • Business metrics such as cart size and conversion information.
  • Performance metrics such as download time for specific resources or number of search results.
  • A/B testing information such as the name of the test bucket.
  • User information such as account ID or username.

Here's an example of how a customer added their own conversion data to create a correlation chart that demonstrates the powerful relationship between start render and conversion rate:


How to add Custom Data

You can add Custom Data to RUM by using the LUX.addData API:

LUX.addData(name, value);

The examples listed above could be captured like this:

LUX.addData('cartsize', 128);
LUX.addData('jsonresptime', 744);
LUX.addData('abtest_buttoncolor', 'blue');
LUX.addData('username', 'steve_souders');

Pro tip: The values you assign to the custom data variables are used in your charts, so choose values that are going to be most intuitive to your organization. For example, you might have a boolean variable "logged_in". Using "true" and "false" might seem logical but "yes" and "no" would probably be more easily understood by most people reading the chart.

Adding Custom Data to Settings

Once you've added the LUX.addData JavaScript to your pages, as shown in the previous examples, the next step is to add them to your Settings:

  1. Go to Settings.

  2. Click "Add Custom Metric".

  3. Enter a human-readable name, such as "Cart Size" or "Button Color AB Test".

  4. Enter the Custom Data variable. This is the name you used in LUX.addData(), e.g., "cartsize" or "abtest_buttoncolor".

  5. Select the "Custom Data" radio button.

  6. Choose the "type" for this Custom Data variable (as explained next). 

Determining the Custom Data "type" depends on whether you want to plot the variable or use it for segmenting your data:

  • If you want to plot the Custom Data variable, choose "Seconds", "Milliseconds", or "Currency". From our previous examples, we would choose "Currency" for cartsize and "Milliseconds" for jsonresptime.

  • If you want to use the Custom Data variable for segmenting, choose "Other". For example, you would choose "Other" for abtest_buttoncolor because you want to segment your data based on test bucket, e.g., page load times split out by button color "blue" versus "red". Similarly, you would choose "Other" for username so you could see performance data for specific users.

Using Custom Data

Custom Data variables setup for plotting (with types "Seconds", "Milliseconds", or "Currency") show up in the list of metrics in Favorites in the "Custom Metrics" section. You can select them just like any other metric to generate new, custom charts. For example, you might create a chart that plots "Cart Size" and "Page Load" to see if faster pages generate more revenue.

Custom Data variables setup for segmenting (with type "Other") show up in the Favorites and RUM dashboards under "Custom Data". You can choose the variable name (e.g., "Button Color AB Test") and choose from the set of possible values. 

Note that after adding a new variable it can take up to 24 hours before it is available as an option in the SpeedCurve dashboards.

Did this page help you?