Instant-Loading AMP Pages Now Enable Interactivity: Introducing amp-bind

Accelerated Mobile Pages (AMP) are versions of your common landing pages are stored on search engine servers so that content can be previewed in search results, and load almost instantly when tapped.

When the AMP project first launched, its initial use cases and feature development focused on building AMP to support news and blog content – but that’s no longer the case. AMP has evolved and expanded beyond its original use cases, and is now being used to create highly performant websites across many verticals – including ecommerce.

AMP and ecommerce are the perfect fit because AMP encourages the development of highly performant websites. And as we all know, great performance leads to more conversions.

Recently, an AMP component by the name of “amp-bind” was released. Amp-bind unlocks functionality on AMP pages that was previously impossible – it enables the ability to add interactivity to AMP pages beyond AMP’s pre-built components.

This is very exciting, especially for ecommerce use cases. Traditionally, AMP pages were very static in nature and had little to no dynamic elements (beyond pre-built AMP components like carousels) within its pages, which can be attributed to the current limitations of AMP (no javascript, constrained markup). amp-bind allows you to work around these limitations to create interactive and dynamic AMP pages.

What can you do with amp-bind?

At a technical level, amp-bind allows developers to add custom stateful interactivity to their AMP pages via data binding and JS-like expressions. In less technical terms, amp-bind links user actions with triggers to show different states of the page, and give retailers much more freedom in regards to the type of interactions they’re able to define directly on their AMP pages.

Take for example one of our customer’s AMP product detail pages (PDP):

Lancome-AMP

Notice shoppers can’t actually select product options, or even see additional product information, directly on the page. Clicking on either of the two highlighted options will actually boot the user off to the canonical mobile site where they can then proceed to select product options and find out more product information.

This is where amp-bind could really shine. With amp-bind, retailers now have the ability to implement features that rely on dynamic content and user interaction. The following screenshot is what that very same AMP PDP page now looks like utilizing amp-bind.

Lancome-AMP-2

Notice how the previous ‘See product options’ and ‘Find out more’ call to actions have now been replaced by actual product options, and the ability to add an item to your cart or wishlist. This provides shoppers who arrive on your site via AMP a much richer and more complete experience, similar to what they’d receive if they were to arrive on the canonical version of the site.

amp-bind-03

Now, an AMP PDP with an image carousel that contains multiple images of the product including its variations (different colors, sizes, etc). With amp-bind, the PDP can be set up to automatically change the active image within the carousel based off of whichever product options are selected.

These are just a couple of different ways retailers can take advantage of amp-bind to enhance their ecommerce AMP pages. It opens up many new use cases by introducing flexible interactivity that was not previously possible on AMP pages.

What does this mean for AMP & ecommerce?

Prior to amp-bind, many of the core features of the canonical version of the page had to be cut on the AMP version –  resulting in a very gutted, static experience. As you’ve seen with the example above, it’s now possible to introduce interactive and dynamic features directly in AMP pages. This also means that you can get much closer to a 1:1 appearance and feature parity between AMP and all the other screens supported by your ecommerce site.

The videos below showcase the AMP experience versus the Progressvie Web App experience for one of our customers leveraging amp-bind. The experience for both AMP and PWA are now so similar that it’s difficult to differentiate between the two at a glance.

Now you don’t need to make sacrifices on the experience or level of interactivity to get instant-loading AMP pages – and you can transition to a PWA in the background to ensure all subsequent page loads are just as fast.

Mobify & amp-bind

AMP has been a core feature of the Mobify platform since we launched it about a year ago. We’re constantly looking for opportunities to improve our AMP offering, so we’re excited to announce that support for the amp-bind component is now included in our AMP SDK. Dynamic AMP Pages via amp-bind are included for any customer looking to leverage amp-bind and the dynamic functionality it unlocks for AMP.

Want to know more?

Want to learn more about AMP? Take a peek at our AMP FAQ, or our more comprehensive AMP for ecommerce blog post.

Leave a Reply

avatar
  Subscribe  
Notify of

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in mobile commerce so you can effectively engage your customers and drive revenue.

Related Articles