How to get widget level loading time details to asses the performance?

Context: Our team has both HTML and SPA websites. Each webpage of each website has (mostly) independent widgets. Each widget is a different type of graph (bar chart, pie chart, etc). These charts get the data from our APIs and hence few graphs load faster than the others because of the difference in the size of data that is being fetched from APIs.

What I’m trying to get: We want to track how fast our users are able to interact with the charts. So we are trying to get the loading time for each widget, which is similar to getting the avg generation time for each page (this report is available by default).

What I tried: I looked into setting dimensions for each widget hoping that it would give load time for each widget. But soon realized that it is not the way and it is unfeasible.

Can someone please help me regarding this. Also, please let me know if I can provide any more details. Thank you.

Hi all,

A gentle ping to see if anyone can help. We are still trying to figure it out.

Hi,

I’m still not sure how I can do this. It would be great if someone can point me to some documentation if exists. I just want to know if this is possible with Matomo.

If there is anything uncertain on what I’m trying to do, please let me know and I can provide more details.

Thanks

Hi Vinay,

Maybe this technique could help you: How do I get the time elapsed between two actions or two events in the same visit or even across multiple visits? FAQ - Analytics Platform - Matomo ?

Thank you for pointing me there. I’ve gone through this documentation before but I wasn’t sure how to log the event of DOM being created and data being fetched as actions so that I can measure time between those two actions as described in the documentation.

Also, the document suggests keeping track of the time manually in the “Event Value”. I’m not sure how to do that as well. Is there some documentation to which I can refer regarding this?

First, you have to get the loading time of e.g. a widget load. Mostly asynchronous library methods have onStart / onFinish / onSuccess functions, but that can differ.

There, get the time (example)

  • onStart: Date.now() (e.g. 1591463435346) -> store in variable
  • onFinish: Date.now() (e.g. 1591463435366) -> calculate second timestamp(ms) - first timestamp(ms) = 20ms
    So you know that it took 20ms to do stuff.

Then you can either push this info to the dataLayer:
_mtm.push(['event': 'loadTimingOfXY', 'timingValue': 20]);
and then process it further in the TagManager, or you can trigger an event right away:

_paq.push(['trackEvent', 'Loading time', 'Widget XYZ', 'Load new data', 20]);