Early results for e-commerce companies that are investing in Accelerated Mobile Pages (AMP) are showing that the format is paying off in terms of conversions, speed, bounce rates and mobile acquisition costs.
- Brazil-based Fastcommerce’s clients are seeing a 15% lift in conversions on mobile as compared to non-AMP pages across their 2M AMP pages
- WompMobile creates effective mobile experiences for e-commerce websites and saw a 105% increase in conversion rates and a 31% decrease in bounce rates with AMP pages.
- Wego.com, the largest travel marketplace in the Middle East and Asia Pacific, saw a 95% increase in partner conversion rates and a 3x increase in ad conversions after creating AMP versions of key landing pages.
- AMP drives close to half the mobile traffic of French organic retailer Greenweez and from January to March 2017, they saw an 80% increase in mobile conversion rates and 66% decrease in mobile acquisition costs.
We’ve seen that AMP brings an almost-instant page load that makes it ideal for the first user interaction with your site. But there’s much more to an e-commerce experience than speed, and AMP is your ideal partner in this journey. For those of you that want to see similar success to Greenweez or Fastcommerce, we’d like to share an overview of all that is possible for e-commerce with AMP.
The Basics
Let’s start with the basics of your e-commerce site. Check out AMP for E-commerce Getting Started on the AMPbyExample website. There you can find sandbox examples to start building product pages, product category pages, and checkout/payment flows. Provide your customers with everything they need to make a decision – reviews, photos, product customization, and more.
Myntra, the largest online fashion player in India, saw a 60% improvement in speed and 40% reduction in bounce rates across their most important landing pages. By using amp-bind they also implemented sorting and filtering, and size selection on these pages to give their users a rich experience.
Some highlights of what AMP supports are:
- Dynamic content: To ensure your customers are always seeing the freshest information, amp-list and amp-bind can be used to fetch and render up-to-date content on your pages.
- Checkout/payments: You can implement a shopping cart and initiate check-out flows directly from within your AMP pages. Whether you want to use the Payment Request API, use amp-form, or redirect users to a non-AMP page on your website is up to you. WompMobile shared their payment implementation at this year’s AMP Conf, which you can check out in the linked video.
- Personalization/log-in: amp-list can be used to provide personalized content to your customers – whether in the form of recommended products or saving the state of their shopping cart.
- A/B Testing: To learn what works best for your users, you can use amp-experiment to conduct user experience experiments on your AMP pages.
For features that aren’t supported natively, you can use amp-iframe to embed content and incorporate features like chat applications, maps, or other third party features. Or if you prefer, you can also hand off to a non-AMP page on your website.
amp-bind
Many of these engaging and useful e-commerce experiences are made possible with amp-bind, an interactivity model which allows you to link user actions with different document states. Back in July, we detailed many examples of the new opportunities amp-bind brings – here are some more of the key ones for e-commerce.
- Product color and size selection
- Server-side filter & sort
- Search results without page reload
- Search auto-suggest
In the example we built below, you can see filtering and sorting in action:
And as we’ve mentioned, you will probably discover more capabilities than what we’ve identified. Explore the possibilities and share with the community what you find.
AMP + PWA
When Wego, the largest travel marketplace in the Middle East, rebuilt their landing pages with AMP and their more interactive pages with PWA, they saw tremendous improvements in site performance. Their AMP pages saw more than a 10x increase in page speeds and a 12% increase in organic page visits.
While PWAs support engaging, app-like features, the Service Worker necessary for the PWA is unavailable the first time a user loads your site. AMP provides an ideal entry point to your site that allows the PWA to load behind the scenes. With their AMP + PWA implementation, Wego saw 95% more conversions and 26% more visitors to their site.
As you can see, e-commerce sites in particular can benefit from this combination: AMP dramatically speeds up the first page on your site and PWAs speed up the loading time for each subsequent click. This is especially useful when the conversion funnel spans multiple pages.
And as an added bonus, PWAs also support engaging, app-like features, such as add-to-homescreen buttons, push notifications, reliability in poor network conditions, and functionality even when the user is completely offline.
To learn more about how to implement an AMP + PWA site, check out our this video tutorial and guide.
Analytics
amp-analytics supports both third-party analytics tools and your own in-house analytics solutions. You can find a list of all the third-party tools that have built in configurations for use with the amp-analytics component here – including Adobe Analytics, Google Analytics, Clicky Web Analytics, and more. For in-house implementations, check out our AMP By Example on Analytics. At AMP Conf earlier this year, companies like eBay and Pinterest also went into more details about how they incorporated analytics for AMP, so check out the linked videos to learn more.
* * *
The AMP Project is committed to helping sites utilize the format’s lightening fast speeds for e-commerce. You can expect to see additional resources, like new e-commerce templates on AMPstart.com in the coming months. Thanks to the AMP development community for your work and feedback. As always, please let us know if you have any issues or feature requests.
Posted by Lisa Wang, Product Manager, AMP Project