The document discusses Accelerated Mobile Pages (AMP) capabilities for Magento projects. It covers what AMP is, the benefits of using AMP like faster page speeds and improved SEO, required code elements for AMP pages, common AMP components for Magento like forms and images, and how to add features like analytics and validate AMP pages. It also provides examples of using AMP features in Magento like custom layouts, templates, and dynamic content with AMP Bind.

1. Accelerated Mobile Pages (AMP) in Magento:
capabilities
Speaker: Olga Burtyka

2. Today we will talk about:
❖ What is Google AMP?
❖ Why your project needs AMP?
❖ SEO benefits and problems of AMP
❖ How AMP speeds up page loading?
❖ Must-have code on the page
❖ Disallowed code on the page
❖ How to add custom AMP layout and templates to
Magento 2
2

3. Today we will talk about:
❖ AMP most used components in Magento
❖ How to add Google Analytics and
Google Tag Manager to AMP
❖ Ways to validate AMP pages
❖ How to update AMP Cache?
❖ Compare speed AMP pages and not-AMP on product page
❖ Progressive Web Application and AMP
❖ Useful resources to start applying AMP in your project
3

4. What is Google AMP?
“AMP - is a special project from
Google, executed in conjunction
with dozens of world-renowned IT
companies, web developers and
website owners. The goal of the
project is to increase the speed of
downloading sites on mobile
devices due to the introduction of
new technologies.”
4

5. Why your project needs AMP?
5
Using mobile on the first place in our live. By 2020, 80% of all traffic will come from smartphones

6. Why your project needs AMP?
○ Essential for good mobile SEO.
○ Makes Pages load faster.
○ Most Recommended by Google, Loved by
Google.
○ Designed to be heavily cached.
○ Progressive Web Apps and AMP pages work
great together.
6

7. SEO Benefits of AMP
AMP is fast and gives high conversion rate
7

8. SEO Benefits of AMP
❏ The increase of website’s ranking
(Google officially says that AMP is just one of many signals for rankings)
❏ Amp offers mobile friendliness
(https://search.google.com/test/mobile-friendly)
❏ Google switches to mobile-first indexing
❏ AMP Analytics supports Google Analytics, AdWords Conversion Tracking
❏ Google Tag Manager supports AMP containers
❏ Your HTML is flawless and 100% free of code errors
❏ Improved CTR(click-through rate)
8

9. SEO problem of AMP
9

10. SEO problem of AMP
“ Google announced that it had almost
solved the problem with displaying URLs
in AMP search results. Currently, they
show URLs to Google, not publishers, which
are taken from AMP Cache. However, later
this year the situation will change, and
AMP Cache will begin to provide
publishers' URLs. ”
post from 9.01.2018
10

11. How AMP speeds up page loading?
1) AMP HTML is HTML with some restrictions for reliable performance.
AMP HTML is basically HTML extended with custom AMP properties.
The simplest AMP HTML file looks like this:
11

12. How AMP speeds up page loading?
2) AMP JavaScript
● AMP JavaScript library guarantees fast rendering of AMP
pages as it executes a larger part of AMP’s markups.
● AMP pages can’t include any author-written JavaScript.
● Biggest optimizations is the fact that it makes everything that
comes from external resources asynchronous, so nothing in the
page can block anything from rendering.
12

13. How AMP speeds up page loading?
3) AMP CDN (AMP cache)
● CDN – Content Delivery Network plays a crucial role in running
seamlessly accelerated mobile pages as it expedites the delivery of
content to a mobile device.
● This is considered as one of the critical element of AMP
technology.
● It acts by storing the elements from the similar AMP pages available on
the server to ensure faster delivery.
13

14. How to report the availability of the AMP version of the page?
★ On the usual page, add the following code:
<link rel="amphtml"
href="https://www.example.com/url/to/amp/document.html">
★ And this to the AMP page:
<link rel="canonical"
href="https://www.example.com/url/to/full/document.html">
14

15. Must-have code on the AM Page
➔ Begin with the document type <! Doctype html>.
➔ Contain the <html ⚡> top level tag (also use <html amp>).
➔ Contain the <head> and <body> tags (optional in HTML markup).
➔ Contain the <link rel = "canonical" href = "SOME_URL"> tag inside the
header, which points to the usual HTML version of the HTML AMP
document or to the source document itself, if that version does not exist.
➔ Contain the <meta charset = "utf-8"> tag as the first child of the header tag.
➔ Keep the tag <meta name = "viewport" content = "width = device-width,
minimum-scale = 1"> in the title tag. It is also recommended to include the
value initial-scale = 1.
15

16. Must-have code on the page
➔ Contain the <script async src = "https://cdn.ampproject.org/v0.js"> </ script>
tag that points and loads the AMP JS library as the last header element.
➔ Contain the following code in the <head> tag:
<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>
16

17. Disallowed code on the page
➢ include custom css (<link rel=”stylesheet”> ) or js files;
➢ the size of the built-in style sheet < 50 kilobytes;
➢ inline style attributes (All styles must be defined in the <head> of the
page, within a <style amp-custom> tag.);
➢ disallow use ‘!important’;
➢ -amp- class and i-amp- tag names (Class names, in author stylesheets,
may not start with the string -amp-. These are reserved for internal use by
the AMP runtime. It follows, that the user's stylesheet may not reference
CSS selectors for -amp- classes and i-amp tags.)
➢ <script> tag can be only type is application/ld+json or type is
application/json
➢ <img>,<video>, <audio>,<iframe> replaced with <amp-img>, <amp-video>,
<amp-audio> and <amp-iframe>
17

18. Disallowed code on the page
➢ <a> the href attribute value must not begin with javascript:. If set, the
target attribute value must be _blank
➢ Attribute names starting with on (such as onclick or onmouseover) are
disallowed in AMP HTML.
➢ <form> support only https://
➢ The special chars like '&ldquo; &rdquo;' - is disallowed.
18

19. How to add custom AMP layout and templates to Magento 2
open etc/frontend/events.xml and add:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="layout_load_before">
<observer name=“amp_layout_load_before"
instance="MyModuleAmpObserverLayoutLoadBefore"/>
</event>
<event name="core_layout_render_element">
<observer name=“amp_core_layout_render_element"
instance="MyModuleAmpObserverCoreLayoutRenderElement"/>
</event>
</config>
19

20. How to add custom AMP layout and templates to Magento 2
20

21. How to add custom AMP layout and templates to Magento 2
<type name="MagentoFrameworkViewResultPage">
<plugin name="amp-layout-handles"
type="MyModuleAmpPluginHandles" sortOrder="10"/>
</type>
21
open etc/frontend/di.xml and add:
open MyModule/Amp/Plugin/Handles.php
public function afterAddPageLayoutHandles(Page $subject) {
if ($this->_dataHelper->isAmpRequest()) {
foreach ($subject->getHandles() as $handleName) {
$subject->addHandle('amp_' . $handleName);
}
}
return $subject;
}

22. How to add custom AMP layout and templates to Magento 2
22

23. 23
How to add custom AMP layout and templates to Magento 2
<container name="amp.items.block" htmlTag="div" htmlClass="amp-product" after="-">
<referenceBlock name="catalog.product.related" remove="true"/>
<block class="MagentoCatalogBlockProductProductListRelated"
name="amp.product.related"
template="MyModule_Amp::catalog/product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">related</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductProductListUpsell"
name="amp.product.upsell"
template="MyModule_Amp::catalog/product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">upsell</argument>
</arguments>
</block>
</container>

24. AMP most used components in Magento
1) amp-form component allows HTTP and XHR (XMLHttpRequest) form submissions.
24
<action method = "addJs">
<argument name = "src" xsi:type = "string">
https://cdn.ampproject.org/v0/amp-form-0.1.js
</argument>
<argument name = "type" xsi:type = "string">amp-form</argument>
</action>
2) amp-img replace usual <img> tag and provides a powerful replacement.
Is automatically imported via the AMP runtime.
<amp-img class = "logo" src = "<?php echo $category->getLogoSrc(); ?>"
width = "750" height = "250" alt = "Cool Image">
</amp-img>

25. AMP most used components in Magento
3) The amp-image-lightbox component allows the user to expand an
image to fill the viewport.
<script async custom-element="amp-image-lightbox"
src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js">
</script>
25
<amp-img on = "tap:lightbox1" role = "button" src = "/img/Table.jpg"
alt = "Cool Table" title = "Picture Table view in lightbox"
layout="responsive"
width="300" height="246">
</amp-img>
<amp-image-lightbox id = "lightbox1" layout = "nodisplay">
</amp-image-lightbox>
for example:

26. AMP most used components in Magento
4) The amp-carousel component allows displaying multiple similar
pieces of content along a horizontal axis.
<script async custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
26
<amp-carousel height="300" layout="fixed-height" type="carousel">
<amp-img src="/img/image1.jpg" width="400" height="300"
alt="another sample image">
</amp-img>
<amp-img src="/img/image2.jpg" width="400" height="300"
alt="and another sample image">
</amp-img>
</amp-carousel>
for example:

27. AMP most used components in Magento
5) Use amp-iframe for embedding content into AMP files via iframe. Useful
for displaying content otherwise not (yet) supported by AMP.
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
<amp-iframe title="Google mapCA"
frameborder="0" layout="responsive"
width = "600" height = "400"
sandbox = "allow-scripts
allow-same-origin allow-popups"
src = "https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6
j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848">
</amp-iframe>
27

28. AMP most used components in Magento
Responsive amp-iframe on live chat example:
28
<amp-iframe id="livechat-iframe" title="LiveChat"
src="https://chair.com/livechat.html"
height="450" layout="fixed-height"
sandbox="allow-scripts allow-same-origin">
<amp-img src="#" layout="fixed-height"
placeholder height="450" width="auto" >
</amp-img>
</amp-iframe>
function postSize(size) {
window.parent.postMessage({
sentinel : 'amp',
type : 'embed-size',
height : size
}, '*');
}

29. 29

30. AMP most used components in Magento
6) amp-bind
Allows you to add custom interactivity to your pages beyond using
AMP's pre-built components.
It works by mutating elements in response to user actions via data
binding and JS-like expressions.
For example, amp-bind can be used to create an e-commerce product
page where the UI changes if the user's currently selected item is not
available, or user select many product options and need calculate price.
30
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>

31. AMP most used components in Magento: amp-bind example
<amp-state id="product" class="i-amphtml-element i-amphtml-layout-container"
aria-hidden="true" style="display: none;">
<script type="application/json">
{
"totalPrice" : 0,
"specialPrice" : 0.9386,
"203375": { "price" : 1580 }
"203376": { "price" : 1900 },
"203367": { "price" : 830 },
"203365": {" price" : 1740 },
"option-59866" : "203375",
"option-59867" : "203367",
"qty-59866" : 1,
"qty-59869" : 1,
}
</script>
</amp-state>
31

32. AMP most used components in Magento: amp-bind example
32
<input type = "radio" class = "bundle-option"
name = "bundle_option[<?php echo $_option->getId() ?>]"
value = "<?php echo $_selection->getSelectionId() ?>"
on="change:AMP.setState({
product: {
<?php echo "option" . $_option->getId(); ?>:
event.checked == true ? event.value : '',
selected: {
<?php echo "option" . $_option->getId(); ?>:
(product[event.value]['price']*product.qty<?php echo $_option->getId(); ?>)
}
}
})"
/>
<span class="product-price"
[text] = "'$'+((values(product.selected).reduce((x, y) => x + y))*product.sPrice).toFixed(2)">
</span>

33. How to add Google Analytics to AMP
Add the following line of code into the <head> of your document:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
33
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "<?php echo $block->getGoogleAnalyticsId(); ?>"
},
"triggers": {
"trackPageviw": {
"on": "visible",
"request": "pageview”
}
}
}
</script>
</amp-analytics>

34. How to add Google Tag Manager to AMP
Google Tag Manager recently published support for AMP. This support comes
in the form of a new Container type in Google Tag Manager.
34

35. How to add Google Tag Manager to AMP
<amp-analytics config = https://www.googletagmanager.com/amp.json?id=<?php
echo $gtmID; ?>&gtm.url=SOURCE_URL" data-credentials = "include">
<?php echo $this->_getDataLayer(); ?>
</amp-analytics>
It example GTM variables on magento product page:
35

36. Ways to validate AMP pages
36

37. Ways to validate AMP pages. Not valid page:
37

38. Ways to validate AMP pages. Valid page:
38

39. Ways to validate AMP pages
https://validator.ampproject.org/
39

40. Ways to validate AMP pages
Google Search Console
40

41. Ways to validate AMP pages
Google Search Console run test pages with error
41

42. How to update AMP Cache? update-ping
42
What's the diff between update-cache and update-ping?
Number of update-ping requests you can make it limited but update-
cache allows for higher request rates because the requests are signed.
https://www.tvstands.com/mygel-10-queen-mattress.html?amp=1
https://www-tvstands-com.cdn.ampproject.org/c/s/www.tvstands.com/
mygel-10-queen-mattress.html?amp=1
https://cdn.ampproject.org/update-ping/c/s/www.tvstands.com/mygel-
10-queen-mattress.html?amp=1
OR

43. How to update AMP Cache? update-cache
You can flush any currently cached version of a document by issuing a signed
request to the AMP Cache. The update-cache request is called at this address:
https://www-tvxxxxxxx-com.cdn.ampproject.org/update-cache/c/s/
www.tvxxxxxxx.com/stanley-juniper-dell-media-chest-in-white-615-23-
11.html?amp=1&amp_action=flush&amp_ts=1512889699&amp_url_signature=p
wFqaT1BgqESIaKREyeIJP4QYY0ykl6W37YzGs9emEQjkpwY2juBuc7O9njF-
zFqSYTQezoP1RTZiorItOh0Qw14OPAJBqb49AumJAMPKgffcU_Z8d6FQWafOE5
WU8VFCk8JpW3s91AdYHbpNliLBERIYLMPpLW7taZywfnF8nd6Pjl7GLKYDSu8ml-
6DHeEy9E4MtlStVKbEguSswyWwZyK7opmkSq6xevdB_Am9YLfVGmd2SEypf4kPw
Q5on5c0kxbv5EIPADrSQz59T9MrhrDFIx4J4ibjYjKrH5wOjxFMVy5k1wN6CETYj9l
https://example-com.<cache.updateCacheApiDomainSuffix>/update-
cache/c/s/example.com/article?amp_action=flush&amp_ts=<ts_val>&amp_url
_signature=<sig_val>
43

44. Compare AMP pages and not-AMP on product page
44

45. Compare AMP pages and not-AMP on product page
45

46. Compare AMP pages and not-AMP on product page
46

47. Compare AMP pages and not-AMP on product page
47

48. Progressive Web AMP
What is Progressive Web Applications?
“You can perceive this as a site built using web technologies
(JS + HTML + CSS), but which interacts with the user as an
application. ”
48

49. The PWA applications are:
● Progressive
● Responsive
● Connectivity independent
● App-like
● Fresh
49
● Safe
● Discoverable
● Re-engageable
● Installable
● Linkable

50. Different PWAMP combinations:
50
You can combine PWA and AMP in several ways:
1) AMP as PWA ( When AMP restrictions are
uncritical for you. )
https://ampbyexample.com/
2) AMP goes to PWA ( When you need a
smooth transition from one to another.)
<amp-install-serviceworker>
3) AMP inside PWA ( When you want to use
existing AMP as data sources for PWA.)

51. Useful resources to start applying AMP in your project
- https://www.ampproject.org/docs/
- https://ampbyexample.com/
- https://ampbyexample.com/playground/
- https://github.com/ampproject
- https://validator.ampproject.org/
- https://codelabs.developers.google.com/codelabs/your-first-
pwapp-ru/index.html
51

52. Последн слайд