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.

Transcript

1. Fast & exciting shopping experiences, powered by AMP Paul Bakaus @pbakaus
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, user-first
6. Open source. Open development. Open governance.
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
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 Message
 Listener Message
 Processing Message
 Sender Message
 event Message
 event Message
 event
25. Tokyo HTML framework
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 units
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.
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
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
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 JS
91. Accelerated Developer Workflows Ճ଎͢Δ։ൃϫʔΫϑϩʔ
92. Focus on the product ੡඼ʹϑΥʔΧε Photo by Maxime Agnelli on Unsplash
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
 4.2x
 -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
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
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