AMP Google Analytics Tracking – Learn to track AMP pages
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.
What is Accelerated Mobile Page (AMP)?
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.
Components of an AMP page
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:
#3 <meta charset=”utf-8″>
#4 <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”>
#5 <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
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.
#6 <link rel=”canonical” href=”https://www.optimizesmart.com/optimize-smart-web-analytics-tool-box/“/>
This canonical tag tells Google, where to find the corresponding HTML version of the AMP page.
#7 <script async src=”https://cdn.ampproject.org/v0.js”></script>
This script is used to load the AMP JavaScript Library.
Make sure that the AMP analytics tag is used before the AMP JavaScript library. Otherwise, AMP analytics tracking won’t work. For example:
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
#8 <style amp-boilerplate>
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>
You can find more details about creating this metadata from Enabling Rich Snippets for Articles
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.
Following is an example of AMP CSS:
<style amp-custom>
/* Merriweather fonts */
@font-face {
font-family: 'Merriweather';
src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.svg#merriweatherregular') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Merriweather';
src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.svg#merriweatheritalic') format('svg');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Merriweather';
src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.svg#merriweatherbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Merriweather';
src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.svg#merriweatherbold_italic') format('svg');
font-weight: 700;
font-style: italic;
}
/* Generic WP styling */
amp-img.alignright {
float: right;
margin: 0 0 1em 1em;
}
amp-img.alignleft {
float: left;
margin: 0 1em 1em 0;
}
amp-img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption.alignleft {
margin-right: 1em;
}
.wp-caption.alignright {
margin-left: 1em;
}
.amp-wp-enforced-sizes {
/** Our sizes fallback is 100vw, and we have a padding on the container; the max-width here prevents the element from overflowing. **/
max-width: 100%;
}
.amp-wp-unknown-size img {
/** Worst case scenario when we can't figure out dimensions for an image. **/
/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
object-fit: contain;
}
/* Template Styles */
.amp-wp-content,
.amp-wp-title-bar div {
max-width: 600px;
margin: 0 auto;
}
body {
font-family: 'Merriweather', Serif;
font-size: 16px;
line-height: 1.8;
background: #fff;
color: #3d596d;
padding-bottom: 100px;
}
.amp-wp-content {
padding: 16px;
overflow-wrap: break-word;
word-wrap: break-word;
font-weight: 400;
color: #3d596d;
}
.amp-wp-title {
margin: 36px 0 0 0;
font-size: 36px;
line-height: 1.258;
font-weight: 700;
color: #2e4453;
}
.amp-wp-meta {
margin-bottom: 16px;
}
p,
ol,
ul,
figure {
margin: 0 0 24px 0;
}
a,
a:visited {
color: #0087be;
}
a:hover,
a:active,
a:focus {
color: #33bbe3;
}
/* UI Fonts */
.amp-wp-meta,
nav.amp-wp-title-bar,
.wp-caption-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
font-size: 15px;
}
/* Meta */
ul.amp-wp-meta {
padding: 24px 0 0 0;
margin: 0 0 24px 0;
}
ul.amp-wp-meta li {
list-style: none;
display: inline-block;
margin: 0;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
ul.amp-wp-meta li:before {
content: "\2022";
margin: 0 8px;
}
ul.amp-wp-meta li:first-child:before {
display: none;
}
.amp-wp-meta,
.amp-wp-meta a {
color: #4f748e;
}
.amp-wp-meta .screen-reader-text {
/* from twentyfifteen */
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.amp-wp-byline amp-img {
border-radius: 50%;
border: 0;
background: #f3f6f8;
position: relative;
top: 6px;
margin-right: 6px;
}
/* Titlebar */
nav.amp-wp-title-bar {
background: #0a89c0;
padding: 0 16px;
}
nav.amp-wp-title-bar div {
line-height: 54px;
color: #fff;
}
nav.amp-wp-title-bar a {
color: #fff;
text-decoration: none;
}
nav.amp-wp-title-bar .amp-wp-site-icon {
/** site icon is 32px **/
float: left;
margin: 11px 8px 0 0;
border-radius: 50%;
}
/* Captions */
.wp-caption-text {
padding: 8px 16px;
font-style: italic;
}
/* Quotes */
blockquote {
padding: 16px;
margin: 8px 0 24px 0;
border-left: 2px solid #87a6bc;
color: #4f748e;
background: #e9eff3;
}
blockquote p:last-child {
margin-bottom: 0;
}
/* Other Elements */
amp-carousel {
background: #000;
}
amp-iframe,
amp-youtube,
amp-instagram,
amp-vine {
background: #f3f6f8;
}
amp-carousel > amp-img > img {
object-fit: contain;
}
.amp-wp-iframe-placeholder {
background: #f3f6f8 url(https://www.optimizesmart.com/wp-content/plugins/amp/assets/images/placeholder-icon.png ) no-repeat center 40%;
background-size: 48px 48px;
min-height: 48px;
}
td,
th {
text-align: left;
}
a,
a:active,
a:visited {
text-decoration: underline;
}
</style>
Note: Every AMP page can have only a single embedded stylesheet.
To learn more about styling your AMP pages, read this article: https://www.ampproject.org/docs/guides/responsive/style_pages.html
Overview of what is allowed and not allowed on AMP pages
Most HTML tags can be used in AMP HTML.
However certain tags must be replaced with their AMP equivalent. For example, image tags (<img>) must be replaced with equivalent <amp-img> tags:
<amp-img src=”https://www.optimizesmart.com/wp-content/uploads/2016/03/optimize-smart-Twitter-logo.jpg” width=”32″ height=”32″ class=”amp-wp-site-icon”></amp-img>
#2 HTML Comments are not 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.
#5 Open graph protocol and twitter cards metadata is allowed 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.
Step-2: Install and activate the AMP WordPress plugin: https://wordpress.org/plugins/amp/installation/ on your staging website.
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:
Then its AMP version would be:
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.
You can install this plugin from here: https://wordpress.org/plugins/glue-for-yoast-seo-amp/
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.
Validating your AMP Page
Your AMP page must follow the AMP HTML Specification in order to be a valid AMP page.
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.
Follow the steps below:
Step-1: Navigate to the Structured data testing tool: https://developers.google.com/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):
Make your AMP pages discoverable by Google
Step-1: Check the source code of the AMP page and look for following a similar line of code:
<link rel=”canonical” href=”https://www.optimizesmart.com/social-interactions-tracking-through-google-analytics/”/>
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:
<link rel=”amphtml” href=”https://www.optimizesmart.com/social-interactions-tracking-through-google-analytics/amp/”/>
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:
Then add following self-referencing canonical tag in its source code:
<link rel=”canonical” href=”https://www.mywebsite.com/social-tracking/amp” />
Crawling and indexing of AMP pages
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:
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
This tag needs to be placed in the head section (<head>………</head> of your AMP pages and before the AMP JavaScript Library.
Following script is used to load the AMP JavaScript Library:
<script async src=”https://cdn.ampproject.org/v0.js”></script>
Load this tag in the head section of your AMP page, after the ‘amp-analytics’ tag.
So your AMP analytics code would now look like the one below:
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
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:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js”></script>
</head>
<body>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-12345-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
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):
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
AMP plugin automatically adds the code: <script async src=”https://cdn.ampproject.org/v0.js”></script> so you don’t need to add this code manually.
Add the following code in the body section of the plugin file (single.php):
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-12345-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Make sure that you use your own tracking ID instead of ‘UA-12345-1’, otherwise, the tracking won’t work.
Here is how the final set up may look like:
Now all the AMP pages on your website have got AMP Analytics installed.
Check the Google Analytics real-time reports, to test whether Google Analytics is collecting the AMP traffic data:
Also, revalidate your AMP pages to make sure they are still perfectly valid AMP.
Do you really need AMP?
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
- How to see Organic Search Keywords in GA4 (Google Analytics 4)
- Google Analytics Ecommerce Tracking Tutorial
- Google Tag Manager Event Tracking Tutorial
- Google Analytics Event Tracking Tutorial
- Google Analytics Store Visits Tracking Tutorial
- Offline Conversion Tracking in Google Analytics – Tutorial
- Ecommerce Tracking Google Tag Manager (GTM) – Tutorial
- Tracking Virtual Pageviews in Google Tag Manager – Tutorial
- Google Tag Manager YouTube Video Tracking
- Google Analytics Virtual Pageviews Tutorial
- Google Analytics YouTube Integration & Analysis Tutorial
- Google Analytics for Facebook Tutorial
- Cross Domain Tracking in Google Analytics – Complete Guide
- How to use two Google Analytics codes on one page
- How to correctly use referral exclusion list in Google Analytics
- Google Analytics Calculated Metrics – Tutorial
- Creating your own Google Analytics Tag Auditing System
- Google Tag Manager Search Tracking without Query Parameter
- Tracking Google Analytics Paypal Referral and other payment gateways
- How to Track Phone Calls in Google Analytics 4 – Call Tracking Tutorial
- How to track leads in Google Analytics via CRM
- Postbacks in Google Analytics Explained
- Subscription & Recurring Revenue Analytics in Google Analytics
- Track the Impact of Google Analytics Cookie Consent on Website Traffic
- Tracking Offline Conversions in Google Ads
- Implementing Scroll Tracking via Google Tag Manager
- Scroll Depth Tracking in Google Tag Manager – Tutorial
- Site Search Tracking In Google Analytics Without Query Parameters
- Google Tag Manager Youtube Video Tracking via YouTube Video Trigger
- How to Correctly Measure Conversion Date & Time in Google Analytics
- Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
- Cross Domain Tracking in Google Analytics – Complete Guide
- Google Analytics Linkedin & Twitter Tracking
- Creating Content Group in Google Analytics via tracking code using gtag.js
- Google Analytics Site Search Tracking via Query Parameters
- Google Analytics Site Search Tracking Tutorial
- Creating and Using Site Search Funnel in Google Analytics
- How to add Facebook Pixel to Google Tag Manager
- AMP Google Analytics Tracking – Learn to track AMP pages
- Setting up Sales Funnel across websites in Google Analytics
- Google Analytics 4 Regex (Regular Expressions) Tutorial
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.
What is Accelerated Mobile Page (AMP)?
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.
Components of an AMP page
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:
#3 <meta charset=”utf-8″>
#4 <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”>
#5 <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
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.
#6 <link rel=”canonical” href=”https://www.optimizesmart.com/optimize-smart-web-analytics-tool-box/“/>
This canonical tag tells Google, where to find the corresponding HTML version of the AMP page.
#7 <script async src=”https://cdn.ampproject.org/v0.js”></script>
This script is used to load the AMP JavaScript Library.
Make sure that the AMP analytics tag is used before the AMP JavaScript library. Otherwise, AMP analytics tracking won’t work. For example:
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
#8 <style amp-boilerplate>
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>
You can find more details about creating this metadata from Enabling Rich Snippets for Articles
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.
Following is an example of AMP CSS:
<style amp-custom> /* Merriweather fonts */ @font-face { font-family: 'Merriweather'; src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-regular-webfont.svg#merriweatherregular') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Merriweather'; src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-italic-webfont.svg#merriweatheritalic') format('svg'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Merriweather'; src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bold-webfont.svg#merriweatherbold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Merriweather'; src: url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.woff2') format('woff2'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.woff') format('woff'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.ttf') format('truetype'), url('https://s1.wp.com/i/fonts/merriweather/merriweather-bolditalic-webfont.svg#merriweatherbold_italic') format('svg'); font-weight: 700; font-style: italic; } /* Generic WP styling */ amp-img.alignright { float: right; margin: 0 0 1em 1em; } amp-img.alignleft { float: left; margin: 0 1em 1em 0; } amp-img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignright { float: right; } .alignleft { float: left; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption.alignleft { margin-right: 1em; } .wp-caption.alignright { margin-left: 1em; } .amp-wp-enforced-sizes { /** Our sizes fallback is 100vw, and we have a padding on the container; the max-width here prevents the element from overflowing. **/ max-width: 100%; } .amp-wp-unknown-size img { /** Worst case scenario when we can't figure out dimensions for an image. **/ /** Force the image into a box of fixed dimensions and use object-fit to scale. **/ object-fit: contain; } /* Template Styles */ .amp-wp-content, .amp-wp-title-bar div { max-width: 600px; margin: 0 auto; } body { font-family: 'Merriweather', Serif; font-size: 16px; line-height: 1.8; background: #fff; color: #3d596d; padding-bottom: 100px; } .amp-wp-content { padding: 16px; overflow-wrap: break-word; word-wrap: break-word; font-weight: 400; color: #3d596d; } .amp-wp-title { margin: 36px 0 0 0; font-size: 36px; line-height: 1.258; font-weight: 700; color: #2e4453; } .amp-wp-meta { margin-bottom: 16px; } p, ol, ul, figure { margin: 0 0 24px 0; } a, a:visited { color: #0087be; } a:hover, a:active, a:focus { color: #33bbe3; } /* UI Fonts */ .amp-wp-meta, nav.amp-wp-title-bar, .wp-caption-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 15px; } /* Meta */ ul.amp-wp-meta { padding: 24px 0 0 0; margin: 0 0 24px 0; } ul.amp-wp-meta li { list-style: none; display: inline-block; margin: 0; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } ul.amp-wp-meta li:before { content: "\2022"; margin: 0 8px; } ul.amp-wp-meta li:first-child:before { display: none; } .amp-wp-meta, .amp-wp-meta a { color: #4f748e; } .amp-wp-meta .screen-reader-text { /* from twentyfifteen */ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; width: 1px; } .amp-wp-byline amp-img { border-radius: 50%; border: 0; background: #f3f6f8; position: relative; top: 6px; margin-right: 6px; } /* Titlebar */ nav.amp-wp-title-bar { background: #0a89c0; padding: 0 16px; } nav.amp-wp-title-bar div { line-height: 54px; color: #fff; } nav.amp-wp-title-bar a { color: #fff; text-decoration: none; } nav.amp-wp-title-bar .amp-wp-site-icon { /** site icon is 32px **/ float: left; margin: 11px 8px 0 0; border-radius: 50%; } /* Captions */ .wp-caption-text { padding: 8px 16px; font-style: italic; } /* Quotes */ blockquote { padding: 16px; margin: 8px 0 24px 0; border-left: 2px solid #87a6bc; color: #4f748e; background: #e9eff3; } blockquote p:last-child { margin-bottom: 0; } /* Other Elements */ amp-carousel { background: #000; } amp-iframe, amp-youtube, amp-instagram, amp-vine { background: #f3f6f8; } amp-carousel > amp-img > img { object-fit: contain; } .amp-wp-iframe-placeholder { background: #f3f6f8 url(https://www.optimizesmart.com/wp-content/plugins/amp/assets/images/placeholder-icon.png ) no-repeat center 40%; background-size: 48px 48px; min-height: 48px; } td, th { text-align: left; } a, a:active, a:visited { text-decoration: underline; } </style>
Note: Every AMP page can have only a single embedded stylesheet.
To learn more about styling your AMP pages, read this article: https://www.ampproject.org/docs/guides/responsive/style_pages.html
Overview of what is allowed and not allowed on AMP pages
Most HTML tags can be used in AMP HTML.
However certain tags must be replaced with their AMP equivalent. For example, image tags (<img>) must be replaced with equivalent <amp-img> tags:
<amp-img src=”https://www.optimizesmart.com/wp-content/uploads/2016/03/optimize-smart-Twitter-logo.jpg” width=”32″ height=”32″ class=”amp-wp-site-icon”></amp-img>
#2 HTML Comments are not 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.
#5 Open graph protocol and twitter cards metadata is allowed 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.
Step-2: Install and activate the AMP WordPress plugin: https://wordpress.org/plugins/amp/installation/ on your staging website.
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:
Then its AMP version would be:
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.
You can install this plugin from here: https://wordpress.org/plugins/glue-for-yoast-seo-amp/
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.
Validating your AMP Page
Your AMP page must follow the AMP HTML Specification in order to be a valid AMP page.
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.
Follow the steps below:
Step-1: Navigate to the Structured data testing tool: https://developers.google.com/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):
Make your AMP pages discoverable by Google
Step-1: Check the source code of the AMP page and look for following a similar line of code:
<link rel=”canonical” href=”https://www.optimizesmart.com/social-interactions-tracking-through-google-analytics/”/>
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:
<link rel=”amphtml” href=”https://www.optimizesmart.com/social-interactions-tracking-through-google-analytics/amp/”/>
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:
Then add following self-referencing canonical tag in its source code:
<link rel=”canonical” href=”https://www.mywebsite.com/social-tracking/amp” />
Crawling and indexing of AMP pages
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:
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
This tag needs to be placed in the head section (<head>………</head> of your AMP pages and before the AMP JavaScript Library.
Following script is used to load the AMP JavaScript Library:
<script async src=”https://cdn.ampproject.org/v0.js”></script>
Load this tag in the head section of your AMP page, after the ‘amp-analytics’ tag.
So your AMP analytics code would now look like the one below:
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
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:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <script async src="https://cdn.ampproject.org/v0.js”></script> </head> <body> <amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-12345-1" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
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):
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
AMP plugin automatically adds the code: <script async src=”https://cdn.ampproject.org/v0.js”></script> so you don’t need to add this code manually.
Add the following code in the body section of the plugin file (single.php):
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-12345-1" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
Make sure that you use your own tracking ID instead of ‘UA-12345-1’, otherwise, the tracking won’t work.
Here is how the final set up may look like:
Now all the AMP pages on your website have got AMP Analytics installed.
Check the Google Analytics real-time reports, to test whether Google Analytics is collecting the AMP traffic data:
Also, revalidate your AMP pages to make sure they are still perfectly valid AMP.
Do you really need AMP?
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
- How to see Organic Search Keywords in GA4 (Google Analytics 4)
- Google Analytics Ecommerce Tracking Tutorial
- Google Tag Manager Event Tracking Tutorial
- Google Analytics Event Tracking Tutorial
- Google Analytics Store Visits Tracking Tutorial
- Offline Conversion Tracking in Google Analytics – Tutorial
- Ecommerce Tracking Google Tag Manager (GTM) – Tutorial
- Tracking Virtual Pageviews in Google Tag Manager – Tutorial
- Google Tag Manager YouTube Video Tracking
- Google Analytics Virtual Pageviews Tutorial
- Google Analytics YouTube Integration & Analysis Tutorial
- Google Analytics for Facebook Tutorial
- Cross Domain Tracking in Google Analytics – Complete Guide
- How to use two Google Analytics codes on one page
- How to correctly use referral exclusion list in Google Analytics
- Google Analytics Calculated Metrics – Tutorial
- Creating your own Google Analytics Tag Auditing System
- Google Tag Manager Search Tracking without Query Parameter
- Tracking Google Analytics Paypal Referral and other payment gateways
- How to Track Phone Calls in Google Analytics 4 – Call Tracking Tutorial
- How to track leads in Google Analytics via CRM
- Postbacks in Google Analytics Explained
- Subscription & Recurring Revenue Analytics in Google Analytics
- Track the Impact of Google Analytics Cookie Consent on Website Traffic
- Tracking Offline Conversions in Google Ads
- Implementing Scroll Tracking via Google Tag Manager
- Scroll Depth Tracking in Google Tag Manager – Tutorial
- Site Search Tracking In Google Analytics Without Query Parameters
- Google Tag Manager Youtube Video Tracking via YouTube Video Trigger
- How to Correctly Measure Conversion Date & Time in Google Analytics
- Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
- Cross Domain Tracking in Google Analytics – Complete Guide
- Google Analytics Linkedin & Twitter Tracking
- Creating Content Group in Google Analytics via tracking code using gtag.js
- Google Analytics Site Search Tracking via Query Parameters
- Google Analytics Site Search Tracking Tutorial
- Creating and Using Site Search Funnel in Google Analytics
- How to add Facebook Pixel to Google Tag Manager
- AMP Google Analytics Tracking – Learn to track AMP pages
- Setting up Sales Funnel across websites in Google Analytics
- Google Analytics 4 Regex (Regular Expressions) Tutorial
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.