AMP

What’s new in AMP, Q1 2019: Improvements to consent, videos, forms and lists

Roadmap

Video improvements

We have all experienced a situation where we want to watch a video and the related notes simultaneously. Good examples are a video of a recipe along with the instructions, or a video along with its transcript. The dock attribute on <amp-video> now supports minimizing the video to the corner of the viewport when the user scrolls. Developers can also customize where and how the video docks.

We also launched <amp-video-iframe>, which allows developers to include a custom-built video player that will obtain all the features available in the AMP Video Interface (e.g. autoplay, dock, etc.)

Tasty.co uses <amp-video-iframe> for their video recipes. Their custom player loops the video between a predefined start and end time. This allows them to use one video for different recipes by only seeking to the relevant segment of the video in each recipe.

Increased engagement and better resize with <amp-list>

<amp-list> now also allows developers to specify when they want the container to resize on user interaction, for e.g, when the <amp-list> contains an <amp-accordion> that a user taps on.

Additionally, we are experimentally adding infinite scroll capabilities to the component, so when the user reaches the end of a list of items (search results, product cards, etc), the list is populated with more items. A huge shout out to Chris Papazian from the Pinterest team for kicking this off. The AMP UI Working Group picked this up from Chris’ initial work and is excited to see this feature enabled in AMP to help publishers’ increase engagement!

Input masking in forms

To help make the task of filling in forms a bit easier, we’ve enabled input masking. This allows developers to add formatting like spaces and interstitial characters, which helps users fill out forms more efficiently. Dates, payment details and phone numbers are all great examples of inputs that could benefit from input masking.

The AMP UI Working Group has also been working on polishing already launched components to create a more delightful experience for end users. One such example is improved transitions for all images going to and from lightbox mode. This has been a hard problem to solve, as it involves interpolating between two images of different positions and sizes. You can visit our open source animations project for more details. Stay tuned for a technical blogpost that shares more insights into this work.

We launched <amp-consent> in AMP a few months ago to simplify how publishers could collect data collection user consent on AMP pages. A number of publishers rely on 3rd party consent management platforms (CMP) to integrate with their web pages to manage consent status across various vendors. AMP now allows CMPs to easily integrate with AMP. If you are a publisher, you can also inline the configuration allowing you to show your own consent UI inside AMP. If you are a CMP, you can find instructions to integrate here.

Enhancements to <amp-ima-video>

The <amp-ima-video> component provides an easy to monetize publisher video with video ads from any video ad network that supports the IMA SDK. Our big thanks to Rebecca Close, an engineer working at Buzzfeed, who contributed and tested the following updates to the AMP project:

The best of the rest

  • The <amp-date-display> component renders date information in various date formats and in different locales. A good use case for this is the news ecosystem, where users can see publishing dates for an article in their local time.
  • AMP Stories now support Real Time Config when used with the Google Ad Manager ad implementation, allowing you to enhance the ad request with additional targeting information.

Upcoming features worth a shout

Below are a few things the AMP team has been working on:

  • A dedicated component for typeahead autocomplete in AMP. If you have any thoughts please file feedback here.
  • A new carousel experience that we are looking to launch soon over the upcoming months.
  • An easy-to-deploy Service Worker library for AMP. You can learn more about it over in its GitHub repo.
  • A component that helps developers integrate reCaptcha v3 on AMP documents. For more details, see the GitHub issue.
  • We have made a number of updates to AMP Stories including support for links in the top 80%, a hamburger menu, hold to pause, a new desktop UI, and attachments. Stay tuned for a full post with updates soon.

* * *

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 Naina Raisinghani, Product Manager, AMP Project at Google