Browse eBay with Style and Speed

Editor’s note: Developers in verticals such as e-commerce have started embracing AMP to bring a faster experience to their users, and we’re excited to highlight their efforts.

The following was originally posted on the eBay Tech Blog by Senthil Padmanabhan, Principal Engineer & Frontend Lead at eBay. Below you can read about how Senthil’s team started working on AMP and learn about their upcoming plans to get involved with the AMP Project.

* * *

One of the top initiatives for eBay this year is to provide a compelling browse experience to our users. In a recent interview, Devin Wenig has given a good overview of why this matters to eBay. The idea is to leverage structured data and machine learning to allow users to shop across a whole spectrum of value, where some users might desire great savings, while others may want to focus on, say, best selling products.

When we started to design the experience, our first area of focus was mobile web. Similar to many other organizations, mobile web has been our highest growing sector. We wanted to launch the new browse experience on mobile web first, followed by desktop and native.

The core design principles of the new mobile web browse experience were to keep it simple, accessible, and fast, really fast. On the front-end side of things, we made a couple of choices to achieve this.

  • Lean and accessible — From the beginning we wanted the page to be as lean as possible. This meant keeping the HTML, CSS, and JS to a minimum. To achieve this goal, we followed a modular architecture and started building atomic components. Basically a page is a bunch of modules, and a module is built from other sub-modules, and so on. This practice enabled maximum code reuse, which in turn reduced the size of resources (CSS and JS) drastically. In addition, our style library enforced accessibility through CSS — by using ARIA attributes to define styles rather than just class names. This forces developers to write a11y-friendly markup from the beginning, instead of it being an afterthought. You can read more about it here.
  • Code with the platform — The web platform has evolved into a more developer friendly stack, and we wanted to leverage this aspect — code with the platform vs. coding against it. What this meant was that we could reduce the dependency on big libraries and frameworks and start using the native APIs to achieve the same. For instance, we tried to avoid jQuery for DOM manipulations and instead use the native DOM APIs. Similarly, we could use the fetch polyfill instead of $.ajax etc. The end result was a faster loading page that was also very responsive to user interactions. BTW, jQuery is still loaded in the page, because some of eBay platform specific code is dependent on it, and we are working towards removing the dependency altogether.

But our efforts did not stop there. The speed aspect was very critical for us, and we wanted to do more for speed. That is when we ran into AMP.

Experimenting with AMP

The AMP project was announced around the same time we started the initial brainstorming for browse. It seemed to resonate a lot with our own thinking on how we wanted to render the new experience. Although AMP was more tuned towards publisher-based content, it was still an open source project built using the open web. Also, a portion of the traffic to the new browse experience is going to be from search engines, which made it more promising to look into AMP. So we quickly pinged the AMP folks at Google and discussed the idea of building an AMP version for the browse experience, in addition to the normal mobile web pages. They were very supportive of it. This positive reaction encouraged us to start looking into AMP technology for the eCommerce world and in parallel develop an AMP version of browse.

Today we are proud to announce that the AMP version of the new browse experience is live, and about 8 million AMP-based browse nodes are available in production. Check out some of the popular queries in a mobile browser — Camera Drones and Sony PlayStation, for example. Basically adding amp/ to the path of any browse URL will render an AMP version (for example, non-AMP, AMP). We have not linked all of them from our regular (non-AMP) pages yet. This step is waiting on few pending tasks to be completed. For now, we have enabled this new browse experience only in mobile web. In the next couple of weeks, the desktop web experience will also be launched.

So how was the experience in implementing AMP for the eCommerce world? We have highlighted some of our learnings below.

What worked well?

  • Best practices — One of the good things about AMP is that at the end of the day it is a bunch of best practices for building mobile web pages. We were already following some of them, but adoption was scattered across various teams, each having its own preference. This initiative helped us consolidate the list and incorporate these best practices as a part of our regular development life cycle itself. This made our approach towards AMP more organic, rather than a forced function. The other good side effect of this is even our non-AMP pages become faster.
  • Less forking in code — This follows the previous point. Since we started following some of the AMP best practices for building regular pages, we were able to reuse most of the UI components between our non-AMP and AMP browse page. This resulted in less forking in code, which otherwise would have become a maintenance nightmare. Having said that, there is still some forking when it comes to JavaScript-based components, and we are still figuring out the best solution.
  • AMP Component list — Although the AMP project’s initial focus was more towards publisher-based content and news feeds, the AMP component list was still sufficient to build a basic product for viewing eCommerce pages. Users will not be able to do actions on items (such as “Add To Cart”), but they still get a solid browsing experience. The good news is that the list is getting better and growing day by day. Components like sidebarcarousel, and lightbox are critical in providing a compelling eCommerce experience.
  • Internal AMP platform — We have been thinking about leveraging the AMP ecosystem for our own search, similar to how Google handles AMP results. This plan is in very early stages of discussion, but the possibility of our search using AMP technology is very interesting.

The complex parts

  • Infrastructure components — To launch an eBay page to production, a lot of infrastructure components automatically come into play. These are things like Global header/footer, site speed beacon kit, experimentation library, and the analytics module. All of them have some amount of JavaScript, which immediately disqualifies them from being used in the AMP version. This adds complexity in development. We had to fork few infrastructure components to support the AMP guidelines. They had to go through a strict regression cycle before being published, which added delays. Also, our default front-end server pipeline had to be conditionally tweaked to exclude or swap certain modules. It was a good learning curve, and over time we have also replaced our early quick hacks with more robust and sustainable solutions.
  • Tracking — AMP provides user activity tracking through its amp-analytics component.amp-analytics can be configured in various ways, but it still was not sufficient for the granular tracking needs that eBay has. We also do stuff like session stitching, which needs cookie access. Creating an amp-analytics configuration to suit our needs was slowly becoming unmanageable. We need some enhancements in the component, which we are hoping to develop and commit to the project soon.

What’s next?

We are excited to partner with Google and everyone else participating on the AMP Project to close the gap in launching a full-fledged eCommerce experience in AMP. We have created a combined working group to tackle the gap, and we will be looking into these items and more.

  • Smart buttons — These enable us to do actions like “Add To Cart” and “Buy It Now” with authentication support.
  • Input elements — User interactive elements are critical to eCommerce experiences, be they simple search text boxes or checkboxes.
  • Advanced tracking — As mentioned earlier, we need more granular tracking for eBay, and so we have to figure out a way to achieve it.
  • A/B Testing — This will enable experimentation on AMP.

With items like these in place, AMP for eCommerce will soon start surfacing.

We will also be looking into creating a seamless transition from the AMP view to a regular page view, similar to what the Washington Post did using Service Workers. This will enable users to have a complete and delightful eBay experience without switching contexts.

We are also asked the question of if there is more focus towards web over native. The answer is NO. At eBay, we strongly believe that web and native do not compete each other. They indeed complement each other, and the combined ecosystem works very well for us. We will soon be launching these browse experiences in our native platforms.

We are on our path to making eBay the world’s first place to shop and this is a step towards it. Thanks to my colleague Suresh Ayyasamy, who partnered in implementing the AMP version of browse nodes and successfully rolling it to production.

Senthil

Browse eBay with Style and Speed

An update to the AMP Roadmap to close out Q2

As we bid adieu to Q2, we made some updates on the AMP Roadmap to make sure the status of projects listed there reflects where these efforts stand today.

Here is a summary across the focus areas:

Format

In the past three months we launched elements like <amp-sidebar>, <amp-accordion>, and <amp-social-share> to bring some highly requested functionality to AMP pages like site navigation menus and share bars. We introduced <amp-live-list> to enable live-updating content, and look forward to pushing it across the line from experimental to stable in Q3.

There are several additional priorities this quarter, such as support for forms, that haven’t landed just yet, which we expect to continue focusing on into Q3. Over the next few months, we are looking at adding features that make it easier to build immersive and interactive AMP pages as well as introduce methods to lazily load content that must be up to date—and do so in a way that’s compatible with AMP’s user experience and performance goals.

Analytics

This quarter we shipped further ways to customize the <amp-analytics> “visible” trigger to provide viewability-based analytics data. We’re in the early phases of building support for A/B testing and share tracking, and development on those will continue into Q3.

In the coming quarter, we plan to add further support for video analytics and to deepen AMP’s analytics support to ensure it supports a wide variety of content verticals, such as ecommerce.

Ads

This quarter we continued our twin focus of making the existing ads better as well as laying the groundwork for even faster ads experiences with AMP. For the former, we developed two new ad formats in compliance with AMP’s philosophy: the AMP sticky ads and the AMP flying carpet ad format. Since existing ad demand can fill in these ad formats, publishers will be able to further monetize their AMP pages with good-looking ads. For the latter, we submitted infrastructure changes for AMP Ads For AMP Pages (“A4A”) which will allow AMP ads to be loaded as fast as content on AMP pages.

In Q3, we are working on adding ad server support to A4A ads, enabling buyside support for A4A, and better AMP signals for programmatic buyers and much more.

Access

AMP now has multiple publishers such as the New York Times, Wall Street Journal, Financial Times, New Yorker, Folha, Les Echos, and Espresso live with paywalls globally. We are in the final stages of development of server-side paywall support for AMP, which will be in beta soon.

Extending AMP functionality to help publishers with conversion via simple, seamless user experiences is an important focus area for us. We are in early stages of prototyping simplified user sign-in to AMP pages, and development on this and associated features will continue into Q3.

* * *

We hope these roadmap updates are helpful. Thanks for taking the time to come up to speed on AMP. We invite you to come to our GitHub repository to collaborate with us on building AMP, and please let us know if you have any feedback.

Posted by Ashwin Limaye, Product Manager, AMP Project

An update to the AMP Roadmap to close out Q2

AMPlifying Google Play Newsstand

Google Play Newsstand is focused on providing a high-value and easy-to-use platform for thousands of news and magazine publishers to reach new audiences in a world where the smartphone is the main computing device for more and more people.

One of the reasons for the success of the product has been the ability to help publishers distribute content across a variety of mobile devices by supporting multiple content formats.  Well now we are building on that effort by adding AMP support to Google Play Newsstand on both Android and iOS.  

This means publishers who have created AMP pages can have them set as their preferred rendering format using Google Play Newsstand Producer, the publisher management portal. And one of the great benefits is that AMP rendering gives publishers more visual control of their content while preserving the fast, mobile-optimized experience users have come to expect in Play Newsstand.

amp-play-newsstand
One the left side of each pair is an article on Play Newsstand using feed-based rendering and on the right side is an article on Play Newsstand using AMP rendering.

When a publisher opts into using AMP in Play Newsstand, Play Newsstand will render the articles everywhere they appear as an AMP (if an AMP version is available), whether it is the user’s personalized news stream, a news or interest based topic, or the publisher’s edition.

“Play Newsstand is a great platform for Mirror Online, allowing us to reach a broad and incremental mobile audience. The launch of AMP inside Newsstand brings together that great distribution with the ability to deliver our rich and curated pages within the app, with our full set of monetisation tools”

— Rob Hammond, Head of SEO & Distributed Platforms, Mirror Online

“As one of AMP’s launch partners, we’re pleased to see the continued roll-out of AMP in apps such as Google Play Newsstand. We believe the new design and technology will enhance user experience and we will be closely listening to reader feedback.”

— Anthony Sullivan, Director of Product, Guardian News & Media

AMP support in Play Newsstand is currently available for free content, and we are exploring extending it for paid content in the future. If you would like to enable AMP for your edition get in touch with us at producer-support@google.com.  We look forward to hearing your feedback.

Posted by Sami Shalabi, Head of Product and Engineering, Google Play Newsstand

AMPlifying Google Play Newsstand

Introducing the AMP Validator Web UI

Following up on the release of our AMP Validator Chrome Extension, today we’re releasing another way to validate your AMP pages: validator.ampproject.org provides a simple web UI for the AMP Validator.

validator-web-ui

You can provide a URL to load the AMP HTML source code from, or copy/paste your source code, and the editor displays validation messages between the lines. Edits trigger revalidation, providing interactive feedback.

It’s open source, so please feel free to file bugs, send fixes, or tweak it for your own needs. Please enjoy!

Posted by Johannes Henkel, Software Engineer, Google

Introducing the AMP Validator Web UI

A Chrome extension to help validate your AMP pages

AMP’s validation framework is an essential ingredient to ensuring your pages are truly as fast as AMP can make them. Because of this, keeping an eye on the validation status as you develop and deploy AMP pages is a must for any AMP developer. The AMP library provides a built-in validator, but perhaps your fingers have already grown tired of typing “#development=1” as you expand your AMP coverage. Fret no more! Today we’re happy to announce a Chrome extension to assist you in your embrace of a better and faster mobile web through AMP.

extension-listing

AMP Validator Chrome Extension

With the new AMP Validator Chrome extension, you can quickly notice and debug invalid AMP HTML pages. As you browse, it will automatically validate each AMP page visited and give an indication of the validity of the page.

[Editor’s update: We have released a similar extension for Opera. Check it out here.]

When there are errors within an AMP page the extension’s icon shows in a red color and displays the number of errors encountered, like this:

icon-invalid

When there are no errors within an AMP page, the icon shows in a green color and displays the number of warnings, if any exist:

icon-valid

When the page isn’t AMP but the page indicates that an AMP version is available, the icon shows in a blue color with a link icon, and clicking on the extension will redirect the browser to the AMP version.

icon-link

Easily see what errors or warnings the page has by clicking on the extension icon. Every issue will list the source line, source column, and a message indicating what is wrong. When a more detailed description surrounding the issue exists, a “Learn more” link will take you to the relevant page on ampproject.org. For those familiar with “#development=1”, you’re right, this is exactly the same information you would see in the console but more easily accessible and pretty too.

screenshot

Posted by David Sedano, Software Engineer, Google

A Chrome extension to help validate your AMP pages

Ads on AMP: Where Faster is Better

When the AMP team set out to help make mobile experiences great for everybody, the objective wasn’t just to improve a user’s engagement with content. We knew the experience people had with ads was equally important to help publishers fund the great content we all love to read.

The AMP team laid out four core principles that would guide the innovation on the AMP ads roadmap and get us to a world where ads are as fast and engaging as the content we value.

  • Faster is better
  • ‘Beautiful’ matters
  • Security is a must
  • We’re better together

We recently took a moment to review the progress made  and see how ads on AMP are doing. We compared ad performance on AMP and non-AMP mobile pages across 150 publishers (large corporations and small businesses in different geographic regions) on our programmatic platforms. The preliminary results are encouraging.

Compared to non-AMP pages, ads on AMP have led to:

    • 80%+ of the publishers realizing higher viewability rates
    • 90%+ of the publishers driving greater engagement with higher CTRs
    • The majority of the publishers seeing higher eCPMs (Impact and proportion of lift varies by region and how optimized the non-AMP sites are)

AMP June 7 Infographic

We have also received positive feedback from a number of publishers with varying mobile web advertising business models:

‘So far, AMP has performed well against a number of metrics for advertising effectiveness and revenue. One encouraging stat is that we have seen an increase in viewability of ads within the AMP environment. As the industry moves more towards this as a measurement tool it is important we focus on optimizing for this metric.  We are encouraged by the open approach to both publishers and our tech partners and look forward to what’s to come’ — Noah Szubski, Chief Product Officer, DailyMail and EliteDaily

‘It is still very early days, but AMP has performed well to date from both direct and indirect monetization sources. We’ve been able to extend all of our custom ad products to AMP and have enabled it within our premium ad marketplace, Concert. We see AMP as a perfect intersection of two core tenets of Vox Media – fast mobile web experiences and ads that perform. We are encouraged by all of the metrics and are looking forward to continuing to grow this important channel” — Joe Alicata, Vice President of Revenue Products & Operations, Vox Media

“We’ve seen a 90% decrease in page latency, 96% decrease in unfilled impressions, 65% increase in ad engagement and 32% increase in eCPM. Perceived load time improved from approximately 17 seconds to 2-3 seconds.”  Conor Beck, Director of political news network TownHall Media

While this makes for a promising start, we’ve barely scratched the surface of what’s possible with ads in AMP. There’s much work ahead for us and the rest of the industry — including our third party ad tech partners — to make advertising experiences on the mobile web as great as content experiences with AMP. We’re both committed to and excited by that.

If you’re curious about what lies ahead for the broader AMP project, check out the AMP roadmap. Here’s a brief snapshot of what we are expecting to launch with ads this quarter and next:

  • “Beautiful” matters: Two new formats that are as beautiful as they are engaging.
    • Sticky Ads — greater viewability without sacrificing user experience
    • Flying Carpet Ad — a large canvas for immersive, fast ad experiences
  • AMP Ads for AMP Pages:  Ads that load as fast as the content on AMP

Stay tuned for more details on some of these ads initiatives in coming weeks.

Posted by: Craig DiNatali, Director, Global Partnerships Google and Nitin Kashyap, Product Manager, Google

Ads on AMP: Where Faster is Better

AMPlifying Google News – AMP in Six More Google News Editions

In April, Google News added support for Accelerated Mobile Pages to the US English Edition on the web, on Android and on iOS.  AMP enables a fast reading experience on Google News, making it easy for people to get to the latest news quickly and to read more in the limited time they have. This has also been great for publishers, leading to more visits to their websites. With an increasing number of publishers around the world embracing AMP and a growing AMP corpus in international languages, the Google News team is now able to extend AMP support to more countries. Today Google News is announcing AMP in six editions – France, Germany, Italy, UK, Russia, and Mexico. People in these countries can now also enjoy a truly fast News reading experience.  

The Google News team is keen to bring the instant-reading AMP experience to even more countries and looks forward to publishers around the globe helping us get there by AMPlifyng their content.

Posted by Anand Paka, Product Manager, Google News

AMPlifying Google News – AMP in Six More Google News Editions