O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Accelerated Mobile Pages (AMP) in Magento

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 52 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (19)

Semelhante a Accelerated Mobile Pages (AMP) in Magento (20)

Anúncio

Mais de Magecom UK Limited (20)

Mais recentes (20)

Anúncio

Accelerated Mobile Pages (AMP) in Magento

  1. 1. Accelerated Mobile Pages (AMP) in Magento: capabilities Speaker: Olga Burtyka
  2. 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. 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. 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. 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. 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. 7. SEO Benefits of AMP AMP is fast and gives high conversion rate 7
  8. 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. 9. SEO problem of AMP 9
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. How to add custom AMP layout and templates to Magento 2 20
  21. 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. 22. How to add custom AMP layout and templates to Magento 2 22
  23. 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. 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. 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. 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. 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. 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. 29
  30. 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. 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. 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. 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. 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. 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. 36. Ways to validate AMP pages 36
  37. 37. Ways to validate AMP pages. Not valid page: 37
  38. 38. Ways to validate AMP pages. Valid page: 38
  39. 39. Ways to validate AMP pages https://validator.ampproject.org/ 39
  40. 40. Ways to validate AMP pages Google Search Console 40
  41. 41. Ways to validate AMP pages Google Search Console run test pages with error 41
  42. 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. 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. 44. Compare AMP pages and not-AMP on product page 44
  45. 45. Compare AMP pages and not-AMP on product page 45
  46. 46. Compare AMP pages and not-AMP on product page 46
  47. 47. Compare AMP pages and not-AMP on product page 47
  48. 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. 49. The PWA applications are: ● Progressive ● Responsive ● Connectivity independent ● App-like ● Fresh 49 ● Safe ● Discoverable ● Re-engageable ● Installable ● Linkable
  50. 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. 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. 52. Последн слайд

×