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>