Get some more GA4 traffic from your AMP pages

I found some missing GA4 traffic.

A long time ago we switched to GA4 from UA and immediately noticed a drop in traffic but everything was so wildly different and we were told that you couldn’t directly compare the two stats (probably because UA was so wildly inaccurate).

One thing we missed was our AMP pages. When we set up our AMP analytics it created a GTM container with a single UA tag in it, and that’s how it worked. But here’s the thing, that doesn’t work with GA4.

So how do we do that?

We put this in our HEAD:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

And then this in our BODY will give us a simple page view (remember to switch the G-code for your own G Tag ID):

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "G-QQQEEE999Q",
    "config" : {
      "G-QQQEEE999Q": { "groups": "default" }
    }
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

To test if the Google Analytics 4 (GA4) tracking is working:

1. Open an AMP page in Chrome.
2. Open developer tools.
3. Go to the “Network” tab.
4. In the “Filter” field, type “collect”.
5. Refresh the page.
6. Look for a request to a URL that starts with “https://www.google-analytics.com/g/collect”. This is the request that sends data to GA4.
7. Click on the request to view its details. In the “Headers” tab, you should see a query parameter named “_gl” with a value that includes your GA4 Measurement ID (the “G-” code).

If you see your GA4 ID, it means that the GA4 tracking is working.

How much extra traffic you’ll get depends on a lot of things, but it’s not nothing!

Official Google page and guide