Previously we looked at how accelerated mobile pages (AMP) are changing the face of mobile browsing for users and now it’s time to look at the e-commerce side of things. Now I will warn you – things get a little (A LOT) technical with this post, so if I lose you along the way sorry, not sorry.
As mentioned before, the original use of AMP was for news pages. However, the bigger picture for the AMP project is for the technology, already adopted for news pages, to be used to make all types of mobile content considerably faster and better than before. Essentially, the end result is to allow anyone to create high performing websites across multiple markets – whether it’s news, retail, travel and more. Google said, “AMP is a natural fit for e-commerce because AMP makes webpages fast, and fast pages help with purchase conversions.” So, if Google says it, it must be true, right?!
So what process does the average user go through when purchasing online? And how can we AMP this to the max?
Is it an all or nothing approach?
Well, no – it’s not! What you may not realise is your entire website doesn’t have to be converted all at once. In fact, it would be better to analyse portions of the site – start by figuring out each page’s goal and key features and from here you will know where you’re going.
What’s more, AMP has a large section of pre-built and easy-to-use components to enable interactive experiences like image carousels or instrumentation to collect analytics data. These are all good starting points as content features like images, product descriptions, reviews and navigation can be implemented in AMP easily.
More complex scenarios such as purchasing flows cannot yet be done in AMP but it’s something that could happen in the future so for now, let’s look at the journey of a customer on an e-commerce website.
In the beginning there is browsing
Generally speaking, we begin our journey on a site’s home page or product category page and these are great starting blocks to convert to AMP first if you’re new to all of this. The reason being, the content on these pages tend to be static and focused on offering the best showcase of available products. In addition, you can use the amp-carousel feature to offer an optimised way to browse other products via subcategories.
It’s AMP – and then some
So the customer has chosen a featured product from the home page to look at – what next? Why not make your page even more enticing with some of these AMP add-ons:
- Implement the amp-carousel and amp-video elements and you can further enhance your page offering
- Create an extended description by using the amp-accordion tag
- Maintain your social status with the amp-social-share element – it makes for quick and easy social media share options and could increase conversions too
- Finally, if the user wants to visit other areas of the site, don’t you worry, the amp-sidebar allows a navigation menu to be implemented across all your pages
Re-target lost conversions with related/similar products
We’re a pretty indecisive bunch when it comes to making a purchase, especially on mobile devices, which still lags behind desktops. And who can blame us, a footlong Subway is all it takes to put anyone off purchasing a bodycon dress.
However, let’s treat online shopping like a virtual shop – do you really want that customer to walk out empty handed? No, didn’t think so – so let’s maybe give that customer some alternative outfit options that may make them feel more comfortable.
With AMP coming in once again like Superman for Lois Lane, there are multiple approaches to show related products. One is to statically publish a list of related products – customers are already used to this so it’s a natural fit.
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 personalised, because the content is dynamically generated server-side for each request.
Getting under the skin of your customers
Knowing your customers inside and out means that you can tailor your content to them, making them feel valued and ultimately increasing your conversion rates.
In the world of AMP, you can use the amp-access component to display different blocks of content dependent on the user’s status, for example if the user is logged in (having loyal customers is always a bonus). This is similar to the amp-list component, just fire a request at a JSON endpoint and present the data in amp-mustache.
There is also the opportunity to see how users are interacting with your site by using the amp-analytics component – so there’s no reason to not review how you AMP improvements are performing.
Securing that all important purchase
Your customer has filled their basket and is ready to buy their goods – at this stage there is nothing more important than helping that customer get through the virtual till quickly and effectively. This is likely to be a point of transition from an AMP-only environment to full HTML.
If the site is a Progressive Web App (PWA) then AMP provides an ideal bridge in the form of amp-install-serviceworker. This will allow your AMP page to install a service worker for your domain regardless of where the user is viewing the AMP page. You can begin caching content from your PWA so all the needed content is cached and it keeps the experience fast and the customer engaged.
Keep caching on the brain
AMP is built to work within a smart caching model which enables platforms that refer traffic to AMP pages to use caching and prerendering to load web pages fast or even instantly! However, this also means you could see less traffic to your own origin where the AMPs are originally hosted and see the balance of the traffic through proxied versions of your pages served by AMP caches.
The true aim for AMP is to provide a complete overhaul of the mobile e-commerce experience, utilising a stripped-back HTML to provide not just fast loading speeds but also faster transitions between products. So AMPing up your webpages seems like the right way to go.