Skip to content

amp-ad media query doesn't work with fluid #19312

@yukah000

Description

@yukah000

What's the issue?

amp-ad fluid + media query combination makes 2 ad requests, although we expect only 1 ad request.

Tag

<amp-ad height="fluid" layout="fluid"
media="(min-width: 336px)"
type="doubleclick" 
data-slot="/421814808/TOUCH_viewnews_fold_middle_rectangleaa" 
data-multi-size="336x280,300x250" 
> 
</amp-ad>
<amp-ad height="fluid" layout="fluid"
media="(max-width: 335px)"
type="doubleclick" 
data-slot="/421814808/TOUCH_viewnews_fold_middle_rectangle" 
data-multi-size="300x250" 
> 
</amp-ad>

Test page
https://storage.googleapis.com/mps-storage/yukah/test/Fluid_mediaquery_test_20181114.html

Screenshot
https://docs.google.com/a/google.com/drawings/d/e/2PACX-1vRAdaZ2WkvoSQnQEcjcKE6SHI__GbUWQvyQ7kBMucgF83wyf9mrj1mPl7dTcl8_2OSvalnN2S9ScI5Y/pub?w=964&h=1136

Background
We use media query in amp-ad tag to serve appropriate size ads for each device width. For example,
For small width device (width<=335px): multisize of 300x250 and fluid
For large width device (width>=336px): multisize of 336x280, 300x250 and fluid

Actually, it works with fixed size (300x250 for small device, 300x250 and 336x280 for large device). See the test page.
https://storage.googleapis.com/mps-storage/yukah/test/Fixed_mediaquery_test_20181114.html
Ad request is made only once, with proper slot size.

The problem here is that when we include fluid size, 2 requests are made.
https://storage.googleapis.com/mps-storage/yukah/test/Fluid_mediaquery_test_20181114.html

(This is meaningless implementation but) the problem occurs on fluid only + media query implementation.
https://storage.googleapis.com/mps-storage/yukah/test/Fluid_only_mediaquery_test_20181114.html

How do we reproduce the issue?

Open this test page and see ad requests in network tab as described in the screenshot.

Test page
https://storage.googleapis.com/mps-storage/yukah/test/Fluid_mediaquery_test_20181114.html

Screenshot
https://docs.google.com/a/google.com/drawings/d/e/2PACX-1vRAdaZ2WkvoSQnQEcjcKE6SHI__GbUWQvyQ7kBMucgF83wyf9mrj1mPl7dTcl8_2OSvalnN2S9ScI5Y/pub?w=964&h=1136

What browsers are affected?

Assuming all browsers because num of whole impressions was doubled where the tag implemented.

Which AMP version is affected?

Powered by AMP ⚡ HTML – Version 1811091519050

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions