In this article, you will learn to set up AMP on your WordPress website and track traffic on AMP pages in Google Analytics. Google also strongly recommend, making your website AMP compliant.
AMP is an open-source mobile page format that is used to build mobile web pages with static content that loads instantly on mobile devices.
AMP pages (.amp.html) are similar to HTML pages but use few different markups, extra rules, and restrictions.
The Accelerated Mobile Page (or AMP page) is a very trimmed down and restricted version of your normal web page (more or less like a text-only version).
It is trimmed down in the sense that, AMP removes a lot of styling from the page, removes unnecessary widgets and drastically limits the use of JavaScript on a web page which can cripple your analytics.
AMP pages could load on average four times faster than the corresponding non-AMP pages.
Since AMP pages are delivered from Google AMP CDN, when accessed from search results, there is no need to deliver them via your CDN. So if you are using a CDN like Cloudflare, then disable it for AMP pages via ‘Page Rules’.
Note: If you are using Cloudflare, then disable Rocket Loader (under the Speed Tab). Otherwise, your AMP pages won’t validate.
The use of Rocket Loader alone can create a lot of AMP validation related errors.
You don’t need to worry about creating an AMP page from scratch unless you are a web developer. But I think, it will benefit you, if you develop a basic understanding of the various components of an AMP page.
Following is an example of a basic AMP HTML page, along with its components (which have been numbered for easy reference).
You can see the various AMP HTML elements, by viewing the source code of a AMP page, in your desktop web browser:
Pay special attention to the highlighted and numbered code:
Every AMP page must start with following lines of code:
#1 <!doctype html>
#2 <html amp>
Note: a AMP page must contain <head> and <body> tags. These tags are optional in HTML.
The head section (<head>….</head>) of the AMP page must contain following required mark-ups:
This is AMP Analytics tag which is used to add AMP Analytics functionality to a AMP page. Add this tag in the head section (<head>…..</head>) of all AMP pages before the AMP JavaScript library.
Note: This tag is not required for a valid AMP page but is required for setting up AMP Analytics.
This tag is used to add the AMP style boilerplate code. Following is an example of AMP style boilerplate code:
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
#9 <script type=”application/ld+json”>
This tag is used to implement schema.org news article meta detail. It must also include an image of at least 696 pixels. Here is what this metadata may look like:
<script type="application/ld+json">
{
"@context": "http:\/\/schema.org",
"@type": "Article",
"mainEntityOfPage": "https:\/\/www.optimizesmart.com\/optimize-smart-web-analytics-tool-box\/",
"publisher": {
"@type": "Organization",
"name": "Optimize Smart",
"logo": {
"@type": "ImageObject",
"url": "https:\/\/www.optimizesmart.com\/wp-content\/uploads\/2016\/03\/optimize-smart-Twitter-logo.jpg",
"width": 58,
"height": 60
}
},
"headline": "Optimize Smart Web Analytics Tool Box",
"datePublished": "2015-08-18T21:00:58+00:00",
"dateModified": "2015-10-02T13:08:55+00:00",
"author": {
"@type": "Person",
"name": "Himanshu"
},
"description": "In this article I am going to share the web analytics tools I use and recommend.",
"image": {
"@type": "ImageObject",
"url": "https:\/\/www.optimizesmart.com\/wp-content\/uploads\/2016\/03\/amp-book-image.jpg",
"width": 696,
"height": 947
}
}
</script>
Note: Including schema.org metadata in the head section of AMP pages is optional but is highly recommended. Without which, you won’t get a perfectly valid AMP page.
#10 <style amp-custom>
This tag is used to inline all of your CSS into the head section. No external stylesheets are allowed on AMP pages.
#3 You can not embed forms on AMP pages as the <form> tag is not allowed.
#4 Iframes can be embedded on AMP pages but the <iframe> tag need to be replaced with <amp-iframe>. What that means, you can embed YouTube videos on AMP pages.
#6 The use of <script> tag is not allowed on AMP pages unless the type is ‘application/ld+json’. What that means, virtually no JavaScript is allowed on AMP pages including the Google Analytics tracking code and/or Google Tag Manager code.
However, AMP pages can tolerate the addition of GA and/or GTM tracking codes to it won’t crash and the tracking will also seem to work. But then the AMP page won’t be a perfectly valid AMP and Google will not show such AMP pages to mobile users:
Setting up AMP on a WordPress Website
Follow the steps below:
Step-1: Make sure that you have got a staging website where you can test the AMP set up before you deploy it on your live website. This is because when you enable AMP on your WordPress website, it won’t add any styling on your AMP pages.
In other words, it won’t use your CSS and as such, your website may look very different on AMP pages. So you would need to change the styling of your AMP pages, to give them the look and feel of your website before you make them live.
You also need to make sure that you have got valid AMP pages with no warnings or errors in Google search console and/or Google Developers console.
Once you activate this plugin, all WordPress posts on your website would have dynamically generated AMP versions, available. However, you won’t see the AMP pages by default. They will be shown by Google to website users, once they are indexed, and provided they are valid AMP pages.
You can, however, access the AMP version of a web page, on your desktop, by adding /amp/ at the end of your blog post URL. For example, if your blog post URL is:
Note: Currently the ‘AMP plugin’ works only on WordPress posts and not on pages and archives.
Step-3: The AMP plugin has got no settings available in the WordPress admin panel, through which you can easily change the styling of AMP pages, edit the existing AMP markup or add any tracking code. You would need to modify the AMP plugin files to complete such tasks.
However, there is a plugin called ‘Glue for Yoast SEO & AMP‘ through which you can easily change the styling of AMP pages and also add tracking code to the AMP pages. However, I don’t recommend adding any tracking code through this plugin.
Note: Use the ‘Glue for Yoast SEO & AMP’ plugin, only when you are already using the standard Yoast SEO plugin and the AMP plugin (I recommended above). Otherwise, the glue plugin may throw errors on your website.
Step-4: Once you activated the glue plugin, you will see a new menu item in the Yoast SEO plugin called the ‘AMP’:
Step-5: Navigate to the AMP menu, click on the ‘Design’ tab and add styling to your AMP pages:
Make sure to add the AMP icon image and the default image for your blog post, otherwise, your AMP pages won’t validate.
Step-6: Click on the ‘Save Changes’ button.
Previewing your AMP page
To preview an AMP page, just copy-paste the AMP page URL into your desktop web browser and press the enter key.
If you are going to use the ‘AMP’ plugin, then all of your AMP pages would contain /amp/ at the end of their URL:
Having said that, it is not necessary that every AMP page on the internet would/should contain /amp/ somewhere in the URL. AMP page URL can also end with .amp.html or they may not contain the word ‘amp’ at all, anywhere in the page URL.
Follow the steps below to validate your AMP pages:
Step-1: Load the AMP web page in your desktop chrome browser.
Step-2: Right-click on the page and select ‘Inspect’. This will open the chrome developer console window.
Step-3: Click on the ‘console’ tab.
Step-4: Add #development=1 at the end of your AMP page URL. For example https://www.optimizesmart.com/advanced-conversion-funnel-analysis-for-the-nerds/amp/#development=1
Step-5: Now reload the webpage and check for validation message(s) in the console window:
If the page is a perfectly valid AMP, you will see ‘AMP validation successful‘ message in the console. Otherwise, you will see the message: ‘AMP Validation had errors’:
To diagnose validation errors, click on the URL for which the developer console has shown error. You will also see following similar helpful messages, regarding what is not correct.
The tag ‘iframe’ is disallowed.
The mandatory attribute ‘src’ is missing in tag ‘amphtml engine v0.js script’. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
The mandatory attribute ‘async’ is missing in tag ‘amphtml engine v0.js script’. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
The parent tag of tag ‘script’ is ‘body’, but it can only be ‘head’. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
The other way of validating AMP pages is through a structured data testing tool.
Step-2: Click on the ‘Fetch URL’ link as shown below:
Step-3: Copy-paste the URL of an AMP page into the textbox and then click on the ‘Fetch and Validate’ button:
Step-4: Select ‘AMP Articles’ from the drop-down menu as shown below:
The ‘All good’ status means, your AMP page is perfectly valid. If the page is not a perfectly valid AMP, you will then see errors/warnings, instead of ‘All good’,
If some of your AMP pages have already been crawled and indexed by Google, then you can also validate such pages, through Google Search Console (Navigate to Search Appearance > Accelerated Mobile Pages):
This canonical tag tells Google, that the AMP page has got a corresponding non-AMP page and it is not a standalone AMP page. This tag also prevents your website from being penalized for duplicate contents, as the AMP page has got exact same contents as its corresponding non-AMP page.
The standalone AMP page is one that does not have a non-AMP version.
The AMP WordPress plugin automatically adds this canonical tag on every AMP page, which has got a corresponding non-AMP version.
Make sure that your AMP pages contain this canonical tag. If you are not using the AMP WordPress plugin to create AMP pages, then you may need to manually add such canonicals tags on AMP pages.
Step-2: Check the source code of the corresponding non-AMP page (your regular web page) and look for the following similar line of code:
This link tag tells Google, that your web page has got a corresponding AMP version available. Without using this tag, Google will have a hard time finding, crawling and indexing your AMP pages.
The AMP WordPress plugin automatically adds this link tag on every non-AMP page, which has got a corresponding AMP version. If you are not using the AMP plugin to create AMP pages then make sure that your non-AMP pages contain this ‘link’ tag.
Step-3: For Standalone AMP pages, use the self-referencing canonical tag.
For example, if the URL of your standalone AMP page is:
https://www.mywebsite.com/social-tracking/amp
Then add following self-referencing canonical tag in its source code:
Google will find, crawl and index your AMP pages through your regular (non-AMP) pages over time, provided you are using the link tag, I mentioned above. So you don’t have to create and add a separate sitemap for AMP pages.
But there is no harm in creating and submitting one, esp. if you don’t find your AMP pages getting crawled and indexed even after a week.
One quick way to let Google know about your amp pages is by using the Fetch as Google settings in the search console:
Once your AMP pages get crawled by Google, navigate to ‘Google Search Console’ and then click on ‘Accelerated Mobile Pages‘ report under ‘Search Appearance‘ menu:
Once you conclude that, all of your AMP pages are perfectly valid and are working and looking the way, they should, then set up the AMP on the live website and test it again.
Introduction to amp-analytics tag
You can track users’ interactions with AMP pages through the ‘amp-analytics’ tag. This tag provides built-in support for Google Analytics.
The amp-analytics tag captures analytics data from AMP pages. Here is how this tag looks like:
The <amp-analytics>……</amp-analytics> tags are used to define what data to measure and send to an analytics server. These tags are used in the body section (<body>…</body>) of an AMP page.
The data that needs to be collected and sent is specified in a JSON configuration object.
For example, following JSON object collect and send pageview data to Google Analytics:
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Here the code between <script type=”application/json”> and </script> is the JSON object and ‘vars’, ‘triggers’ and ‘request’ are called <amp-analytics> configuration Objects.
In order to use the JSON object for collecting and sending pageview data on an AMP page, you need to:
Add your GA tracking ID to the JSON object.
Remove all the HTML comments from the JSON object, as comments are not allowed on AMP pages.
Here is what I mean:
So your final AMP analytics code would look like the one below:
Note: Google recommends to set up and use separate GA property for tracking the website usage data for AMP pages.
The current capabilities of AMP analytics are very limited in comparison to standard Google Analytics. However, Google has promised to increase its capabilities over time.
Tracking AMP pages in Google Analytics
Follow the steps below:
Step-1: Create a new Google Analytics property (name it something like [Your Website Name] AMP) by navigating to Admin > Property > Create New Property in your GA view:
You use this new GA property to track only the traffic from AMP pages. Google also recommends setting up a different GA property for tracking AMP pages.
Step-2: Note down the Tracking ID of the new property, by navigating to: Admin > Property > Property Settings:
You would need this tracking ID later while setting up a JSON object for collecting and sending pageview data to Google Analytics.
Step-3: In your WordPress admin panel, navigate to Plugins > Editor
Step-4: Select ‘AMP‘ as the plugin to edit from the drop-down menu and then navigate to the file named ‘amp/templates/single.php’
We are now going to edit this AMP plugin file. Take a backup of this file before you add/edit any code.
Step-5:Add the following code in the head section of the plugin file (single.php):
AMP pages are basically created for reading purposes. Hence they work well for publishing websites and blogs. But not so good for feature-rich web pages of ecommerce websites. AMP pages provide little Ad support. If you run an ecommerce website, then I would suggest not setting up AMP. Make a responsive website, which loads very fast on mobile devices. Forget about AMP.
If you run a blog or publishing website then consider using AMP.
My understanding of AMP is that it will not get widespread adoption by webmasters for 3 simple reasons:
#1 AMP requires that you remove a lot of features/functionality from your regular web pages, just to make it super fast to load on mobile devices. It forces you to virtually eliminate the use of JavaScript and put many restrictions on HTML and CSS.
Now imagine a JavaScript-free website. What interactivity can it provide to users? Absolutely nothing! Imagine, you can’t embed a simple form on a web page. Well, this is the case, if you are going to use AMP. This is because AMP does not allow the use of <form> tag. You are basically, more or less, will be serving a text-only version of your website, to your users.
Now, this may not be a big issue, if all you serve is, static pages and your website is primarily a blog/news site. But often the pages, that struggle the most on mobile devices, in terms of speed, are feature-rich web pages, the one which is commonly used on ecommerce websites and where AMP falls flat on its face.
#2 AMP technology demands, creation of AMP pages for mobile devices, in addition to regular web pages for desktops which could be equivalent to creating and managing two different versions of your website. These AMP pages use some special markups in addition to the regular HTML markups. Many web developers have no idea, what AMP is and how to create AMP pages, while still maintaining the required features and functionality.
#3 The AMP analytics recommended by Google is a different beast altogether. Get ready to learn an entirely new Google Analytics, if you want to tame AMP analytics.
AMP analytics is nothing like Google Analytics you know today. It uses JSON objects to define the data, that needs to be collected and sent to the analytics server. It uses its own tag and configuration objects. Every type of tracking, from page tracking to event tracking, is implemented very differently in AMP analytics. Best of luck, replicating your entire regular GA tracking via AMP analytics.
For the vast majority of developers out there, the standard ‘Google Analytics Development environment’ is still a mystery, let alone, AMP analytics. So for many, tracking AMP pages effectively, is going to be nothing short of a nightmare. However, this is just my opinion. I have outlined the pros and cons of AMP technology to you. Now it is up to you, to decide whether setting up AMP, is worth the investment.
Other articles on specialized tracking in Google Analytics
Get weekly practical tips on GA4 and/or BigQuery to accurately track and read your analytics data.
My best selling books on Digital Analytics and Conversion Optimization
Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.
Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.
Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW!
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.
Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.
About the Author
Himanshu Sharma
Founder, OptimizeSmart.com
Over 15 years of experience in digital analytics and marketing
Author of four best-selling books on digital analytics and conversion optimization
Nominated for Digital Analytics Association Awards for Excellence
Runs one of the most popular blogs in the world on digital analytics
Consultant to countless small and big businesses over the decade
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of all the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
