Setting up & Tracking AMP Pages in Google Analytics

Vivek Patel
How To Set up
&
Track AMP Pages
in
Google Analytics

So what does that involve?
What Is AMP Pages
Components of a AMP page
What is allowed and not allowed on AMP pages
Setting up AMP on a WordPress Website
Make your AMP pages discoverable by Google
Introduction to amp-analytics tag
Tracking AMP pages in Google Analytics
Do you really need AMP?
Q & A

Accelerated Mobile Pages is open source mobile page format which 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.
AMP pages could load on an average, 4 times faster than the corresponding non-AMP pages.
AMP pages are delivered from Google AMP CDN, when accessed from search results
Following is an example of basic AMP HTML page, along with its components
Hot to find various AMP HTML elements, by viewing the source code of a AMP page:
What Is AMP Pages
Components of a AMP page

 Pay special attention to the highlighted and numbered 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
 #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 AMP page.

 #6 <link rel=”canonical” href=”https://www.abcdxyz.com/abcd-qwwrer-qeeqwe/“/>
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.
 #8 <style amp-boilerplate>
This tag is used to add the New AMP style
boilerplate code.
 #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.
 #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.

Overview of what is allowed and not allowed on AMP pages
 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=”http://www.e2msolutions.com/blog/the-complete-list-of-local-seo-tools/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 meta data is allowed on AMP pages.
 #6 The use of <script> tag is not allowed on AMP pages unless the type is ‘application/ld+json’.

Setting up AMP on a WordPress Website
 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.
Why: Because when you enable AMP on your wordpress website, it won’t add any styling on your AMP pages.
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.
 It 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: http://www.e2msolutions.com/blog/the-complete-list-of-local-seo-tools/
 Then its AMP version would be: http://www.e2msolutions.com/blog/the-complete-list-of-local-seo-tools/amp/
 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.
 You can install this plugin from here: https://wordpress.org/plugins/glue-for-yoast-seo-amp/
 Step-3: 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 a 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.ewmsolutions.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’:

Other way of validating AMP pages is through structured data
testing tool
Follow the steps below:
Step-1: Navigate to 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 a 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,

 If some of your AMP pages have already being 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 similar line of code:
<link rel=”canonical” href=”https://www.e2msolutions.com/social-interactions-tracking-through-google-analytics/”/>
This canonical tag tell Google, that the AMP page has got corresponding non-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 AMP wordpress plugin automatically add 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 following similar
line of code:
 <link rel=”amphtml” href=”https://www.e2msolutions.com/social-interactions-tracking-through-google-analytics/amp/”/>
 This link tag tell Google, that your web page has got 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 add 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 self referencing canonical tag. :The standalone AMP page is one which does not have
a non-AMP version.
 For example, if the URL of your standalone AMP page is: https://www.e2msolutions.com/content-marketing/amp
 Then add following self-referencing canonical tag in it source code: <link rel=”canonical”
href=”https://www.e2msolutions.com/content-marketing/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.
 if you don’t find your AMP pages getting crawled and indexed even after a week. There is no harm in
creating and submitting one, esp.
 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:

Introduction to amp-analytics tag
 You can track users’ interactions with AMP pages through ‘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>

Tracking AMP pages in Google Analytics
 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:
 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 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.

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):
<script type="application/json">
{
"vars": {
"account": "UA-12345-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

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:

Do you really need AMP?
 AMP pages are basically created for reading purpose. (mobile, iPad)
 Hence they work well for publishing websites and blog.
 But not so good for feature rich web pages of ecommerce websites.
 If you run an ecommerce website, then I would suggest not to set 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.
 What I learn:
#1 AMP requires, that you remove lot of features/functionality from your regular web pages
#2 AMP technology demands, creation of AMP pages for mobile devices

Reference:
https://www.optimizesmart.com/setting-tracking-amp-pages-google-analytics/
https://moz.com/blog/accelerated-mobile-pages-whiteboard-friday
http://www.e2msolutions.com/blog/amp-seo-strategy/
g.co/ampdemo – Demo of what AMPs might look like in search results
ampproject.org – The main project web page, where you'll find a technical intro, tutorial, GitHub repository, and more
dis.tl/amp-pages – Further information on AMPs and how they work

Setting up & Tracking AMP Pages in Google Analytics

More Related Content

What's hot

Similar to Setting up & Tracking AMP Pages in Google Analytics

Setting up & Tracking AMP Pages in Google Analytics