Takes 5 mins
Accelerated Mobile Pages (AMP) are not a new concept. You must have heard about it, and worked on implementing it for your website as well in the last year and a half. For all those who are still discovering AMP, let me give you a very brief idea of what it exactly is. AMP is an open-source technology that allows your website’s static content to be rendered instantly on mobile devices. In simpler language it means that this technology is basically a stripped-down form of HTML that is meant to help the mobile pages load really fast, improving the user experience on mobile.
What makes it so fast? That is something that a lot of digital marketers and companies have talked about. Moz has done a great job explaining all that you need to know about AMP in one of their Whiteboard Fridays.
At the Google I/O 2017 conference, Google announced that more than 2 billion AMP pages have been published by 900,000 domains and these pages are now loading twice as fast resulting in a significant improvement in the traffic as well as the conversions.
Measuring the performance of such pages to be able to make constant improvements and derive actionable insights is critical and hence, in this blog post, we are going to focus on setting up the tracking of these Accelerated Mobile Pages in Google Analytics.
AMP & Google Analytics:
AMP allows us to track user activity in google analytics through the amp-analytics tag. You can track your AMP pages and user actions accurately in Google Analytics with and without GTM. The post is therefore further divided into the following two parts:
-
Using AMP analytics library [Without GTM]
-
Using GTM for Tracking AMP [With GTM]
Using AMP analytics library [Without GTM]
AMP doesn’t support javascript and so we, unfortunately, cannot use the analytics.js library to track AMP pages. Although, we can use the amp-analytics library which is provided by amp project.
<script async custom-element=”amp-analytics” src=“https://cdn.ampproject.org/v0/amp-analytics-0.1.js“></script>
Let us take a look at basic pageview tracking setup and event tracking setup for AMP pages in Google Analytics without any dependency on GTM:
1. Basic page view tracking:
To implement basic pageview tracking, the following code needs to be implemented on all the AMP pages:
The above-given snippet should be implemented after the AMP analytics library code snippet. All you have to do is insert the property id of your Google Analytics and the page title value in the snippet. Once this tracking code is set up, your basic pageview tracking is implemented and you can start analyzing the basic performance of your AMP pages.
Additional tip: We can also take advantage of custom dimensions in Google Analytics for tracking AMP pages.
For e.g, I want to pass the author’s name with every pageview. As we do normally in Google Analytics, using the index value of Custom Dimension, we can start capturing the author name as desired. In the below-given code replace the author’s name with the actual author’s name.
2. Event tracking:
Custom event tracking allows us to track detailed user behavior on the AMP Pages. To track events in AMP, use the tracking code given below:
Define the eventCategory and event action values as per your reporting requirements that you are looking to track in your Google Analytics. Furthermore, we shall also have to replace the
value of selector with CSS selector of that specific element which we want to track and if you want to track multiple elements, you can do so by inserting selectors with semicolons. We can also send noninteractive events in Google Analytics while setting up the tracking for AMP pages. To do so, we need to add the below JSON in the JSON of event tracking right after the vars key:
Using GTM for Tracking AMP Pages:
To get started, create a new container for AMP in Google Tag Manager.
Now, to add GTM on the amp, we need to install two code snippets on all amp pages as you can see in the screenshot below:
Now, let us take a look at the basic pageview tracking setup and event tracking setup for AMP pages in Google Analytics with Google Tag Manager.
1. Basic page view tracking:
Connect a GTM tag with addition of the GTM code to start with pageview tracking as shown in the screenshot below:
Add your Google Analytics property ID as the tracking ID in the UA tag. Add default All Pages pageview trigger as a trigger of this pageview tag and voila, you are all set to start tracking the AMP pages with the help of Google Tag Manager
2. Event tracking:
Event tracking on the AMP page is the same as the normal page event tracking. We just need to configure one UA tag with track type as event and have to provide category, action, and label for same.
Going further, we need to add a trigger to be able to send event data in Google Analytics and set triggers like click trigger, scroll trigger, and visibility of elements so as to successfully fire this event tag.
By creating and adding triggers as per your tracking requirements, the tags will start sending data to Google Analytics when the trigger conditions are met.
Conclusion:
We’ve covered the basic implementation of tracking AMP Pages in Google Analytics. Over the next couple of weeks, we will be focusing on various analytics quick hacks and advanced AMP tracking in Google Analytics and the benefits of doing so, with a series of blogs. So stay tuned to this space to read up more on this topic.
If you are facing any issues in setting up your AMP tracking in Google Analytics or if there is a topic in particular that you’d like us to cover in our series of blogs on AMP tracking in Google Analytics, please feel free to let us know in the comment section below.
31 Comments. Leave new
Nice and an informative article!
Hey Akshay! Thanks for the feedback. We are glad you found this blog resourceful.
Great information. Since last week, I am gathering details about AMP experience. There are some amazing details on your blog which I didn’t know. Thanks.
Hey Amanda! Thank you for the feedback. We are happy to know that you found this blog insightful.
Hi Ashish,
Great article, clear and well-written! Thank you for sharing.
I have an doubt. When I implemented amp analytics integration same as you said above for one of my client’s website. I found one error in my console “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” , What does it indicate? Or have you heard about this error. Can You help me out of this?.
Thanks
Hi Aniket, you’re welcome. Glad you enjoyed the post. To answer your query, if you are testing the amp page in the localhost then the “Access-Control-Allow-Origin” header needs to be set to your own domain. If you are testing the page through the AMP CDN then you need to set the “Access-Control-Allow-Origin” header to the URL of the CDN. Your code should either return your domain or echo back the Origin header if it is set and recognized as an AMP CDN. The “AMP-Access-Control-Allow-Source-Origin” is always set to your own domain. I’d recommend you to refer this link for detailed info.
Thanks a lot for an amazing article. Because it helped me solve my amp analytics problem which I was facing since 2-3 days.
Welcome Rasika! We’re glad that you found our blog helpful. Keep watching this space for more content.
Great Article! Am i the only one who cannot copy the code?
Hey Mila, glad you found this article resourceful. These are images of the codes & not copiable. Please do let us know which code you are trying to copy & we shall send it across to you on your email ID.
Google analytics is important for the business website. You share the information is absolutely correct. I find it is really useful for me. This was an excellent article. It has some valuable content on this topic. Thank you for compiling it into an easy to read and well-written post.
Hey Martin! Thanks a lot for your feedback. We are glad you find our blogs resourceful!
Hi, can you describe how to use timing Track Type in AMP container? In MAP you have 4 track types – page view, event, social and TIMING. How to configure it? What is VAR?
Hi Marcin, User Timing is particularly useful for developers to measure page load time, page download time, Content Load Time and Server Response Time and more.
Category: A string for categorizing all user timing variables into logical groups (e.g. ‘Server Dependencies’)
Var: A string to identify the variable being recorded (e.g. ‘load’)
Value: The number of milliseconds in elapsed time to report to Google Analytics (e.g. 20)
Label: A string that can be used to add flexibility in visualizing user timings in the reports (e.g. ‘Google CDN’)
Hi, great article. Do you have any more posts about GTM with AMP? You mention that you’ll be doing a series on it, but I can’t find anything else on your blog. It would be a good topic to go into as there really is a shortage of resources for this online. Thanks!
Hey Ruth, Thanks for your feedback. We are glad you found this blog resourceful. We are working on fresh content & we have a couple of blogs on AMP coming up as well. Watch this space for updates & you can also subscribe to our blogs so that you don’t miss out on any new blogs that we publish.
Nice informative information, I have got a lot of information on this article.
Really it will help me a lot, thank you for sharing this wonderful information.
Your article is so nice, I have got a lot of information on this article.
Really it will help me a lot, thank you for sharing this wonderful information.
great AMP coding
Thank you Mia. We are happy that you found our blog resourceful!
could you please help me in implementation of amp to non amp page.
my scenario is from amp pages some non amp pages opened and there is form for generating leads so i want on that lead generation its generated from amp pages…how to implement please suggest me….
Hi Nilam, to find the users who are coming from AMP page to Non-AMP page to submit the lead. we can simply use the landing page dimension in Google Analytics, where the condition is to include the sessions having the URL of the AMP page and Datasource equals AMP.
An exciting program!
It’s very useful for me to develop in the future
Keep writing the same article
Thanks for reaching out to us and giving positive feedback. Keep looking into the space for updates.
Thanks for your writing!
It’s very useful for users. They will learn how to analyze mobile pages in Google.
It’s very important if you are a SEOer
Hi Thanh, Thanks for the feedback! Glad you found the blog resourceful.
So it’s impossible to track events of amp pages using the same container as non-amp pages? Mandatory to create a new container for amp? I was looking for some solution using which we could manage everything (amp and non-amp) in a single container. Please let me know if there is any solution.
Thanks for reaching out. It is not possible to implement the AMP via non-amp GTM container. As amp pages do not support javascript, it is not possible to implement it through the non-amp container.
Hope this helps!
Thanks for sharing this information.
Thanks Alex. We’re glad you liked our blog.
This site really has all of the info I wanted concerning this subject and didn’t know who to ask. |