Web Vitals
The Web Vitals API allows you to access performance metrics for your app directly through App Bridge.
Anchor to web vitalsWeb Vitals
The Web Vitals API provides an onReport method that registers a callback function to receive Web Vitals data. It allows you to monitor and analyze your app's performance in the Shopify admin.
- Anchor to onReportonReport(callback: ) => Promise<void>
WebVitalsApi
- onReport
(callback: WebVitalsCallback) => Promise<void>
export interface WebVitalsApi {
onReport?: (callback: WebVitalsCallback | null) => Promise<void>;
}WebVitalsCallback
- metrics
WebVitalsMetric
void | Promise<void>(
metrics: WebVitalsMetric,
) => void | Promise<void>WebVitalsMetric
WebVitals API
- id
string - name
string - value
number
export interface WebVitalsMetric {
id: string;
name: string;
value: number;
}Was this section helpful?
Callback onReport
// Define the callback function
const callback = async (metrics) => {
const monitorUrl = 'https://yourserver.com/web-vitals-metrics';
const data = JSON.stringify(metrics);
navigator.sendBeacon(monitorUrl, data);
};
// Register the callback
shopify.webVitals.onReport(callback);
examples
Callback onReport
// Define the callback function const callback = async (metrics) => { const monitorUrl = 'https://yourserver.com/web-vitals-metrics'; const data = JSON.stringify(metrics); navigator.sendBeacon(monitorUrl, data); }; // Register the callback shopify.webVitals.onReport(callback);
