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 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 (more or less like a text only version).
It is trimmed down in the sense that, APM removes lot of styling from the page, removes unnecessary widgets and drastically limit the use of JavaScript on a web page which can crippled your analytics .
AMP pages could load on an average, 4 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 rocketloader alone, can create lot of AMP validation related errors.
Components of a AMP page
You don’t need to worry about creating a 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 a AMP page.
Following is an example of 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 boiler plate 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. Here is how this meta data may look like:
You can find more details about creating this meta data from: Enabling Rich Snippets for Articles
Note: Including schema.org meta data in the head section of AMP pages is optional but is highly recommended. Without which, you won’t get a perfectly valid APM 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:
Note: Every AMP page can have only 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 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’. 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, 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:
https://www.optimizesmart.com/beginners-guide-to-javascript-for-google-analytics/
Then its AMP version would be:
https://www.optimizesmart.com/beginners-guide-to-javascript-for-google-analytics/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. 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 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.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 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, instead of ‘All good’,
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.optimizesmart.com/social-interactions-tracking-through-google-analytics/”/>
This canonical tag tell Google, that the AMP page has got 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 which does not have a non-AMP version.
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.optimizesmart.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.
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 it 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 ‘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 a AMP page.
The data that need 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:
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 a AMP page, you need to:
#1 Add your GA tracking ID to the JSON object.
#2 Remove all the HTML comments from the JSON object, as comments are not allowed on AMP pages.
Here is what I meant:
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 the AMP analytics is 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 recommend 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 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):
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 purpose. Hence they work well for publishing websites and blog. 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 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.
My understanding of AMP is that, it will not get a wide spread adoption by webmasters for 3 simple reasons:
#1 AMP requires, that you remove 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 are commonly used on ecommerce websites and where AMP fall flat on face.
#2 AMP technology demands, creation of AMP pages for mobile devices, in addition to regular web pages for desktop 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 need to be collected and sent to 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.
The post Setting up & Tracking AMP Pages in Google Analytics appeared first on Optimize Smart.