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.

Improve this question

3 Answers 3

Reset to default
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

Improve this answer
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

Improve this answer
1
  • 1
    When I try this, I get the following error "Fetch API cannot load googletagmanager.com/……ost%3A8080%2Fde-de%2Famp&__amp_source_origin=http%3A%2F%2Flocalhost%3A8080. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled..
    – Einar Ólafsson
    Jun 29, 2017 at 14:03
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.