DOCSEARCHbyAlgolia
Submit Docs

AMP (Accelerated Mobile Pages)

repository·main·Indexed 28 days ago

https://github.com/ampproject/amphtml

An open-source web component framework for creating high-performance websites, stories, ads, and emails. This documentation covers technical requirements for third-party software, embeds, and font inclusion, as well as detailed integration guides for ad networks using the amp-ad component, including the window.context API for metadata, viewability monitoring, and resizing.

Tokens
259.6K
Snippets
614
Records
1.4K
Agent score
47%

What's inside amphtml

  1. Overview of Bento Accordion

    main

    The Bento Accordion is a component that displays content sections that can be collapsed and expanded. It allows users to view a content outline and jump to specific sections, which helps reduce scrolling on mobile devices.

    Structural Requirements:

    • The component accepts one or more <section> elements as direct children.
    • Each <section> must contain exactly two direct children:
      1. Heading: The first child must be a heading element (e.g., <h1> through <h6>) or a <header> element.
      2. Content: The second child is the expandable/collapsible content, which can be any valid AMP HTML tag.
    • Clicking or tapping a heading toggles the expansion state of its associated section.
    • If the Bento Accordion has a defined id, it will preserve the collapsed or expanded state of each section as long as the user remains on the same domain.

  5. Overview of AMPHTML Ad Creative Format

    main
    AMPHTML ads is a mechanism for rendering fast, performant ads within AMP pages. To ensure smooth rendering and prevent user experience degradation, AMP creatives (AMPHTML ad documents) must adhere to specific validation rules. These rules restrict the available tags, capabilities, and extensions to a subset of the standard AMP specification.

  6. Overview of Bento Carousel

    main
    Bento Carousel is a generic web component designed to display multiple similar pieces of content along a horizontal or vertical axis. Each immediate child of the carousel component is treated as an individual item. The component supports an arbitrary number of items and includes optional navigational arrows for forward or backward movement. Users can advance between items via swiping or by using customizable arrow buttons.

  8. Use amp-position-observer to monitor element position

    main

    The amp-position-observer component monitors an element's position within the viewport during scrolling. It dispatches events that can trigger actions on other components (like amp-animation or video players).

    Important Notes:

    • It does not perform any actions on its own; it must be used with other components.
    • It dispatches enter, exit, and scroll:<percentage> events. These are considered Low Trust Level events and can only trigger Low Trust Actions (e.g., starting an animation or seeking a video).

  9. Use amp-experiment for A/B and multivariate testing

    main

    The <amp-experiment> component allows you to conduct user experience experiments (like A/B or multivariate testing) on AMP pages. It defines customizable variants and allocates traffic to them based on a JSON configuration.

    Key features:

    • Traffic Allocation: Distributes users to specific variants based on defined percentages.
    • User Stickiness: Supports consistent user experiences across page views using AMP's Client ID (CID) capability.
    • Parallel Experiments: Multiple experiments can run simultaneously on the same document with orthogonal allocations.
    • Data Collection: Variant allocations are exposed to amp-pixel and amp-analytics for statistical comparison.