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.
Add a comment
|
3 Answers
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:
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:
Google Tag Manager now added AMP support. All you need is to
- create a GTM container of type "AMP"
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>Include the following code into
<body><!-- Google Tag Manager --> <amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX>m.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
-
1When 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.. Jun 29, 2017 at 14:03
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:
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>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.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.
