Finally, You can Collect Web Vital metrics from AMP pages using Google Analytics

If you don't know already, You can monitor your site's Web Vitals using Web-vitals script. Hooking it with the Web-Vitals-Report app, you have easy monitoring for site performance.

However, You can't run these scripts in AMP pages as 3^rdParty Scripts are a no-no. So there was no easier way to properly collect web vital metrics until now.

Recently AMP project started providing vitals like CLS, LCP and FID as performance variables. When I tried to implement this in my blog I had a couple of problems.

1) Google analytics Event values should be an integer. CLS, LCP, FID values will most likely have decimal points. This means the entire event will be dropped in google analytics.
2) If I wanted to use fractions, then I should use Google Analytics G4. Which is still in alpha and no official support from AMP.

So the obvious option I had was to submit a PR that would translate these values into something Google Analytics can understand. Thankfully the team accepted it. So here is what you have to do.

If you want to capture CLS metrics, You need to include the google analytics snippet for AMP as shown below.

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
          "vars": {
            "account": "👉 Provide site tracking ID here (e.g. UA-XXXXX-Y) 👈"
          },
          "triggers": {
            "capture CLS": {
              "on": "visible",
              "request": "event",
              "vars": {
                "eventCategory": "Web Vitals",
                "eventAction": "CLS",
                "eventLabel": "${clientId}-${pageViewId}-CLS",
                "eventValue": "$CALC(${cumulativeLayoutShift},1000,multiply,true)"
              }
            }
          }
        }
</script>
</amp-analytics>

Also, don't forget to set the tracking ID.

You can read the detailed write-up at Collect Core Web Vitals from AMP pages using Google Analytics @ raja.anbazhagan.dev