ampproject / ampproject/amphtml

Enable responsive ads inside containers that prevent layout shift

Open
#33,507 1 comment 0 reactions 1 assignee Claimed by @lannka View on GitHub
Stale Type: Feature Request WG: monetization
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## Describe the new feature or change to an existing feature you'd like to see

Add support for a viewport/size mapping for ads, based on gpt [responsive ads](https://developers.google.com/publisher-tag/guides/ad-sizes#responsive_ads). Responsive ads would only be available inside a container where the targeted sizes will not cause layout shift - primarily full width containers with a fixed height.

This enables more setting a variety of ad sizes into the same slot based on media queries, while still guaranteeing user experience is not degraded by layout shift.

## Describe alternatives you've considered

Our current approach on the Newspack project places various possible ad sizes in hidden containers and uses CSS media queries to show specific slots at specific breakpoints. Although this appears to be the current recommended approach, if feels somewhat fragile, and is difficult to set up correctly.

We could improve things for developers by creating a slot that is responsive and still stable: eg. requests different sizes per breakpoint, while avoiding layout shift.

## Additional context

Here is an example of how this could work:

Imagine a banner ad slot that sits near the top of a post. The ad is in a container that has a fixed height, and is full width (width matches page width).

Our ad definition would specify ad sizes for large/medium/small screens:

```
{
[[1024, 768], [[750, 200], [728, 90]]], (container is 200 pix high)
[[728, 480], [[728, 90],[486, 60]]], (container is 90 pix high)
[0,0],[[200,200],[250x250],[300x250]] (container is 20 pix high)
}
```

At each breakpoint, we request two possible sizes. In all cases the container is full width and has a fixed height greater than the largest ad height requested - ensuring no layout shift will occur.

For sites using AMP-first, this simplifies implementation, because all size definitions are in one place.

For sites in a paired mode, this greatly simplifies implementation details because the AMP code can follow a very similar pattern to the html gpt code.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.