Building Beautiful, Interactive AMP Pages for E-commerce & Beyond -- Google I/O 2017 Live Blogs — Legal Marketing & Technology Blog

Google I/O 2017 is winding up and so is our Live Blog coverage, but we have one more session to attend. Join us as we learn about how AMP can be used for more than just plain content #io17

Google I/O 2017 is coming to a close but I have one last session to attend and one last live blog to write. Yesterday I attended a session on upgrading AMP Pages to Progressive Web Applications, but thanks to the new feature <amp-bind>, as well as some powerful existing features like <amp-list> and amp-form, there is a great deal of interactivity you can add directly to an AMP page without needing to leave an AMP page. This session shows how these new features can take AMP enabled sites beyond articles to full interactive e-commerce websites.

Session Video

Live Blog Transcript

15:26: Once more unto the breach

here's my last session live blog of Google I/O 2017

15:28: The problem with a front row center seat

is your view of the screen has massive keystone issues 🙂

Building Beautiful, Interactive AMP Pages for E-Commerce & Beyond

15:32: Great view of the stage though...

The Panel for the AMP e-Commerce Discussion

15:33: When AMP started it was primarily News sites and blogs

15:34: More recently it has added support for eCommerce as well with adoption by 1800flowers and more

15:35: Promotions

Promotions with <amp-carousel>

15:35: Search

Search items with amp-form

15:36: Product Page

Product image gallery with <amp-carousel>

15:37: Product refinement

Product refinement with <amp-selector>

15:38: Additional content

Additional content with <amp-selector> to create a tabbed panel.

15:38: Shopping cart

Shopping cart with amp-form

15:39: amp-form supports variable substitution

use CLIENT_ID to create a unique id, which you can include as a hidden field in an amp-form

15:40: Buy now button

Implement buy now using the payment request api using <amp-iframe>

15:40: Related Products

Related products list using <amp-list> to pull a list from a json endpoint and a mustache template

15:43: AMP Bind

@choumx is takign the stage now to talk about <amp-bind>

15:45: Custom interactivity

Wrap non-AMP page in <amp-iframe> 🙁
Submit pull request on GitHub... time... more time...
Use <amp-bind> 🙂

15:45: How does amp bind work?

State
Binding
Mutation

15:45: State

JSON data in your document, <amp-state> lets you either add json directly to the dom inline or with remote fetch

15:47: Binding

Text is bound to an expression which can refer to state

15:47: Mutation

AMP action system can update the state

15:49: Sample e-commerce page

code on bit.ly/amp-apple

15:50: Expressions in amp-bind

Basically JavaScript "lite"

15:51: Expressions in amp-bind

Touring Complete, don't actually build a touring simulator in your amp pages... but you can

15:52: <amp-bind>

fast, doesn't not run on page load
Concurrency via Web Worker
Safe
Safe javascript subset

15:53: We want you

amp-bind is available in experimenting & launching soon

15:53: AliExpress and wego have been implementing amp-bind

15:54: Case Study: Myntra

Myntra: Ambarish Kenghe (@kenghe) Chief Product Officer is taking the stage

15:54: Myntra is largest online fashion play in india

18M monthly active
50M pageviews/day
5M sessions/day
$1B+ revenue runrate

15:55: The Problem

60% incoming traffic
30% bounce
7s pageload

15:55: Why AMP

1 second pageload delay
11% fewer pageviews
16% lower satisfaction
7% fewer conversions

15:56: Majority of internet in India is mobile, 70% of Myntra's revenue is mobile

15:56: Would AMP be dynamic enough? How much time would it take to build them?

15:57: Myntra AMP Conversion Day #1

Read documentation & build a simple page using amp-list
confidence = boosted

15:57: Myntra AMP Conversion Day #2

<amp-list> call to load results was slow did server side rendering
page was just 14kb gzipped

15:57: Myntra AMP Conversion Day #3

Built interactivity through <amp-bind> for search & sort
<amp-bind> was experimental, but the results were promising

15:58: Myntra AMP Conversion Day #4

Added custom fonts & crafted the UX to perfection
Couldn't distinguish amp page from non-amp

15:58: Myntra AMP Conversion Day #5

<amp-analytics> for tracking with GA
Nested <amp-accordion>s to achieve multi-level side navigation

15:58: Myntra AMP Conversion Day #7

Crafted filters
DONE!

15:59: Myntra AMP Conversion Day #7

Applause, they converted their site to AMP with just a few engineers

15:59: Browse pages went from 7s to 0.53s

16:01: What's next

<amp-bind> to modify amp-list src to avoid page reload on sort, pagination
<amp-install-serviceworker> to prefetch next non-amp page content
PWAMP - enage users early via amp and retain them with an app like pwa

16:02: E-commerce & beyond

so other than ecommerce, what else can you do?

new layer of dynamic behavior on AMP components
Add interactions to regular HTML elements

16:03: Useful links

AMP: ampproject.org
Samples and documentation: ampbyexample.com
amp-bind: bit.ly/amp-bind
Developer support: ampproject.org/support/developer
Youtube: youtube.com/TheAMPProject

16:05: Thank You

16:10: And that's a wrap!

And that's it from our #io17 Live Blogs

Thank you for joining me on my live blogs these last 3 days. Thanks to Barbara for being my camerawoman taking pictures of slides and speakers while I worked on taking notes.

I'll update all of these blog posts over the next couple of days to make them finalized blog posts