shopify web-vitals onReport function call issue

jaymitBeladiya · ‎10-23-2024

I'm trying to get my app's Web Vitals data using the code below, but webVitals.onReport() is not being called. Is there any additional configuration needed?

<head>
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
<script>
/**
* Callback function for processing Web Vitals metrics.
* @param {Object} metrics - The metrics object containing Web Vitals data.
* @param {string} metrics.appId - Identifier for the app (e.g., "gid://shopify/App/1").
* @param {string} metrics.shopId - Identifier for the shop (e.g., "10").
* @param {string} metrics.userId - Identifier for the user (e.g., "5").
* @param {string} metrics.appLoadId - Unique identifier for the current app load session.
* @param {Array<Object>} metrics.metrics - Array of Web Vitals metrics.
* @param {string} metrics.metrics[].id - Unique identifier for the metric.
* @param {string} metrics.metrics[].name - Name of the metric (e.g., "LCP", "FCP", "CLS").
* @param {number} metrics.metrics[].value - Value of the metric (can be integer or float).
*/
function processWebVitals(metrics) {
const monitorUrl = 'https://yourserver.com/web-vitals-metrics';
const data = JSON.stringify(metrics);

navigator.sendBeacon(monitorUrl, data);
}

// Register the callback
shopify.webVitals.onReport(processWebVitals);
</script>
</head>

Jaymit Beladiya
Frontend Developer | Flits
jaymit.beladiya@getflits.com

shopify web-vitals onReport function call issue

shopify web-vitals onReport function call issue

Community Blog Articles