ampproject / ampproject/amphtml
Enable responsive ads inside containers that prevent layout shift
- 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
Assessment
This issue has not been assessed yet.