24

我在我的响应式 wordpress 设计中使用了 google adsense（那是使用 twitter 引导程序）。现在，当网站调整广告大小时，广告会伸出很远，而且看起来很糟糕。

我能做些什么来帮助解决这个问题吗？实际上，我看到一个网站看起来像是有人在较小的屏幕上调整广告大小...我不确定这是怎么可能的，因为它是 java 脚本，对吧？

任何反馈都会非常有帮助。谢谢！

4

6 回答 6

10

理想情况下，CSS 媒体查询可以自动缩小广告，并且在理想情况下，广告会根据新尺寸自动更改其布局。但是，Google Ads不支持，甚至不允许这样做——根据他们的服务条款（删除了标有[...]) 的文本：

5.禁止使用。您不得也不得授权或鼓励任何第三方：(i) [...] (ii)编辑、修改、过滤、截断或更改任何广告、链接、广告单元中包含的信息的顺序，未经 Google 授权，以任何方式删除、隐藏或最小化任何广告、链接、广告单元、搜索结果或推荐按钮；[...]

另一种解决方案是有条件地通过 JavaScript 提供广告。例如，当页面加载时，检索浏览器视口的大小，如果浏览器的视口宽度小于首选广告的宽度，则提供较小的广告。它应该类似于 CSS 媒体查询，除了在用户调整浏览器大小时不提供新广告，因为这会产生错误印象（单个页面上的多个印象，没有刷新），这也违反了他们的服务条款：

5.禁止使用。您不得，也不得授权或鼓励任何第三方：(i)直接或间接产生对任何广告、链接、搜索结果或推荐按钮的查询、推荐事件或印象或点击（包括但不限于点击任何视频广告的“播放”）通过任何自动、欺骗、欺诈或其他无效方式，包括但不限于通过重复手动点击、使用机器人或其他自动查询工具和/或计算机生成的搜索请求，和/或未经授权使用其他搜索引擎优化服务和/或软件；[...]

于 2012-08-29T04:17:03.550 回答
5

现有的答案已经过时。Google于 2013 年 7 月推出了响应式广告：

新的响应式广告单元允许您通过使用响应式设计网页来支持各种设备。您现在可以动态指定将要投放的广告的大小，使其适应您的网站在特定设备上呈现页面的方式。

响应式广告适用于固定、流畅和响应式布局。您需要做的就是将“Smart Sizing”版本的代码放在您希望广告出现的位置。广告将水平拉伸以占据所有可用空间，并垂直拉伸以显示最佳标准尺寸的广告。如果您的网站根据设备方向更改其布局，则广告将根据设备方向更改事件自动调整大小。使用 CSS 和 HTML5 数据属性可以进行高级定制。

于 2014-06-06T21:56:53.747 回答
2

Google 现在正式支持响应式广告（目前处于 BETA 阶段）。这里有一个很好的功能描述，带有官方谷歌文档的链接。

http://exisweb.net/using-google-adsense-async-tags-for-responsive-design

它有效，但一个缺点是当您调整视口大小时，广告不会自动调整大小。据我了解，在视口调整大小时尝试调用广告服务器是违反 TOS 的。

于 2013-12-16T18:35:31.180 回答
1

有一个名为Responsive Adsense的插件。它添加了一个带有 5 个广告字段的小部件，您可以在其中输入pub id和输入ad id。然后根据屏幕大小呈现 5 个广告中的 1 个。我在移动浏览器上进行了尝试，它呈现了一个块大小的广告而不是移动广告。

于 2012-11-07T18:00:23.933 回答
1

为了保持我的页面响应，我这样做了：

<div class="table table-responsive">    
        <div class="text-center text-muted">
            <hr><br>
            <small>advertisement</small>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- bottom -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client=""
                 data-ad-slot=""
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>  
            <br>
        </div>       
</div>
于 2015-12-27T08:04:01.590 回答
0

我同意 Equilibrium3 发布的内容。选择广告尺寸 = 自适应广告单元（测试版）。获得广告代码后，您可以将其放置在 a<div class="span12">中，即 a 中<div class="row">。这对我来说可以放置水平广告并使其居中。

这是我有那个横向广告的页面-> http://www.espaciodigital.mx/

现在，如果您想将广告代码放在侧边栏上，请执行与上述相同的操作，但使用<div class="span3">侧边栏和<div class="span9">页面其余部分来拆分页面。

我在下一页中做到了这一点，方形广告在左侧 -> http://www.espaciodigital.mx/quienes_somos.html

在移动设备上看到这两个广告都可以正常工作。试试看。希望有帮助！

于 2014-05-21T22:54:06.627 回答