Debug web vitals not working

Wuzzy · ‎10-11-2024

Hello,

recently ive attempted to get web vital debugging working to have a better insight into LCP etc.

Im using the following code.

    <meta name="shopify-debug" content="web-vitals" />
    <meta name="shopify-api-key" content=":)" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
    <script>
      function processWebVitals(metrics) {
        const monitorUrl = "https://cock.com/web-vitals-metrics";
        const data = JSON.stringify(metrics);
        console.warn(metrics);

        navigator.sendBeacon(monitorUrl, data);
      }

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

Nothing gets console logged about LCP or any other metric, and if watch my network activity no requests are made to `https://cock.com/web-vitals-metrics`
Any insight would be appreciated, thanks.

jaymitBeladiya · ‎10-23-2024

Hello @Wuzzy ,

Facing same issue. Have you found any solution for it?

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

Wuzzy · ‎11-21-2024

Sadly not, ive found out that it sooometimes works, when u use the app bridges navigation on the left, it sometimes prints out the result. Ive given up on this solution, im using other tools for metrics now that dont work amazing but get the job done.

LeoZoorix · ‎12-03-2024

Hey there,

I was facing the exact same issue with the code provided by Shopify. Unfortunately, it seems that the shopify.webVitals.onReport method isn't functioning as expected, and no metrics are being logged or sent to the specified URL. I also tried using the web-vitals package and the PerformanceObserver API to capture metrics like LCP, but neither approach worked seamlessly within the Shopify environment.

The only thing that worked for me was adding

<meta name="shopify-debug" content="web-vitals" />

in the <head> of the page. This does log the LCP and other metrics to the console, which is helpful for debugging. However, the downside is that this method doesn't allow us to send the metrics to an external URL for further analysis or monitoring.

Cheers!

jaymitBeladiya · ‎12-05-2024

Hello @LeoZoorix ,

It's now working for me. You have to perform any click event then it will print logs in console.

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

Debug web vitals not working

Debug web vitals not working

Community Blog Articles