How To Track AMP Pages In GA

If you're reading this you've either considered or worse you've jumped on the mobile first bandwagon and adapted your site to support the AMP (Accelerated Mobile Pages) format.

Even more unforgivable, if you've been following our blog for a while you'd be familiar with how much I'm opposed to the current version of AMP and if you have not followed our blog shame on you.

AMPs are 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. Since naturally Google would show AMPs as a preference for mobile searchers.

Limitations of AMP

While that has its benefits for those who have a more mobile-centric audience and want to improve mobile rankings AMP has its limitations. Apart from my biggest gripe, that Google does not simply serve your AMP pages but rather a self-hosted copy, AMP does not support JavaScript by default. So yes any javascript and code on your original page will not work on your AMP version. Which includes Google Analytics and other Google product tags.

Which is a bit of a nightmare for digital marketers, why adopt this technology to have no insight into if it's worthwhile, thanks, Google! But all is not lost, if you are one of those AMP implementors then you're in luck. Today I will cover how to set up Google Analytics tracking on AMP pages without and with the help of Google Tag manager.

How to set up Google Analytics tracking for AMP

Housekeeping rules are not set so it's up to you. You can choose to use a dedicated Google Analytics property to track traffic to AMP pages separately if that's your cup of tea. However, it will probably make more sense to keep using your current property. At any rate, you’ll need to adjust your tracking code to go around the lack of native support for Javascript in AMP.

Within the HEAD tag of ALL your pages, insert the following snippet:

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

Then, within the BODY tag ALL your pages, insert the element that will handle your Google Analytics tracking calls (pageview, event), like so:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

Protip! 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.

How to set up Google Analytics with GTM for AMP

If you have a closed system and would like to prevent having to hack into your backend to make chaNges in future using Google Tag Manager (GTM) will allow you to trigger tags on your AMP pages, despite plenty limitations. For GTM support, you will need to create a brand new container of a new, special type labelled “AMP” (if you want to be creative with your name feel free) on top of the existing types used for your website and mobile apps. Once you've created the container it's time to set it up. To use our container, insert the following snippet within your HEAD tag of all pages:

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

Then, in the BODY tag of all pages, insert the following:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXX>m.url=SOURCE_URL" data-credentials="include">
<type="application/json">
{
"vars": {
"var1": "val1", "var2": "val2"
}
}
</script>
</amp-analytics>

Remember 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 data layer 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 get picked up by Google Analytics.

So where do you find these traffic stats?

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 Behaviour > 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. 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!

There are a few options for more advanced analysis but let's keep it simple for now and I'll take you through that at a later stage.

Tracking made easy

Simple as that, you will now be tracking page views for AMP and have it sent directly to your Google Analytics account.

Contact us

If you want to know more about AMP pages and Tracking your site don’t be shy we’re happy to assist. Simply contact us here

Tags: Blog, Data Analysis, google analytics, google tag manager