AMP 网站的响应式广告（仅限宽度）

Question

是否有任何解决方案可以将响应式 Adsense 添加到 AMP？比如 100px 高度（用于计算布局）和 100% 宽度。

Answer 1

基于此 blog，Adsense 的 AMP HTML 可以响应 CSS 因为 AMP 是异步的。当您要使用异步 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>

Header广告：

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

这对我来说很好用。它需要一个最大高度 eq 100px 和宽度：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 3

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

1。对于 header or page in or post in, width 不需要

宽度： 灵活响应 'the width of the area'。

身高： 最大 400 且灵活。（问题侧边栏包装 - 问题页脚问题移动视图）

<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。带宽高

无处不在（但有时没有响应）

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

AMP 网站的响应式广告（仅限宽度）

Responsive Ads for AMP Sites (width only)

amp-html

1。对于 header or page in or post in, width 不需要

2。带宽高