-
Notifications
You must be signed in to change notification settings - Fork 4.1k
amp-ad media query doesn't work with fluid #19312
Description
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
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
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