AMP

1 - Findings and impacts

AMP (Accelerated Mobile Pages) is a way to build pages that render fast, almost instantly on mobile.

Accelerated mobile pages (AMP) are essentially stripped down HTML copies of existing webpage content that offer faster load times than standard HTML5 documents. Websites can serve AMP pages by implementing the rel=amphtml tag into their HTML.

From a technical point of view, pages with AMP code contain a three-step AMP configuration.

HTML: A stripped down and unique markup of traditional HTML code with unique tags.
JS library: Used to fetch resources and stripped down to eliminate unnecessary rendering.
Google AMP Cache / CDN: An optimized network designed to cache pages and adapt them to AMP code immediately.

HTTPS is a prerequisite for using AMP. Indeed, when creating AMP pages and content, you should strongly consider using the HTTPS protocol (vs. HTTP). Although, HTTPS is not required for the AMP document itself or for images and fonts, there are many AMP features that require HTTPS (e.g., video, iframes, and more). To ensure your AMP pages take full advantage of all AMP features, use the HTTPS protocol. You can learn more about HTTPS in "Why HTTPS Matters".

2 - Recommandations

Google has created its own tutorial to help you create AMP pages

The following markup is a decent starting point or boilerplate. Copy this and save it to a file with a .html extension.

<!doctype html>

<html amp lang="en">

  <head>

    <meta charset="utf-8">

    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <title>Hello, AMPs</title>

    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup">

    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <script type="application/ld+json">

        "@context": "http://schema.org",

        "@type": "NewsArticle",

        "headline": "Open-source framework for publishing content",

        "datePublished": "2015-10-07T12:02:41Z",

        "image": [

          "logo.jpg"

    </script>

    <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>

  </head>

  <body>

    <h1>Welcome to the mobile web</h1>

  </body>

</html>

Required mark-up

AMP HTML documents MUST:

RuleDescription

Start with the <!doctype html> doctype.
Contain a top-level <html ⚡> tag. (<html amp> is accepted as well). It is a way for Google to Identify the page as AMP content.
Contain <head> and <body> tags (Optional in HTML but not in AMP)
Contain a <meta charset="utf-8"> tag as the first child of their <head> tag ( to identify the encoding for the page)
Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag inside their <head> tag. As a best practice, you should include the script as early as possible in the <head>. It will load the AMP JS library.
Contain a <link rel="canonical" href="$SOME_URL"> tag inside their <head>. It will point to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. Learn more in Make Your Page Discoverable.
Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their <head> tag. It's also recommended to include initial-scale=1. It will specify a responsive viewport. Learn more in Create Responsive AMP Pages.
Contain the AMP boilerplate code in their <head> tag.

Include an image

Tutorial HERE

Modify presentation and layout

Tutorial HERE

Prepare your page for discovery and distribution

Tutorial HERE

Preview and validate

Tutorial HERE

To verify if your AMP page is valid, here is another Google tool you can look at: https://search.google.com/u/1/test/amp?pageId=none

Watch out for duplicate content

In some cases, you may need two versions (non-AMP and AMP) of the same page. To avoid duplicate content, add information about the AMP page on the non-AMP page and vice versa, using <link> tags in the <head> section as follows:

Add the following on the non-AMP page:

And what follows on the AMP page:

If you only have one page, and this page is an AMP page, you still have to add the canonical link, which in this case simply points to the page itself:

Tracking AMP pages (Google Analytics)

If you do not really need a Google Analytics property or Google Analytics view dedicated to monitor your AMP pages, you'll need to change your tracking code in a way that does not use JavaScript directly.

In your <head> tag, you will need to insert the following element:

<! - AMP Analytics -> <script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> </ script>

Then at the top of the <body> tag, you'll need to insert the request that matches your Google Analytics query type (page view, event, etc), as follows:

<amp-analytics type = "googleanalytics"><script type = "application / json">{"vars": {"account": "UA-XXXXX-Y"}"triggers": {"trackPageview": {"on": "visible","request": "pageview"}}}</ Script></ Amp-analytics>

In this example, which should cover 90% of your needs, we are only talking about tracking a page view on the property 'UA-XXXXX-Y' (you will have to replace it with your ID) as soon as the page becomes visible.

We will modify the 'triggers' element by adding variables to it to allow it to define custom dimensions / metrics or other values such as the virtual URLs of pages.

The Google Analytics for AMP documentation that allow you to scan all cases.

Tracking AMP pages (Google Tag Manager)

For GTM you will have to create a new container of a new type.
When creating a container, you must choose the 'AMP'container.
In the <head> tag, there will be no surprise, the same code you used for Google Analytics will be used again:

<! - AMP Analytics -> <script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> </ script>

Then at the beginning of the <body> tag, insert the following code:

<! - Google Tag Manager -><amp-analytics config = "https://www.googletagmanager.com/amp.json?id=GTM-XXXXX&gtm.url=SOURCE_URL" data-credentials = "include"> </ amp-analytics>

Remember to replace in the above block the GTM-XXXXX with your GTM container ID.

Consult AMP reports

There are several ways to classify your pages in Google Analytics.

If you have structured your AMP URLs so that they contain "/amp", you will quickly see in your report : Behaviour > Site Content > Detail by URL
If you have adopted a custom dimension dedicated to the type of page (AMP pages vs "normal" pages) then you will have to create a custom report with the following dimension: "type of page" and using "page view" as the metric for example. This implies that you have set up the custom dimension in your Analytics code for AMP or via GTM.
Or you can use a content group based on the URL of our AMP pages.

==> In the admin/settings of your Google Analytics view, you go to the management of content groups.

Create a new AMP group that will contain 2 setups: AMP and No AMP.

Start with the 1st setup for Non AMP pages:

For the 2nd setup (AMP pages) we create the same setup as the previous one by replacing "does not contain" with "contains" and voila! Since this method does not require tagging, content groups are automatically populated by Google Analytics on every saved page view.

Thanks to this method, you can get segmented reports by content group value.

All we need now is to go back to Behavior > Site Content> All Pages and activate the Content Grouping option above the data table. Choose your AMP group and you will see 2 inputs: AMP and No AMP with a clear view of the performance of each type of page.

With these two entries in the content group, you can click the boxes on the left at the top of the line and click 'Draw lines' to see the performance of AMP pages compared to non-AMP pages.

Plugin by CMS

Wordpress has a AMP plugin to install on sites: https://wordpress.org/plugins/amp/. Once the plugin is installed, all the contents available on the site will be available via the AMP extension by adding "/amp/" or "?amp=1" at the end of the URLs.
The Weeble company offers a AMP plugin for Joomla called wbAMP: https://weeblr.com/joomla-accelerated-mobile-pages/wbamp. The plugin automatically builds AMP pages, as well as the link alternative amp-html tag. Regarding "audience measurement", Google Analytics is currently the only platform supported.
Drupal also offers a module to support the content of AMP pages on a site made with Drupal: https://www.drupal.org/project/amp. By default, only "node" type URLs can benefit from an AMP version (to be configured in the back office). Asit is the case on other CMS, AMP version URLs are characterized by the addition of "/amp" at the end of the URL.
Magento also offers a module supporting AMP pages on a site that was created with the CMS: https://store.plumrocket.com/magento-extensions/accelerated-mobile-pages-magento-extension.html

Report abuse