[amp-story-auto-ads] Fullscreen support ads

[qwang-mlb]

Description

We've been trying to bring landscape mode to our Stories but the ad slides are currently being displayed in portrait mode.

Would it be possible for you guys to support fullscreen ads?

Alternatives Considered

I think the only alternative we have here is to break validation and use JS/CSS to remove the locked proportions defined here:

https://github.com/ampproject/amphtml/blob/main/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css#L32

Updated Feb 07 25 - Here is the proposal:

Executive Summary

Support landscape ad assets for amp-story-auto-ads in desktop-fullbleed mode. All screenshots and testing in this document was done with Google Ad Manager (Doubleclick) and custom ads.

Motivation

We’ve added landscape support for our AMP Stories implementation however the AMP component amp-story-auto-ads does not support landscape assets. Currently in landscape mode, the ad slide shows the ad with letterboxing:

Proposed Implementations

There is existing code in amp-story-auto-ads that resizes and repositions the ad so that it’s more of a “mobile” like size while in desktop-fullbleed mode:

• 🌉New "mobile" view for ads in fullbleed story #26243
• 🐛 [story-ads] Fix ad badge placement in landscape mode #35750

I propose that we add a new CSS selector that targets horizontal ad assets and override the size and position of the ad, CTA button, and ad badge. This will only target ads in desktop-fullbleed mode. Here is the desired result:

For AMP purposes, we will consider an aspect ratio of 31/40 or greater to be a horizontal asset. This ratio is the point in which AMP switches from portrait to landscape.

Drawbacks

1. One drawback of this approach is if the story is loaded in portrait mode and the ad server returns a horizontal asset, it would have letterboxing:

2. Another drawback is if multiple ad assets are returned, we can potentially mistake the wrong asset for determining the aspect ratio.

Alternatives

1. Disable AMP validation and override the CSS
2. A much more involved alternative would be to request for the horizontal ad asset when the user enters landscape mode. This way, we would have both versions of the ad and no letterboxing. However, this would likely require major changes to how amp-story-auto-ads show/hide the ad pages and how it requests for ads.

Potential Impact and Dependencies

This will impact stories that currently have landscape mode enabled. However, to the end user, there should be no changes unless the ad asset returned was already horizontal.

Unresolved questions

1. I don’t have access to any of the ad vendors and I’m unsure of how the amp-ad will render for all ad vendors. Are there working examples of each ad vendor?
2. Vendors are able to return both videos and images in the same ad request. Here is an example:

The video is in the background (the speaker) and the image is in the foreground (“Google Home” banner).

• Is there a way for us to determine which one is the “main” asset?
• Can we assume if there is a video, it is the “main” asset?
• Would there be cases where there is no video and multiple images?

Conclusion

The proposed CSS override to support landscape ad assets in amp-story-auto-ads could improve user experience and ad display, with minimal changes for the end user. However, potential letterboxing and multiple ad asset issues need to be addressed. Further investigation is required to ensure seamless implementation for all ad vendors.

[erwinmombay]

@ychsieh could you take a look at this when you get a chance?

[powerivq]

Hi,

@MLB-Qwang A few questions: are you using amp-story-auto-ads (with google ads manager)? Have you been able to fill the horizontal ads? We are aware of the ads size restrictions, but also want to make sure the ads services can support it as well.

[qwang-mlb]

Hello!

1. Yes we are using amp-story-auto-ads with google ads manager.
2. Not sure what you mean here but I am able to request for horizontal ads and the correct horizontal asset is retrieved.

[powerivq]

@MLB-Qwang Gotcha. We are open to your proposal if you are willing to contribute. You already found the code reference .

[powerivq]

@MLB-Qwang Let us know what other helps you need, and if you are planning on moving on with this proposal.

[qwang-mlb]

@powerivq Thank you! We do plan to go forward with this proposal but it may not be high priority for us right now.

[qwang-mlb]

FYI, we are currently planning to start work on this some time early in 2025.

[qwang-mlb]

Hey guys, I created an RFC for this potential change: https://docs.google.com/document/d/1KjCQlX2OzeKJ6gRDl93d00Tm3OdHNiBu-HmPPB5IkU0/edit?usp=sharing

Hoping to get your thoughts on it. Let me know if you guys have any questions!

[powerivq]

@qwang-mlb It's well written. Can you move the content of your doc to this issue?