Using Element Timing
How to use Element Timing to create custom data in SpeedCurve RUM and Synthetic
[Supported in SpeedCurve RUM and Synthetic]
What is Element Timing?
The Element Timing API enables monitoring of when a specified DOM element is rendered. It is implemented using the elementtiming
attribute of an html element.
Example:
<img src=”/images/logo.png” elementtiming="logo-shown" />
Element Timing: One true metric to rule them all?
Read this post by Andy Davies for more information on how Element Timing can be used to understand and measure user experience.
https://www.speedcurve.com/blog/element-timing-one-true-metric/
Adding custom timing metrics with Element Timing
You can add a timing metric to SpeedCurve using Element Timing.
Step 1
To get started, after clicking on 'Add Metric', select 'Timing Metric' type and click 'Next'.
![](https://files.readme.io/e527011-add_metric_types.gif)
Step 2
Select Element Timing API and click 'Next'.
![](https://files.readme.io/65c4901-add_element_timing1_1.2.gif)
Step 3
- Add the name of the metric you'd like to see in your charts and dashboards
- Add the name of the element timing entry you want to collect
![](https://files.readme.io/f5cf5bb-add_element_timing2_1.2.gif)
Step 4
Once complete, you will see your metric listed on the custom data page.
![](https://files.readme.io/8b22d37-add_elementtiming3.gif)
Updated 9 months ago