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

More Decks by Paul Bakaus

Other Decks in Programming


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

    long-term success of every web publisher, merchant, and advertiser The AMP Project
  2. 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
  3. Website you wanted to build Website you did to build

    It’s too easy to build a slow website.
  4. Core #1 Core #2 Core #3 Core #4 Shared Memory

    Bus Interface Multi-core CPU
  5. Main Thread Message
 Listener Message
 Processing Message
 Sender Web Worker

 Listener Message
 Processing Message
 Sender Message
 event Message
 event Message
  6. 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.
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. <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}]}
  13. 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>
  14. 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 ...
  15. 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 / ౦ژ
  16. 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 ͷՄೳੑ తΛߜΒͳ͍ ແݶͷॊೈੑ शಘ͕ࠔ೉ తΛߜͬͨίϯϙʔωϯτ ෯޿͍ΧελϚΠζ ͋Δఔ౓ͷֶश͕ඞཁ
  17. Article Product page Learn more Public Profiles Listing pages ...

    Settings Shopping Cart Admin panel Advanced Search ... ... Discovery via search/social/sharing
  18. 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
  19. Tokyo You can now run your own 
 JavaScript in

    AMP documents AMPϖʔδͰ͋ͳ͕ͨॻ͍ͨJavaScript͕ಈ͖·͢
  20. Tokyo 1 2 3 User discovers content Service Worker installs

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

    in the background User is instantly upgraded to PWA Rakuten Recipe
  22. 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
  23. 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
  24. Ads

  25. 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
  26. Tokyo AMP Stories enable publishers to tell beautiful stories with

    full bleed videos and images AMP ετʔϦʔ͸ɺಈը΍ը૾Λ࢖ͬͯඒ͍͠෺ޠΛදݱ
  27. Tokyo As performant as apps Features unique to the web

    You are 
 in control ΞϓϦͱಉ౳ͷύϑΥʔϚϯε Webಠࣗͷػೳ ίϯςϯπ͸͋ͳͨͷ΋ͷ
  28. 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ϝʔϧͷະདྷΛߏங
  29. Promotions 
 from businesses Product recommendations Shopping newsletter Shipping 

    notifications Recommendations 
 from businesses Customer 
 experience surveys Receipts Tokyo
  30. Coming soon to amp.dev.. An open source library demonstrating how

    to achieve common e-commerce patterns in AMP