Successfully reported this slideshow.
Your SlideShare is downloading. ×

Max Prin - Engage 2018 - AMP for E-Commerce

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 35 Ad
Advertisement

More Related Content

Slideshows for you (17)

Advertisement

Recently uploaded (20)

Advertisement

Max Prin - Engage 2018 - AMP for E-Commerce

  1. 1. Max Prin, Head of Technical SEO, Merkle @maxxeight Accelerated Mobile Pages & E-Commerce
  2. 2. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX2
  3. 3. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX over 60% of the clicks to AMP in Google search go to non-news sites
  4. 4. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX over 30% of the traffic to online stores is from organic search
  5. 5. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX5 Source: Soasta
  6. 6. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX6 Source: Soasta
  7. 7. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX7 Source: Soasta
  8. 8. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX8 Images: 41%
  9. 9. The Total Economic Impact™ of AMP across publishers and e-commerce 20% Conversion 10% Traffic 60% Pages/visit
  10. 10. AMP for E-commerce
  11. 11. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX11
  12. 12. AgendaCategory Page <amp-sidebar> - Navigation <amp-carousel> <amp-list> - Product organization <amp-form> - Searching <amp-bind> - Filtering and sorting <amp-access> - Logged in/out
  13. 13. AgendaProduct Page <amp-video> <amp-accordion> - Product images/details <amp-form> <amp-carousel> - Comments/reviews <amp-selector> - Tabs/Thumbnails <amp-bind> - Color/size selection <amp-state> - Add to cart
  14. 14. AgendaCheckout Payment Requests API - Chrome only <amp-form> - Checkout within AMP <amp-install-serviceworker> - Fast transition to HTML
  15. 15. AgendaDevelopment Tracking <amp-analytics> - Google Analytics, Adobe, etc. <amp-experiments> - A/B testing Compatible to structured data (Schema.org) Custom JavaScript (coming soon)
  16. 16. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
  17. 17. Progressive Web AMPs
  18. 18. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX18 Progressive Web AMPs - AMP pages with PWA features - AMP as entry point into your PWA - AMP as data source for your PWA
  19. 19. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX19 AMP as entry point into your PWA <amp-install-serviceworker>
  20. 20. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX20 AMP as entry point into your PWA 1) User gets the AMP from the SERP 2) Service worker is installed on device • Once activated, SW caches the “app shell” and initial data 3) User clicks on a (internal) link 4) Pre-cached PWA loads instantly “Start fast, stay fast” – Alex Rusell
  21. 21. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX21 AMP as entry point into your PWA 1) User gets the AMP from the SERP 2) Service worker is installed on device • Once activated, SW caches the “app shell” and initial data 3) User clicks on a (internal) link 4) SW hijacks the click 5) Pre-cached PWA loads instantly
  22. 22. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX22 The Service-Worker Hijacks The Click if (request = navigate) { if (requested page is cached) {serve cached version} else {fetch, serve and cache PWA version} } else { if (requested URL is cached) {serve cached version} else {fetch, serve and cache asset} }
  23. 23. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX23 PWA + AMP = PWAMP The AMP framework is not compatible with JavaScript frameworks (e.g. pushState)
  24. 24. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX What about “SEO”? AMP is not a ranking factor A “really fast” site doesn’t rank better than a “fast site”
  25. 25. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX25
  26. 26. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX What about “SEO”? AMP is not a ranking factor A “really fast” site doesn’t rank better than a “fast site” Faster is better (+ AMP cache/pre-loading) AMP = mobile-friendly SERP visibility
  27. 27. Tools & Resources
  28. 28. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX28
  29. 29. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX29
  30. 30. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX30
  31. 31. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX31
  32. 32. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX32
  33. 33. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX33
  34. 34. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX34
  35. 35. Thank you!

Editor's Notes

  • Dave Besbris, VP of Engineering at Google
    over 31 million domains on the internet publishing AMP and they published over 5 billion pages.
    recipes, travel, retail, dictionaries, RapGenius…
  • More than 50% of internet traffic (and Google searches) is from mobile devices

    https://blog.kissmetrics.com/8-important-ecommerce-stats/ : 18,000 plus stores in Yotpo’s database

    https://www.smartinsights.com/ecommerce/ecommerce-strategy/37-indispensable-ecommerce-stats-to-inform-your-2017-strategy/
    8. Traffic sources. 43% of e-commerce traffic comes from Google search (organic) and 26%  comes from Google Adwords. (Source: Wolfgang digital)
  • https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/
    https://support.google.com/partners/answer/7336278?hl=en
    https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
    Too fast? error pages

    AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.
  • https://www.soasta.com/blog/spring-2017-online-retail-web-performance/
  • https://www.soasta.com/blog/spring-2017-online-retail-web-performance/
  • http://www.httparchive.org/interesting.php?a=All&l=Feb%2015%202018&s=Top1000 of the top 1M sites Alexa
  • https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/
    https://www.ampproject.org/latest/blog/e-commerce-at-the-speed-of-amp/
    https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/

    Ebay: http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/

    When the AMP Project first launched, the initial use cases and feature development focused on building AMP to support news and blog content. However, the AMP Project’s ambition has always been making the consumption of any type of mobile content vastly better and faster than we had seen before. Ideally, the format should allow anyone to create high performing websites across many verticals—from news to retail to travel and beyond.
  • https://www.ampproject.org/latest/blog/amp-bind-brings-flexible-interactivity-to-amp-pages/
  • <amp-list> for related products
    <amp-social-share>
  • <amp-list> for related products
    <amp-social-share>
  • Still hard to built a full ecom site with AMP: AMP can’t be the full solution for conversions
  • https://www.smashingmagazine.com/2016/12/progressive-web-amps/
  • https://www.ampproject.org/docs/integration/pwa-amp
  • https://www.ampproject.org/docs/integration/pwa-amp
  • https://www.ampproject.org/docs/integration/pwa-amp
  • https://www.ampproject.org/docs/integration/pwa-amp
  • https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
  • https://pwamp.shop
  • https://www.ampproject.org/docs/reference/components
  • https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/
  • https://validator.ampproject.org/
  • https://technicalseo.com/seo-tools/amp/

×