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