So you took a leap of faith and adapted your site to support the AMP (Accelerated Mobile Pages) format? This can be quite the constraint at first but it pays off in the longer term because it will make your content both more accessible on mobile devices and more visible in Google search results.
In this post, I will cover how to setup Google Analytics tracking on AMP pages with Google Tag manager.
Setup Google Analytics tracking for AMP
Within your HEAD tag, insert the following snippet:
[code lang=”html”]<!– AMP Analytics –>
Then, within the BODY tag, insert the element that will handle your Google Analytics tracking calls (pageview, event), like so:
The snippet above should cover 90% of your requirements – track a pageview for property UA-XXXXX-Y (replace with your own property ID).
Feel free to play with the triggers element by adding variables. This would be the way to add virtual URLs or custom dimensions/metrics if you’re an advanced user.
Refer to the Google Analytics for AMP documentation to explore additional cases.
There are a few caveats, however:
- Client ID tracking (and therefore User ID) – look up my colleague Simo’s post on the topic
- No AMP support for eCommerce – but then again, AMP should not handle eCommerce
- No AMP support for display features
Setup AMP page tracking using Google Tag Manager
Using Google Tag Manager (GTM) will allow you to trigger tags on your AMP pages, despite some limitations.
For GTM support, you will need to create a brand new container of a new, special type labeled “AMP” (hint hint) on top of the existing types for Web and mobile apps.
To use our container, insert the following snippet within your HEAD tag:
[code lang=”html”]<!– AMP Analytics –>
Yes, it is identical to the one you saw earlier 🙂
Then, in the BODY tag, insert the following:
[code lang=”html”]<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXX>m.url=SOURCE_URL" data-credentials="include">
"var1": "val1", "var2": "val2"
Obviously you will need to replace GTM-XXXXX with the ID of your newly created AMP container.
At this point, you can go to your container in GTM and add tags, triggers and variables. You can add a JSON element to handle datalayer variables but do pay attention to the formatting.
Whether you chose the “hard-coded” or GTM-powered approach, traffic data to your AMP pages now gets picked up by Google Analytics. So how do I recognize/analyze this traffic?
AMP reports in Google Analytics
There are a few options to view AMP traffic in Google Analytics.
Option #1: You very likely structured your AMP URLs so that they begin with /amp for instance, as seen in your Behavior > Site Content > Drilldown so that you can see how much of your traffic goes to your /amp folder.
Option #2: You use a dedicated custom dimension to track AMP status (AMP or Non AMP), which means you’ll need to use a custom report for basic metrics such as page views. This of course implies you setup that custom dimension in your tracking code or via GTM.
Option #3 is the recommended option and involves using content grouping based on the URLs of AMP pages.
In your Google Analytics view settings, go to Content Grouping options and create a new Content Group:
Add two rule definitions: Non AMP and AMP.
In the first rule (for non-AMP pages), use the settings as shown in the screenshot below:
For the second rule definition (for AMP pages), copy the first definition but this time change “does not contain” with “contains”. There, you’re done!
The beauty of Option #3™ is that it requires no extra tagging; content grouping will be automatically taken care of as traffic flows into your Google Analytics property and related views.
Using Option #3™ you get reports which you can break down by content grouping. You can now go to Behavior > Site Content > All pages and select your content grouping in the dropdown menu above the report table. This will update your report and show 2 rows: AMP and Non AMP, clearly showing the performance for each page type.
With only two rows in the table, we can check the boxes on the left of each line and then click Plot Rows in the table header. This will highlight and compare AMP pages versus non-AMP pages. As you can see in the screenshot above, AMP traffic is still negligible but i’m working on that 🙂
EXTRA CREDIT: you can apply content grouping to your Landing Pages report and see how AMP is used to acquire visitors. Cross-reference that with Channel Groupings and you’ll be golden.
There you have it, Option #3™ is a simple, effective method to see the impact of your AMP “migration” on your traffic and conversion down the line. As usual, send me your feedback in the comments!