6

I am setting up AMP for my news site. Does anyone know if there is Google Tag Manager Support? I know you can use Google Analytics. I wonder if I use GA tracking code on all /amp/ pages it will track double.

unor
  • 21,919
  • 3
  • 47
  • 121
dasickle
  • 3,658
  • 18
  • 40

3 Answers3

4

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

dasickle
  • 3,658
  • 18
  • 40
2

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

Stephen Ostermiller
  • 99,822
  • 18
  • 143
  • 364
Andrea Rapanaro
  • 31
  • 2
2

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.

Csaba Toth
  • 121
  • 3