CODEWITHSUNDEEP
amp-html
Lovntola
Lovntola

Reputation: 1409

Responsive Ads for AMP Sites (width only)

Is there any solution to add a responsive Adsense to AMP? Like 100px height (for calculate the layout) and 100% width.

Upvotes: 2

Views: 5541

Answers (3)

Ferdi Abi
Ferdi Abi

Reputation: 21

AMP Project forbidden style and max-height there are 2 range responsive amp ads code.

1. For header or page in or post in, width is not required

Width : flexible responsive 'the width of the area'.

Height : max 400 & flexible. (problem sidebar wrapper - problem footer problems mobile view)

<amp-ad
    layout="fixed-height"   
    height="400"  
    type="adsense" 
    data-ad-format='auto'
    data-ad-client="ca-pub-1234567898xx"  
    data-ad-slot="9876xx"
></amp-ad>

2. With width and height

For everywhere (but sometimes it's not responsive)

<amp-ad
    layout="responsive"   
    height="336"
    width="280"  
    type="adsense" 
    data-ad-format='auto'
    data-ad-client="ca-pub-12345678xx"  
    data-ad-slot="9876xx"
></amp-ad>

Upvotes: 2

abielita
abielita

Reputation: 13469

Based from this blog, AMP HTML for Adsense can be made responsive with CSS since AMP is Asynchronous. As you are going to use the asynchronous Adcodes, you need to include this script in the head section of your HTML.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Here is the sample code:

<style>
.headerad { width: 100%; height: 100px; }
@media(min-width: 320px) { .headerad { width: 320px; height: 100px; } }
</style>
<amp-ad class="headerad"
 type="adsense"
 data-ad-client="ca-pub-XXXX"
 data-ad-slot="YYYY">
</amp-ad>

If you want to Customize Google Adsense Async Responsive ADS Size, you need first to to generate an Adsense adunit.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ADUnit -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-xxxxxx"
 data-ad-slot="yyyyyy"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Header Ad:

<style>
.headerad { width: 320px; height: 100px; }
@media(min-width: 468px) { .headerad { width: 468px; height: 60px; } }
@media(min-width: 728px) { .headerad { width: 728px; height: 90px; } }
</style>
<!-- Header Ad -->
<ins class="adsbygoogle headerad"
 style="display:inline-block"
 data-ad-client="ca-pub-xxxx"
 data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Hope this helps!

Upvotes: 2

Lovntola
Lovntola

Reputation: 1409

This works fine for me. It take a max high eq 100px and width: 100%

<amp-ad   
    width="320" height="100"  
    media="(max-height: 100px)"  
    layout="responsive"  
    type="adsense"  
    class="adsbygoogle ads_mystyle"  
    data-ad-client="xxx"  
    data-ad-slot="xxx">  
</amp-ad>

Upvotes: 2

Related Questions