Sitespeed.io: How to report multiple asynchronous metrics

[gajus]

The browsertime --script option enables to:

Add custom Javascript to run on page (that returns a number). Note that --script can be passed multiple times if you want to collect multiple metrics. The metrics will automatically be pushed to the summary/detailed summary and each individual page + sent to Graphite/InfluxDB.

i.e. to capture a single value for a pre-defined name metric.

However, the requirement I have is to capture the loading time of every ad slot on the page.

A code to capture the ad load event would look like this:

adsService.addEventListener('slotRenderEnded', (event) => {
  console.log({
    name: event.positionName,
    time: event.loadTime
  });
});

I'd like register data for each of these events.

[tobli]

Hi @gajus,
Metrics scripts are run on the page once the page is fully loaded. Adding an event listener would require injecting code into the page at an appropriate time during the page load, unless I'm mistaken. I can't think of a way to do that.
What I'd propose is to add code to your page to collect all timings from slotRenderEnded events in a custom js variable on the page, and then query that variable in the metrics script. Something like:

var adSlotTimings = {};
adsService.addEventListener('slotRenderEnded', (event) => {
  adSlotTimings[event.positionName] = event.loadTime;
});

and then

(function() {
return adSlotTimings;
})();

Does that make sense?

[gajus]

In your example, metrics script is returning an object adSlotTimings {[key: string]: number}.

I thought that the metrics script can return only a number?

[tobli]

Right, the cli help is outdated for that. Object and Arrays are fine too. Check out the built in ones at https://github.com/sitespeedio/browsertime/tree/master/browserscripts/timings

[gajus]

Thank you.

This solves the issue.

[gajus]

I misunderstood the use behaviour of preScript. I thought it is a script that can be injected before any other JavaScript on the page. Instead, it is a webdriver script that you can use to "preheat" cache, login, etc (for others reference, see ./test/prepostscripts/preLoginExample.js).

@tobli assuming I have no control over the page, there is no way to inject such script at the moment?

[soulgalore]

@gajus there's no to do that today. only way would be adding a proxy in front and that doesn't seems the right way. I think the best way to fix it is as @tobli suggested even though it needs adding specific code in the front end.

[gajus]

I think the best way to fix it is as @tobli suggested even though it needs adding specific code in the front end.

Unfortunately, I don't have access to the code.

Sounds like I will be looking into the proxy option.

Is it in your plans to support this?

[soulgalore]

Hey @gajus sorry for not getting back on this.

Is it in your plans to support this?
We will not support injecting JS before the code is sent to the browser, that will need to be another tool.

Closing this, please re-open if there's more questions.

[gajus]

Just in case, I have solved it using a reverse proxy.