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.
Through the extraordinary progress and open-source collaboration to date, we have built AMP to be great at handling news and blogs, but it’s also now suitable to build many aspects of an e-commerce site. AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.
To take a closer look at this, we’ll step into the shoes of a typical user, making their way through an e-commerce site. Throughout the journey, we’ll highlight ready-to-use and proposed features of AMP that can be used to build a fast, beautiful shopping experience.
Before we begin
The general idea is that the entire site doesn’t have to be converted at once. We recommend analyzing and AMP’ing the portions of the site that make sense. Identify each page type’s main goal and key features to help decide where to get started.
AMP has a large selection of pre-built and easy-to-use components to enable interactive experiences like image carousels or instrumentation to collect analytics data. These foundational pieces are a good starting point. Content features like product descriptions, images, reviews, and navigation can be implemented in AMP easily today. Start exploring and building prototypes to learn how you might build these experiences of your site in AMP.
More sophisticated and complex scenarios like purchasing flows cannot yet be done in AMP but is something we’d like to explore through gathering additional input on use cases and user flows. In the meantime, consider if it’s possible to have a button click or similar type of hand-off to a non-AMP HTML page to complete a purchase flow. Remember that AMP is an open-source community effort. It’s easy to engage, start developing, and contribute new components as needed. The format will grow richer in time.
With all that said, let’s get on with stepping through the user’s journey.
Step 1: Browsing
A sample home page or category page
Users often start their journey from a site’s home page or a product category page. These are great pages to AMPlify first, as eBay discussed in their post.
These types of pages are very well suited for AMP. The content is typically static and geared toward offering the best showcase of available products. Use features like <amp-carousel> to offer a mobile-optimized way to browse other products organized by subcategories.
Step 2: Landing on a product page
Our user arrives at an AMP’ed product page after clicking on an item from a featured listing on our e-commerce site’s home page.
AMP can help you create a rich beautiful page to showcase your product. Add bold hero images and videos using the <amp-carousel> and <amp-video> elements. Focusing on e-commerce is inspiring us to dream up additional experiences to support in AMP. For example, we are looking to introduce a new component that will enable presenting a large image of a product that can be changed by choosing from a strip of thumbnails.
For sections with more detailed requirements or extended descriptions, use the <amp-accordion> tag. In addition, enable users to share product links with the <amp-social-share> element. Should a user want to switch gears and explore some other areas of the site, <amp-sidebar> allows you to implement a navigation menu across all pages.
Step 3: Exploring related products
Related products on a product page
We know that users often change their mind and that sometimes the initial product they are looking for isn’t the one they want, so let’s show them more products.
With AMP, there are multiple approaches to show related products. One approach is to statically publish a list of related products.
Another approach is to generate the list on the fly. To do so, just use <amp-list> to fire a CORS request to a JSON endpoint which supplies the list of related products. These are populated into an amp-mustache template on the client. What’s more, the result list can be personalized, because the content is dynamically generated server-side for each request.
Step 4: Personalizing & understanding
Knowing a user’s preferences is powerful. You can tailor content to them to increase conversions.
Use the <amp-access> component to display different blocks of content dependent on a user’s status, such as if the user is logged in. Much like the <amp-list> component, fire a request at a JSON endpoint and then present the data into an amp-mustache template.
To see how users are interacting with the site at an aggregate level, use the <amp-analytics> component. Collect analytics data directly, or integrate with 3rd party analytics platforms. AMP supports several popular analytics vendors.
Step 5: Supporting purchase
The final piece of the puzzle comes in when the user is ready to make the purchase and taps on “Buy”. This is likely to be the point of transition from an AMP-only environment to full HTML. Ensure that transition is as fast and consistent with the experience they have had so far.
If your site is a Progressive Web App (PWA), then AMP provides an ideal bridge in the form of <amp-install-serviceworker>. This allows your AMP page to install a service worker for your domain regardless of where the user is viewing the AMP page. You can then preemptively begin caching content from your PWA so that when the transition out happens, all of the needed content is cached, keeping the experience fast and the customer engaged.
Step 6: Keep caching in mind
AMP is built to work within a smart caching model. This enables platforms that refer traffic to AMP pages to use caching and prerendering to load web pages fast—virtually instantly. However, this also means you may see less traffic to your own origin where the AMP pages are originally hosted and see the balance of the traffic through proxied versions of your pages served by AMP caches. It’s important to keep these factors in mind when analyzing your traffic and engagement.
* * *
Here again are links to AMP By Example pages where you can see samples of a couple of the sample pages highlighted in the pictures above:
Hopefully this walkthrough has given you a taste of what’s available now, but it’s by no means everything that’s possible. We’d love to see examples of what you’re building and hear your feedback over at the GitHub repo on what needs to be added to AMP to enable the e-commerce experiences you want to create.
Posted by Boris Farber and Rowan Merewood, Developer Advocates at Google; and Rudy Galfi, Product Manager, AMP Project