Google Tag Manager and AMP

I originally tried adding the GTM using Glue for Yoast SEO and it did track the pages. However, that resulted in 2 AMP validation errors:

AMP Google Tag Manager validation errors

The proper way of implementing the tag as of right now is via amp-pixel or amp-analytics. I used amp-analytics tag myself. First you would add this in the head:

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

And then the tracking code goes in the body inside this tag using JSON:

 <amp-analytics type="googleanalytics" id="analytics1"></amp-analytics>

Full details can be found here:

Adding Analytics to your AMP pages


Google Tag Manager now added AMP support. All you need is to

  1. create a GTM container of type "AMP"

  2. Include the following code in <head>

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

  3. Include the following code into <body>

    <!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

Find some more info about that on Simo Ahava's blog http://www.simoahava.com/analytics/accelerated-mobile-pages-via-google-tag-manager


Not just there is a Tag Manager Support but that's the primary supported way for analytics for a while now. The older way posted by Andrea Rapanaro in 2016 used GA property identifiers. The current one is described by https://developers.google.com/analytics/devguides/collection/amp-analytics - also cited by dasickle.

Here's my take:

  1. In the HTML document header section: <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous"></script>

  2. In my _config.yml: gtag: "GTM-NPS2Q4K" (https://gitlab.com/MrCsabaToth/mrcsabatoth.gitlab.io/-/blob/master/_config.yml#L36). This is Jekyll, if you use other static site generator / SSG / framework you'd need to use the particular framework's configuration method.

  3. The actual configuration (the G tag is interpolated by Jekyll, you can simply replace it by yourself or use your preferred SSG's way of interpolation):

    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars" : {
            "gtag_id": "{{ site.ga }}",
            "config" : {
              "{{ site.ga }}": { "groups": "default" }
            }
          }
        }
      </script>
    </amp-analytics>

This even works with GDPR if you add data-block-on-consent to the amp-analytics HTML element like in https://gitlab.com/MrCsabaToth/mrcsabatoth.gitlab.io/-/blob/master/_layouts/default.html#L10

This actually might be weird for those who only have Google Analytics now and no Google Tag Manager configuration. Make sure you establish a default Workspace in Google Tag Manager, otherwise your gtag won't work. I learned that the hard way.

Tags:

Google Analytics

Google Tag Manager

Amp

Recent Posts