This tutorial demonstrates how to setup a responsive AMP-AD unit to show different size ads based on screen size via media query.
Below you can see a working example of a responsive AMP-AD unit. Note that you have to resize browser size and reload page to see the change.
This is an example of the AMP-AD unit I use myself on all of my blogs. Note that in this article I will not go into ways of implementing the code. If you don’t know how to do it, I recommend reading this article, which goes deeper into setting-up AMP-AD unit code into the blog posts.
<amp-ad
width="970" height="90"
media="(min-width: 728px)"
layout="responsive"
type="adsense"
class="adsbygoogle ads_mystyle"
data-ad-format="auto"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx">
</amp-ad>
<amp-ad
width="300" height="250"
media="(max-width: 727px)"
layout="responsive"
type="adsense"
class="adsbygoogle ads_mystyle"
data-ad-format="auto"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx">
</amp-ad> As you can see there is a code for two different AMP-AD units. You can use this code straight away, just don’t forget to change data-ad-client and data-ad-slot. The intuitive way to hide, or show, one or another, depending on the screen size would be using CSS. You can do it by assigning different classes to AMP-AD units, but the simplier way would be just to add media query to it. As tou can see it is done on the following line:
...
media="(max-width: 727px)"
...This sets AMP-AD unit to appear on all screens up to 727px wide. You can change it wherever you’d like just as any normal media query. In my given example one of the AMP-AD unites is always visible, but you can use this method to hide it on a desired screens.
This method also makes A/B testing for different size AMP-AD units easy. You can just use AUTO-AMP-ADS instead, but I find it not very viable yet. If you want to learn more about it, you can find more information in this article.
Originally posted on 8/25/2020
WordPress 5.5.1
AMP 2.0.1