针对AMP网站的自适应广告（仅限宽度）

Question

有没有解决方案可以为AMP添加自适应AdSense？ 像100px高度（用于计算布局）和100％宽度。

Answer 1

这对我很好。它采取了最大EQ高100像素和宽度：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> 

Answer 2

基于此blog，因为AMP是异步的，Adsense的AMP HTML可以通过CSS进行响应。当您要使用异步Adcodes时，您需要将此脚本包含在HTML的头部分中。

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

下面是示例代码：

<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> 

如果你想Customize Google Adsense Async Responsive ADS Size，你需要首先生成一个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> 

头广告：

<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> 

希望这有助于！

Answer 3

hi; 
 

 
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 wiev) 
 
<pre><code> 
 
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 
 
</pre></code> 
 
2. with width and height. 
 
for everywhere (but sometimes not responsive) 
 
<pre><code> 
 
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 
 
</pre></code>