AMP

Infinite recommendations with a new and improved amp-next-page

Websites

A key part of AMP’s mission is ensuring the “long-term success of every web publisher”.  To further that mission, we know just how important it is to help web publishers increase the reach of their content. Previously, we released <amp-next-page> as an experiment to help publishers turn an AMP page into a continuous scrolling experience by loading additional recommended content from the publisher’s website when the user reaches  the end of the document. This component was intended to help publishers increase engagement on AMP pages by increasing the time users spend on site.

We’re excited to announce <amp-next-page>, version 1.0! The release of version 1.0 comes with all the benefits of publisher testing and feedback from version 0.1. Read on to discover new features and learn how to migrate.

https://blog.amp.dev/wp-content/uploads/2020/05/next-page-1.0-3.mp4

Forbes using <amp-next-page> version 1.0 (Link)

Why upgrade to version 1.0?

With <amp-next-page> version 1.0 you can load an infinite number of pages as opposed to version 0.1 which only allowed publishers to specify 3 recommended pages.

Analytics Support

The <amp-next-page> component supports analytics on the hosted page as well as on subsequently loaded pages as long as you are using <amp-analytics> and <amp-pixel> on those pages. This also means you can use any analytics provider that is supported by <amp-analytics>.

Two custom analytics events are also provided on the host page to indicate transitioning between pages. For more information on analytics support go here.

Customize separators to increase monetization 

<amp-next-page> renders a separator between each page to help the user delineate between two pages. While this separator does have a default style, publishers can also style this separator to reflect their brand. Publishers can go one step further to place <amp-ad> in this separator, to increase the potential for monetization as the user consumes more content on site.

Accessibility

Like other AMP components, <amp-next-page> is accessible by default. The default recommendation box and separator both have a generic, non-localized aria-label describing their content and are keyboard-focusable. The aria-label can also be overridden to accommodate localization.

Instructions on migrating to version 1.0

For instructions on how to migrate from version 0.1 to version 1.0 please visit the migration section in the documentation.

Our thanks go out to you, the AMP development community, for your feedback. As always, please let us know if you have any issues or feature requests.

Posted by Naina Raisinghani, Product Manager, AMP Project