Provide examples to collect Web Vitals from AMP enabled Websites using GA and GTM

I use Google Tag Manager for AMP enabled wordpress site. And it currently has a generic page view tracking thanks to Google Site Kit Plugin.

I can’t place web-vitals script from GTM anymore as it is not supported in AMP container. But I recently found out that you can use amp-analytics with built in variables like this.

<amp-analytics type="googleanalytics">
	<script type="application/json">
        {
          "vars": {
            "gtag_id": "UA-XXXXXXXXX-X",
            "config": {
              "UA-XXXXXXXXX-X": {
                "groups": "default"
              }
            }
          },
          "triggers": {
            "default pageview": {
              "on": "visible",
              "request": "pageview",
              "vars": {
                "title": "{{title}}"
              },
              "extraUrlParams": {
                "lcp": "${largestContentfulPaint}",
                "cls": "${cumulativeLayoutShift}",
                "fid": "${firstInputDelay}"
              }
            }
          }
        }	
	</script>
</amp-analytics>

But honestly, I have no idea how this value gets mapped on the google analytics. Also, I don’t have enough knowledge to fit the same setting in Google Tag manager.

So If you could add instructions for AMP enabled websites as well it would be a great addition to the documentation.

The AMP enabled websites are only 0.1% of total websites in the web. But people like me switched to AMP mainly for Core-Web-Vitals benefit. So If you could provide a consistent way to test the results, It would be helpful.

[raja-anbazhagan]

And for Google Tag Manager for AMP, the AMP Variables setup in GTM escapes the $ signs by default.

Guess we can ignore GTM for now.

[philipwalton]

Sorry for the slow response. I’m actually not familiar with how AMP reports this data through GTM either. @kristoferbaxter any idea who we can route this to?