Web vitals not tracking

Hi,

I am in the process of trying to get Built for Shopify badge for our app and have added the new app bridge which should allow web vitals to be tracked for our app. App bridge was implemented over a week ago and I know its done because I can see its been checked off as a task to get the built for Shopify for July requirements. I added the debug meta tag also and still getting nothing was wondering if anyone has experienced the same thing and how they solved this. Thanks

I have attached an image of how the tag looks for the app and it clearly shows the meta tag and the script tag there.

Thanks in advance

Hey @Dardan_Gashi :waving_hand: - thanks for sharing that screenshot there. I can’t say for sure why the vitals aren’t being tracked without taking a closer look at your code, but just wanted to share this link here: Web Vitals

If you’ve implemented the onReport callback function we mention there, I believe this should enable the web vitals tracking if you haven’t set that up already.

If you have, just let me know/share any code snippets you have and we can take a closer look. Hope this helps a little bit!

Hi @Alan_G , isnt the onCallback only for if I want to track web vitals on my own server? I thought having the App bridge is enough to show on the Shopify admin performance dashboard which is my goal. On the docs it says that callback is only needed for tracking on your personal server and that the script tag should be enough. vitals docs

Hey @Dardan_Gashi :waving_hand: - you’re correct on that! I was able to touch base with our devs on my end for you here and confirmed that you’d just need to add the script you shared there to your app’s head as mentioned here: Admin, installation, and OAuth performance

One thing to note though, is that to see Web Vitals pop up in Built for Shopify, your app does need to have a minimum of 100 calls over the last 28 days for the LCP and FID: Built for Shopify requirements

Let me know if I can clarify anything more on my end here. Hope this helps!

Hi @Alan_G ok great. I already had the script and meta tag in the head as per the screenshot I shared initially on this thread. So yeah I was aware of the 100 calls over 28 days issue is I dont see any history on the admin performance dashboard since adding it, so not sure what the issue is here or maybe someone in the team could take a look at our app maybe.

Our app id is 2651835 if that helps.

Would me much appreciated as this is one of the final things needed to get this badge so want to get this over and done with. Thanks in advance

No worries @Dardan_Gashi - thanks for sending that app ID over. I’ll check this with our dev team and loop back with you when I have some more info to see if we can confirm that for you.

@Dardan_Gashi - just touching base here :waving_hand:

I worked with our developers and they’ve actually confirmed with me that the
<meta name="shopify-debug" content="web-vitals"> isn’t needed in <head> - that’s just specifically for debug purposes. Just wanted to share that first!

We were also able to check the metrics on our end, and it looks like you folks were receiving web vitals data, but this stopped on March 11th.

We also noticed that when loading into the app, we’re not seeing App Bridge itself being loaded by the CDN from what we can tell. Could you double check to see that the script is being included as part of the response? Just sharing a screenshot from the network tab in Chrome in our testing that might help (this is from drops?embedded event in the admin):

I think confirming that the the App Bridge script tag pointing to the CDN is being included should resolve the Web Vitals being tracked though.

Let me know if I can clarify as always here!

Hi @Alan_G thanks for this I see. So I was loading the script after first render it seems. I have addressed this now and I can see it on the frame src now so hopefully this should be fine now. If you would not mind just having a double check just to make sure nothing else is missing from this would be much appreciated.

Thanks again!

1 Like

@Alan_G sorry to bother again but I am still not seeing vitals being tracked is there potentially some time lag before it starts showing. I released it to production just under 24 hours ago. Thanks

Hi @Alan_G , sorry for having to be a pain but I still do not see web vitals after fixing what you mentioned in this message. If I could get some support and someone to look into this please I would really appreciate it as this is the last thing we need before we get our badge. Thanks

Hey @Dardan_Gashi - no need to apologize at all and no worries!

There can sometimes be a delay in data showing up in the dashboard, but 3+ days is longer than expected. Could you confirm that the App Bridge script is being loaded in the initial HTML response (not dynamically added later via JavaScript)?

Could you also check if there have been enough merchant interactions with your app in the past few days - we’d usually need to see 100+ calls over 28 days (per the docs here).

If we can confirm that, I’m happy to check with our team again to see if we can verify whether any new vitals data is being received for your app (ID: 2651835) since your fix.

Thanks for your patience on this too - happy to keep digging into this.

Hi @Alan_G so yeah it is being loaded properly now and not using JavaScript. I am also aware of the 100+ calls over 28 days but I am more talking about how nothing new has come through to the admin dashboard and no new vitals data has come through for the app id 2651835 which is the thing of my concern. Thanks if maybe you could take a look with the developers again like last time would be much appreciated. thanks

Hi @Alan_G so actually I think web vitals are tracking but its not showing in the dashboard. So I left it over the weekend and noticed that the average number was changing every day which indicates vitals are tracking I believe. but on the dashboard there are no new entries placed into the chart. Is this an issue on your end or is something still wrong from ours? Thanks and appreciate the help:

Hey @Dardan_Gashi - thanks for the update on this. I’ll do some more digging and loop back with you here - that does seem odd for sure. If you remember - do you know what the FID rate you were seeing before it hit 4.1 ms was? Just want to see if I can track things on our end here with that info.

Hi @Alan_G so I dont have the FID rate before as I dont remember but I can see all averages are changing every day. for example the LCP today is 5.42s but was 5.26s yesterday or the day before so not sure what is happening here. In addition to this I have also noticed that the debuy tag that I added to be able to debug the vitals are also not showing anything in the console of the app when loading. Is this another thing which may be broken? Thanks again for looking into this!!

Thanks @Dardan_Gashi for confirming that! Just wanted to reach out to confirm we’re still looking into this for you, I’ll loop back with you once I have more info to share on my end here :slight_smile:

1 Like

Hey @Dardan_Gashi - just following up on this. We did some more digging into this on our end and we think the defer script you’re using that’s pointing to app-bridge.js might be related to the issue. On our end, it actually looks like Web Vitals aren’t being tracked. Could you try removing this line here:

Defer isn’t currently supported on our end, so we think this could be why the Vitals aren’t being reported. Let me know if this resolves the issue or if you’re still seeing the issue pop up and we can keep looking into this for sure.

Hi @Alan_G but the whole point of using this line is to have the new app bridge to be able to track vitals. And if I don’t have defer there then the whole install flow breaks because the app bridge loads before Oauth which is causing problems. Would like some advice here as that is the issue if I remove defer. Thanks

Hey @Dardan_Gashi - I think I might have been unclear in my explanation there, just wanted to clarify we’d just need to remove defer="defer" from the script tag and not the whole line per our error message here:

I definitely get where you’re coming from on this though - would you be able to share what OAuth issues you are running into/were running into before setting up the defer tag there? Let me know if you’d like to share the full script code you have for the App Bridge component and I can send you a DM and help that way too (just don’t want to share a full code base publicly)

Hi @Alan_G could we carry this on over DM so I can share code and videos of what happens when the defer is not there? Thanks appreciate the help.

1 Like