How to develop an eCommerce AMP
As of 2019, 52% of total internet users are browsing via mobile phones or similar small-screen devices. Statista recently announced (https://www.statista.com/topics/871/online-shopping/) this percentage is likely to increase beyond 80% in the coming 2 years. Therefore, eCommerce retailers are focused and looking towards improving mobile customer journeys and development functionality, website features and technology that is focused solely for mobile devices.
In this article, we explore why and how the Google AMP project was initially created, how eCommerce retailers can migrate towards this latest format of the web, and whether AMP is a good idea at all.
Contents Guide: (Click the link to skip to the section you’re looking for)
https://remarkable.net/blog/how-to-develop-an-ecommerce-amp/#what-is-AMP
https://remarkable.net/blog/how-to-develop-an-ecommerce-amp/#structure-of-an-amp
https://remarkable.net/blog/how-to-develop-an-ecommerce-amp/#building-an-amp
https://remarkable.net/blog/how-to-develop-an-ecommerce-amp/#tracking-an-amp
https://remarkable.net/blog/how-to-develop-an-ecommerce-amp/#benefits-of-amp
https://remarkable.net/blog/how-to-develop-an-ecommerce-amp/#amp-myths-debunked
What is AMP?
AMP stands for Accelerated Mobile Pages and is a website framework and format that allows for smooth, near-instant loading of content. It is likely you will have noticed the lightning icon next to particular pages listed in Google, indicating they are AMP-format pages. As well as speed, AMP was developed to focus the web industry on the growing requirement for device-agnostic customer experiences, moving away from fragmented mobile journeys.
Loading speeds are now more important than ever before – firstly, search engines like Google are including this performance and scoring as part of their ranking algorithms, meaning if your website is slower than others then it will rank lower, and therefore receive less traffic from organic listings in search engines. Google’s view on AMP remains favourably and AMP pages are seen to be ranked much higher on mobile devices by default. Secondly, website visitors are not happy to wait any longer than 3 seconds for a page to load – any retailer will be losing traffic if this is the case for them.
The AMP Structure
The structure and practice of implementing AMP are different for eCommerce retailers, essentially more complex but fundamentally more powerful.
To begin with, AMP was created and launched in 2016 for content such as blog articles, news pages and how-to guides. Before starting to migrate through to eCommerce application in 2017, first spotted on marketplace giant eBay.
Essentially, the AMP setup is relatively straight forward: where instead of having one HTML document for a page, there are two. The second file (where the AMP tags are installed) normally sits on a subdomain or subfolder on the domain. For example example.com/page and example.com/amp/page
The initial structure of AMP pages is made up of 3 parts: the HTML tags, Javascript to replace existing JS and AMP styling.
Build AMP for eCommerce
Every page type on an eCommerce website is not relevant for an AMP implementation, for example, smaller pages with not many large images such as the ‘Contact-us’ page or ‘FAQ’ page would not need transforming. However, page types like product categories or the homepage, are ideal for AMP implementation.
AMP relies on simple Javascript and CSS, making the on-page functionality available fairly restricted for the time being. The framework also disallows further more extensive Javascript, like iFrames not being allowed.
Although rewriting large areas of a website can be a daunting task, the AMP framework allows for functionality to be written relatively quickly. AMP will help you with the following areas when it comes to building product pages:
- Product Image Gallery
The ‘Getting Started’ guide on the AMP documentation website gives details and samples of Accelerated Mobile Page code, which can be useful when implementing. The topics cover installing a product page using the amp-bind component, product category pages including amp-form for the Site Search component and also checkout payments via Android & Apple Pay. https://amp.dev/documentation/examples/e-commerce/amp_for_e-commerce_getting_started/.
Track Commerce AMP
Tracking accelerated mobile pages in 2019 should really be more advanced than it currently is. Tracking any eCommerce site is essential and critical to any retailer looking to understand customer behaviour. However, because of the JS restrictions in place, the only tracking tags allowed to fire on an AMP page is Google Analytics and official partners such as Adobe Analytics, Chartbeat and Quantcast.
Despite the restriction on tracking, the publishers and retailers who have implemented AMP have reported incredible performance gains, for example:
- AMP pages are 4x faster, use 10x less data compared to non-AMP pages
The benefits of AMP for Commerce
Speed, speed, speed. By-design, the AMP framework is quicker than any other web format, it does this by changing the architecture of a web page and adding client-side caching through service workers. It is possible to improve speed even further by using the AMP CDN.
Speed leads to higher Google rankings, higher rankings lead to higher volumes of traffic, and higher volumes of traffic lead to higher revenue. SEO 101.
Additionally, the consumption of mobile web pages is only ever going to increase over time and the instant-loading of pages will promote visitors to return to your website in the future if their experience has been positive.
Common AMP myths debunked
- AMP is owned by Google
5. Responsive is just as fast as AMP
Technically true. Yet typically this is incorrect, as 99% of responsive web pages are bloated with additional tracking tags, un-needed code and additional assets are loaded that inevitably slow load times down.
You can find more information about AMP, what features will be available soon and further resources on developing this technology here: https://amp.dev/
If you are not convinced that AMP pages are the right option for your eCommerce development schedule, then we suggest exploring https://www.wegotravel.co.uk/
Why choose Remarkable Commerce?
Are you seeking professional assistance with your ecommerce strategies? We are a specialist eCommerce software vendor with a highly experienced team of developers. Established in 1999, our track record has proven that our expertise achieves outstanding commercial results as we work with some of the most prestigious names in the retail industry including https://www.moss.co.uk/, https://www.jeffbanksstores.co.uk/ and https://sanderson.sandersondesigngroup.com/.
We work with the latest software and are always one step ahead with any upcoming marketing updates and developments. Luckily, we have several of the brightest sparks in the industry who take a flexible approach in fine-tuning to each respective business’ bespoke marketing requirements. Our reliability has consistently led to great feedback from our clients, who are impressed by how quickly our team respond to them and how efficient we are in making any changes that they require.
https://remarkable.net/ and find out how our services could be of benefit to you!