Upgrade to Pro — share decks privately, control downloads, hide ads and more …

EC Cube Day: Fast & exciting shopping experiences, powered by AMP

EC Cube Day: Fast & exciting shopping experiences, powered by AMP

This talk is an overview of AMP with focus on e-commerce, presented in Japan at EC-CUBE Day.


Paul Bakaus

July 23, 2019


  1. Fast & exciting shopping experiences, powered by AMP Paul Bakaus

  2. Paul Bakaus Developer Advocate, Google

  3. ϫΫϫΫ

  4. Mission Provide a user-first format for web content, supporting the

    long-term success of every web publisher, merchant, and advertiser The AMP Project
  5. AMP is a web component framework to easily create fast,

  6. Open source. Open development. Open governance.

  7. None
  8. Speed Revenue

  9. 7% Drop Every 1 second

  10. Why aren’t we all building super fast sites?

  11. TV Consumption Efficiency Amount of time actually spent watching something

    Amount of time I spend looking for something to watch on TV Source: Graphjam.com
  12. Website you wanted to build Website you did to build

    It’s too easy to build a slow website.
  13. Tokyo Expensive Cheap The web, without AMP Expensive Cheap The

    web, with AMP
  14. AMP in a nutshell Manage Cache CMS Ad revenue and

    analytics Prerender
  15. Tokyo

  16. Tokyo Guaranteed speed

  17. “Above the fold” / Browser viewport AMP automatically prioritizes resources

    in the first viewport.
  18. Ad cannot slow down the page AMP automatically sandboxes and

    delays 3p ads, embeds and scripts.
  19. Core #1 Core #2 Core #3 Core #4 Shared Memory

    Bus Interface Multi-core CPU
  20. Main Thread Layout Composite Input Paint Scripting

  21. Main Thread Layout Composite Input Paint Scripting

  22. None
  23. 1. Fill out out form 2. Get in line ready

    3. Get result quickly
  24. Main Thread Message
 Listener Message
 Processing Message
 Sender Web Worker

 Listener Message
 Processing Message
 Sender Message
 event Message
 event Message
  25. Tokyo HTML framework

  26. None
  27. <amp-youtube layout="responsive" width="480" height="270" data-videoid="lBTB7yLsBY"> </amp-youtube>

  28. <amp-analytics> Event tracking Social Outbound link ...

  29. partner.com Checkout Blue coat Qty: 1 $100.00 Green scarf Qty:

    1 $30.00 Black gloves Qty: 1 $70.00 Vendor 1 Vendor 2 Vendor 3 Bad: Multiple trackers and beacons competing for attention.
  30. partner.com Checkout Blue coat Qty: 1 $100.00 Green scarf Qty:

    1 $30.00 Black gloves Qty: 1 $70.00 Vendor 1 Vendor 2 Vendor 3 Good: Measure once, batch, send to analytics providers
  31. 100+ vendors integrate with <amp-analytics>

  32. Tokyo Turbocharged via caches

  33. AMP pages aren’t just web pages, they’re ultra-portable, embeddable, content

  34. “Instant” load via prerender 1. Preload page 2. Prerender in

    hidden iframe 3. Display when user taps
  35. AMP Cache Prerender mode

  36. Publisher origin Search Results Page Browser 1 2 Standard pre-render

    maliciousdomain..com google.com 1 2 3 User flow Background prerender from origin Page loaded in background can set cookies and track user without user ever clicking on it Browser fetches search results page
  37. AMP Cache Origin Search Results Page Browser 1 2 3

    1 2 3 cdn.ampproject.org google.com myshop.com AMP pre-render User flow (Before click) Browser fetches search results page Background prerender from AMP cache Calls from AMP cache to fetch origin content never reveals user identity
  38. 4 5 AMP post-render User flow (After click) Instant reveal

    on click Cross origin API calls for dynamic data + analytics Browser AMP Cache Origin Search Results Page 4 5 cdn.ampproject.org google.com myshop.com
  39. AMP caches are awesome. Background prefetch Optimized HTML Faster =

    $$$ CDN++
  40. ΍΍ϫΫϫΫ

  41. 2: E-commerce and AMP, today

  42. Over 60% of Google Search AMP clicks
 now go to

    “Non-News” sites.
  43. None
  44. Navigation bar Hamburger menu Cart with count Category selection Product

    list Product summary Sorting and filtering Category browsing Search box Product options Product details Mini cart
  45. camp.samples.amp.dev go.amp.dev/camp-code

  46. Our site Home Page Homepage

  47. None
  48. <amp-list> amp-mustache

  49. <amp-list> & amp-mustache <amp-list id="cart-count" src="/api/cart-count" height="17" width="17" fixed> <template

    type="amp-mustache"> {{#count}} <span>{{count}}</span> {{/count}} </template> </amp-list> {"items":[{"count":1}]}
  50. amp.dev amp-dev.cdn.ampproject.org Access-Control-Allow-Origin: amp-dev.cdn.ampproject.org

  51. None
  52. Our site Home Page Product listing page Product Listing

  53. Sort and filter <amp-bind>

  54. <amp-bind> State. Bind. Mutate.

  55. product-listing.html: STATE <amp-state id="products"> <script type="application/json"> { "gender": "<%productsGender%>", "category":

    "<%productsCategory%>", "filter": "high-low" } </script> </amp-state>
  56. product-listing.html: BIND <select name="price" id="price" on="change: AMP.setState({products: {filter: event.value}})"> <option

    value="high-low">Price: High-Low</option> <option value="low-high">Price: Low-High</option> </select>
  57. product-listing.html: MUTATE <amp-list id="products-list" [src]="'/api/categories?categoryId=' + products.gender + '-' +

    products.category + '&sort=' + products.filter" src="/api/categories?categoryId=<%productsGender%>-<%productsCategory%>&sort=high-low" height="1000" width="300" layout="responsive"> </amp-list> /api/categories?categoryId=men-shirts&sort=high-low /api/categories?categoryId=women-shorts&sort=low-high ...
  58. How successful are e-commerce companies with AMP?

  59. mobile bounce rate -21% conversion rate +26% conversion rate on

    AMP vs non-AMP +62%
  60. +40% organic traffic 5x conversion rate -60% bounce rate

  61. +60% bounce rate -5% CVR uplift +0.5% more traffic

  62. ͔ͳΓϫΫϫΫ

  63. 3: E-commerce and AMP, tomorrow

  64. AMP ห౰ Bento Tokyo / ౦ژ

  65. With Bento AMP, AMP components will … • Reliably work

    outside of a valid AMP context • Interact with non-AMP components • Interact with each other without v0.js • Be usable in client-side rendering frameworks We will try to do this … and we’ll see if it works! Bento AMP Λ࢖͏ͱɺAMP ίϯϙʔωϯτ͸… • ༗ޮͳ AMP ίϯςΩετͷ֎Ͱ҆ఆͯ͠ಈ࡞͠·͢ • AMP Ҏ֎ͷίϯϙʔωϯτͱΠϯλϥΫτ͠·͢ • v0.js ͳ͠Ͱޓ͍ʹΠϯλϥΫτ͠·͢ • ΫϥΠΞϯτ αΠυ ϨϯμϦϯά ϑϨʔϜϫʔΫͰ࢖༻Ͱ͖ΔΑ͏ʹͳΓ·͢ ͜ΕΒʹऔΓ૊ΜͰɺ͏·͍͔͘͘ࢼ͍͖ͯ͠·͢ʂ Tokyo / ౦ژ
  66. <amp-experiment> +

  67. Coming soon: <amp-autocomplete> ۙ೔ެ։: <amp-autocomplete>

  68. Infinite Scroll in amp-list amp-list ʹΑΔ ແݶεΫϩʔϧ

  69. amp-base-carousel amp-inline-gallery amp-stream-gallery Footage shows the group hiding inside a

    yellow Taipei residents protest after change to garbage truck song The Kamchatka Kronicle After years of hearing Für Elise heralding the garbage truck’s arrival, residents will have to adjust to See more Out in the Wilderness Hot Destinations: Tonglen Lake, Alaska Justs Lisss Justsss Top Activities near Denali: D E S I G N D A N M A R K 250 bhp, 3,430 cc inline SOHC six-cylinder engine, five-speed manual transmission, independent coil-over-strut front suspension, independent coil spring semi-trailing arm rear suspension, and four-wheel power hydraulic disc brakes. Wheelbase: 103.3 in. In factory nomenclature, “E9,” the BMW 3.0 CS Coupe, was a Karmann-built two-door based on the New Class 2000CS. Enlarged Related Products Hygge of Copenhagen Grand Piano Aarhus Wooden Cutting Board Viktor Hasselblad Commemorative Lens Focussed component Lots of customizations Some learning Very focussed component Some customizations Easy to learn ͖ΘΊͯతΛߜͬͨίϯϙʔωϯτ ͋Δఔ౓ͷΧελϚΠζ͕Մೳ शಘ͕༰қ All possible JS/CSS No focus Infinite flexibility Difficult to learn ͋ΒΏΔ JSɺCSS ͷՄೳੑ తΛߜΒͳ͍ ແݶͷॊೈੑ शಘ͕ࠔ೉ తΛߜͬͨίϯϙʔωϯτ ෯޿͍ΧελϚΠζ ͋Δఔ౓ͷֶश͕ඞཁ
  70. Payments Transitions Adaptive CSS limit Stateful pages ࢧ෷͍ ભҠ ॊೈͳ

    CSS ͷ੍໿ εςʔτϑϧ ϖʔδ Tokyo / ౦ژ
  71. ͱͯ΋ϫΫϫΫ

  72. 4: Embracing AMP for your digital strategy

  73. Tokyo / ౦ژ

  74. ϖΞʔυ AMP Paired AMP Tokyo / ౦ژ

  75. ϖΞʔυ AMP Paired AMP Tokyo / ౦ژ

  76. AMP first websites AMP ϑΝʔετ ΢ΣϒαΠτ Tokyo / ౦ژ

  77. AMP ϑΝʔετ͕౸ୡ໨ඪ AMP first is the destination Tokyo / ౦ژ

  78. Whole page != whole site

  79. Article Product page Learn more Public Profiles Listing pages ...

    Discovery via search/social/sharing
  80. Article Product page Learn more Public Profiles Listing pages ...

    Settings Shopping Cart Admin panel Advanced Search ... ... Discovery via search/social/sharing
  81. Bento AMP AMP websites Component-level usability wins A starting point

    All the performance and UX guarantees Instant-loaded and embeddable AMP ΢Σϒϖʔδ ϢʔβϏϦςΟͷߴ͍ίϯϙʔωϯτ ग़ൃ఺ ༏ΕͨύϑΥʔϚϯεͱ UX ͸ ਝ଎ͳಡΈࠐΈͱຒΊࠐΈ΍͢͞ͷอূͱͳΔ Tokyo / ౦ژ ห౰ AMP
  82. Finishing the
 last mile Tokyo ϥετϚΠϧΛ
 ׬੒ͤ͞Δ Tokyo / ౦ژ

  83. Tokyo

  84. Tokyo You can now run your own 
 JavaScript in

    AMP documents AMPϖʔδͰ͋ͳ͕ͨॻ͍ͨJavaScript͕ಈ͖·͢
  85. Tokyo <amp-script> AMP
 Component AMP Document

  86. Tokyo <amp-script> AMP
 Component Main thread Web workers

  87. Flexibility Productivity <amp-script>

  88. Tokyo as a Service AMP or: How to worry less

    with AMP
  89. Time spent using sticky tape Taping things Finding the end

  90. Time spent developing a website Creating unique UX Fighting with

  91. Accelerated Developer Workflows Ճ଎͢Δ։ൃϫʔΫϑϩʔ

  92. Focus on the product ੡඼ʹϑΥʔΧε Photo by Maxime Agnelli on

  93. Always up to date ৗʹ࠷৽ͷঢ়ଶʹ Tokyo

  94. Tokyo Tokyo Tokyo

  95. Tokyo One line ServiceWorker bit.ly/amp-sw sw.js: importScripts('https://cdn.ampproject.org/ sw/amp-sw.js'); AMP_SW.init(); amp-page.html:

    <amp-install-serviceworker src="/sw.js" layout="nodisplay"> </amp-install-serviceworker>
  96. Tokyo 1 2 3 User discovers content Service Worker installs

    in the background User is instantly upgraded to PWA <amp-install-serviceworker>
  97. Tokyo 1 2 3 User discovers content Service Worker installs

    in the background User is instantly upgraded to PWA Rakuten Recipe
  98. Tokyo time spent/user higher CTR within AMP page to other

    Rakuten Recipe pages +50% 3.6x AMP visits/unique user page views/unique user 1.7x 3.1x Add to home screen weekly sessions per user after first week after second week and 5.3x after a month bounces for users coming in via push is (vs social shares) 3.3x
 -75% Push notifications Rakuten Recipe
  99. Start fast, Stay fast.

  100. Tokyo AMP HTML AMP Experience PWA Experience

  101. Tokyo amp.cards /ampproject/samples/tree/ master/amp-pwa-reader

  102. Easily build great experiences across
 the web Create visual stories

    on the web Build and serve lightning fast, safe ads AMP Ads AMP Emails AMP Stories AMP Websites Send interactive, dynamic emails to
 your customers Use AMP to create the best 
 user-experiences across surfaces
  103. Ads

  104. Tokyo Display ads built using AMP AMPHTML Ads

  105. Tokyo HTML Ads Based on results of 1,000+ ad campaigns.

    Comparison of same banner images between AMPHTML Ads and HTML Ads. +12% CTR -11% CPA AMPHTML Ads HTML Ads VS AMPHTML Ads on AMP Pages VS
  106. AMP Stories

  107. Tokyo AMP Stories enable publishers to tell beautiful stories with

    full bleed videos and images AMP ετʔϦʔ͸ɺಈը΍ը૾Λ࢖ͬͯඒ͍͠෺ޠΛදݱ
  108. Tokyo The Rise of Stories

  109. Tokyo As performant as apps Features unique to the web

    You are 
 in control ΞϓϦͱಉ౳ͷύϑΥʔϚϯε Webಠࣗͷػೳ ίϯςϯπ͸͋ͳͨͷ΋ͷ
  110. AMP Stories on Google Search Today

  111. AMP Stories on Google Search (Upcoming)

  112. AMP Stories on Google Discover

  113. None
  114. AMP 
 for Email

  115. Tokyo Performant Building the future of email Secure Dynamic Multipart/

    Alternative HTML Version text/html AMP Version text/x-amp-html Plain Text Version text/plain EϝʔϧͷະདྷΛߏங
  116. Tokyo Delivery Testing Clients Coming soon! Coming soon!

  117. Promotions 
 from businesses Product recommendations Shopping newsletter Shipping 

    notifications Recommendations 
 from businesses Customer 
 experience surveys Receipts Tokyo
  118. Travel recommendations Tokyo

  119. Travel recommendations Higher click-through rate +57% Tokyo +60% Higher conversion

  120. ࠷΋ϫΫϫΫ

  121. Wrap up

  122. amp.dev

  123. go.amp.dev/learn Courses go.amp.dev/tools Tools go.amp.dev/docs Docs

  124. None
  125. amp.dev/ roadmap

  126. Coming soon to amp.dev.. An open source library demonstrating how

    to achieve common e-commerce patterns in AMP
  127. Thank You! @pbakaus