amp-next-page

Edit on Github
Open in Playground View Demo

Experimental Mode

This example uses the following experimental feature: [amp-next-page]. Enable the experiment via the button below. Some components require the AMP Dev Channel to be enabled as well. Learn more here.

Enable Dev Channel

Introduction

amp-next-page allows you to add an infinite scroll style experience to your AMP pages. The component configuration takes an ordered list of pages to be displayed, and as the user approaches the end of the document the next page will be preloaded and automatically added to the end.

The component can be used to provide a user-friendly interaction for paginated content, or to promote other related content on your site.

Note: For performance reasons amp-next-page will currently load and display a maximum of three pages on screen at once, so cannot be used to provide a true infinite scroll.

Setup

Import the amp-next-page component.

<script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>

Basic Usage

The amp-next-page component can be placed anywhere in the document body. Subsequent pages will be added to the document as children of the component, so it should usually be placed at the end of your content, before any footers.

All page URLs specified in the component config must be served from the same origin (protocol, domain and port) as the parent document. Canonical URLs will automatically be rewritten to cache URLs when served from the cache.

Only one amp-next-page component is allowed in a document. If a child document also contains an instance of amp-next-page the document will render and the second instance will be ignored.

Example

<amp-next-page>
  <script type="application/json">
    {
      "pages": [{
          "title": "News article",
          "image": "https://ampbyexample.com/img/social.png",
          "ampUrl": "https://ampbyexample.comsamples_templates/news_article/preview/"
        },
        {
          "title": "Recipe",
          "image": "https://ampbyexample.com/img/social.png",
          "ampUrl": "https://ampbyexample.comsamples_templates/recipe/preview/"
        }
      ]
    }
  </script>
</amp-next-page>

Styling the page separator

By default a line will be displayed between pages to act as a separator. The style of this separator can be adjusted by styling the amp-next-page-default-separator class.

  .amp-next-page-default-separator {
    border-bottom 2px solid red;
  }

Custom page separators

It is also possible to define a custom page separator containing arbitrary content, such as some text, an image, or an <amp-ad>. Create a <div> element as a direct child of the <amp-next-page> tag with the separator attribute.

Example

Keep reading...
<amp-next-page>
  <div separator>
    Keep reading...
  </div>
  <script type="application/json">
    {
      "pages": [{
        "title": "News article",
        "image": "https://ampbyexample.com/img/social.png",
        "ampUrl": "https://ampbyexample.com/samples_templates/news_article/preview/"
      }]
    }
  </script>
</amp-next-page>

Hiding Elements

Elements such as page footers may be present on all pages. Instead of having these duplicated on all pages, you can hide elements on child pages by specifying a list of CSS selectors in the element config.

Example

<amp-next-page>
  <script type="application/json">
    {
      "pages": [{
        "title": "News article",
        "image": "https://ampbyexample.com/img/social.png",
        "ampUrl": "https://ampbyexample.com/samples_templates/news_article/preview/"
      }],
      "hideSelectors": [
        ".footer",
        "article .logo"
      ]
    }
  </script>
</amp-next-page>