• websites

AMP for E-Commerce Getting Started

Here is a quick getting started guide for creating e-commerce webpages with AMP. This guide provides samples and tips covering the following topics:

• How to build Product pages
• How to build Product category pages
• Handling Dynamic content in AMP
• Personalizing AMPs and supporting Logins
• Checkout and Payments
• Analytics

Product pages

It's possible with AMP to create beautiful and interactive product pages. This sample demonstrates how to build a complex product page with dynamic product configuration and an add-to-cart flow. With the introduction of amp-bind it's now possible to create truly interactive AMP pages: it can be used to coordinate page state based on user interaction to show and hide arbitrary divs.

These samples help you get started with building a product landing page with AMP: - Product gallery: with amp-carousel and amp-bind it is easy to create sophisticated image galleries. Here are some samples how to implement image galleries with captions and thumbnails in AMPHTML. - Product configuration: use amp-selector and amp-bind for advanced product configuration. For an advanced version see the sample product page. - Add to Cart: the product sample demonstrates a fully functional add-to-cart flow which works across different origins. - Tabs: can be easily implemented by combining amp-selector with a flex layout. Here is a sample. - Star ratings: here is a sample demonstrating how to implement a star rating system in AMP. - Call tracking: use amp-call-tracking to track calls initiated from your AMPs. - Comments / reviews: comment or review submission can be implemented using amp-form. Combine with amp-access if a user login is required. Here is a sample combining both.

Product Category Page

As popular landing pages for users, product category pages are well suited for AMP. They are often a mix of editorial content and the hero-style presentation of products. Here is a working sample of a product pages demonstrating common features of a category pages such as product listings or search.

Creating category pages with AMP is possible:

• Product search: use amp-form to implement a search form. You can serve search results either on a different page (which may not be AMP) or, even better, render search results directly inside the current page. See an example of autosuggest.
• Product filtering and sorting: see an example of client-side filtering.

Dynamic Content

AMPs can be served from an AMP Cache on a different origin, for example, when they're served in Google Search results. This makes it necessary to consider the AMP Cache's caching strategy when implementing AMPs:

If it's critical that users never see stale data or that data is never older than 15s then additional steps are required. Product pricing or availability are typical examples for when this is the case. To ensure that users always see the latest content, you can use the amp-list component which will fetch and render content directly from your server.

Here is a sample how to render product name and price using amp-list:

<amp-list height="24" layout="fixed-height" src="/static/samples/json/product.json" binding="no">
  <template type="amp-mustache">
    {{name}}: ${{price}}
  </template>
</amp-list>

Display personalized content

It's common for e-commerce websites to display personalized content or recommendations in a carousel. One way to implement this is to have an amp-list returning the content of an amp-carousel. The amp-mustache default behaviour for rendering amp-list data is to cycle inside items objects; adding an amp-carousel inside the template would make the template render multiple carousels; one way to work around this is having the amp-list endpoint return a single entry in items, like this:

{"items": [{
  "values": [/*...*/]

<amp-list width="auto" height="400" layout="fixed-height" src="/static/samples/json/product-single-item.json" binding="no">
  <template type="amp-mustache">
    <amp-carousel height="400" layout="fixed-height" type="carousel">
      {{#values}}
        <amp-img src="{{img}}" layout="fixed" width="400" height="400" alt="{{name}}"></amp-img>
      {{/values}}
    </amp-carousel>
  </template>
</amp-list>

Best Practice: use multiple amp-list instances with a single shared JSON endpoint to benefit from the AMP runtimes request caching and avoid multiple requests to this JSON endpoints.

Another approach is to use amp-bind with a JSON endpoint, This works well if up-to-date data needs to be available after an user interaction, for example, a hotel page displays room availability when the user selects specific dates.

<amp-state id="products" src="/static/samples/json/products.json"></amp-state>
<amp-img on="tap:AMP.setState({ productId: 0})" src="/static/samples/img/red_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 1})" src="/static/samples/img/green_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 2})" src="/static/samples/img/product1_alt1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<div [text]="products[productId] + ' available'">Please select a product</div>

Personalization and Login

An easy way to provide personalized content in AMPs is to use amp-list. You can either use cookies (using the attribute credentials="include") or AMP's client id:

<amp-list credentials="include" height="24" layout="fixed-height" src="/static/samples/json/product.json?clientId=CLIENT_ID(myCookieId)" binding="no" class="m1">
  <template type="amp-mustache">
    Your personal offer: ${{price}}
  </template>
</amp-list>

Best Practice: make sure to configure the AMP CORS headers when using amp-list for personalization.

If you rely on logged-in users, you can use the amp-access component to log users into your website directly from an AMP page. Check out this sample for how to implement a login flow in AMP.

Checkout flow and Payments

To avoid user frustration, make it possible for users to initiate checkout directly from within your AMP pages. Here are three ways you can handle checkout in AMP pages:

• In Chrome you can use the Payments Requests API. Checkout the payments sample to see how it works.
• Implement your checkout flow inside your AMP pages using amp-form.
• Re-direct users to the checkout flow on your website. Important: make the transition as seamless as possible, in particular, don't let users enter the same information twice.

Analytics

Make sure to measure how users engage with your AMP Pages using amp-analytics. Important: test your analytics integration and make sure that AMP traffic is correctly attributed, in particular if the AMP is served from a different origin. For testing, you can load your AMPs via the Google AMP Cache.

• Written by @sebastianbenz