响应式 CSS 设计，Adsense 展示广告：无答案

【问题标题】：Responsive CSS design, Adsense ads in display:none响应式 CSS 设计，Adsense 展示广告：无
【发布时间】：2013-12-18 08:10:57
【问题描述】：

当max-device-width 为 480 像素时，我不希望显示右侧边栏（包含广告）。如果我使用 display:none; 它违反了 Adsense ToS。那么，有什么好的解决方案呢？

【问题讨论】：

标签： css responsive-design adsense

【解决方案1】：

Google 最近推出了一种新的响应式广告格式，explicitly allows hiding advertisements（仅适用于响应式广告）。

以下是您要避免的一些技巧：

随时隐藏广告单元（例如 display:none），除非您正在实施自适应广告单元

可以在Google Adsense manuals 中找到一个代码示例，甚至显示如何执行此操作。

<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   style="display:inline-block;"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

请注意，此 Google 代码示例中存在一个错误。你必须移动 style="display:inline-block;"部分。否则内联显示样式会覆盖部分显示无。

【讨论】：

【解决方案2】：

您可以使用DFP API using sizeMapping 有效地做到这一点，它还允许您根据视口大小投放不同大小的广告素材。

我回答了一个类似的问题 here，但本质上，如果对于给定的分辨率，您定位的广告素材尺寸不存在，则不会投放任何广告，因为 DFP 将无法提供广告。

如果您只想在视口小于给定宽度时不显示广告，您需要这样的东西：

googletag.cmd.push(function() {
    var mapLrgLeaderboard = googletag.sizeMapping().
        addSize([480, 320 ], [300, 250]). // when screen >= 480 x 320px use 300 x 250px 
        addSize([0, 0], [88, 88]). // 88 x 88px = non-existant ad size
        build();

    googletag.defineSlot('/12345678/Test-Large-Leaderboard', [[300, 250]], 'div-gpt-ad-123412341234-0').
        defineSizeMapping(mapLrgLeaderboard).
        addService(googletag.pubads());

    googletag.enableServices();
});

I wrote a short post about this（如果你只看谷歌的描述，你可能会遇到一些陷阱），尽管这（上面）是它的症结。

希望这会有所帮助！

托比

【讨论】：

【解决方案3】：

这里的问题是，如果你使用display: none，你就破坏了Adsense Terms & Conditions。这是因为，尽管广告被隐藏，但它仍然算作广告商的一次浏览。

到目前为止，Google 对此的反应非常缓慢，但我已经实施并且现在许多人正在采用的方法是在页面加载时检测窗口宽度，并根据窗口大小。

Labnol have a great write-up about this.

基本上，您的脚本需要如下所示：

<script type="text/javascript">
    // <![CDATA[
        var width = window.innerWidth || document.documentElement.clientWidth; google_ad_client = "ca-publisher-id";
        if (width >= 800) {
            google_ad_slot = "ad-unit-1";
            google_ad_width = 728;
            google_ad_height = 60;
        } else if ((width < 800) && (width > 400)) {
            google_ad_slot = "ad-unit-2";
            google_ad_width = 300;
            google_ad_height = 250;
        } else {
            google_ad_slot = "ad-unit-3";
            google_ad_width = 320;
            google_ad_height = 50;
        }
    // ]]>
</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">// <></script>

针对您的具体示例对此进行扩展，您将在初始化 Adsense 之前使用以下方法检测屏幕宽度：

var width = window.innerWidth || document.documentElement.clientWidth; google_ad_client = "ca-publisher-id";
if (width >= 480){
    // initalise Adsense here
}

初始化您的 Adsense。这样只有在屏幕宽度大于480px时才会出现。

要记住的重要一点：虽然这将确保在访问设备的屏幕太窄时不会加载您的广告服务，但它并不能解决广告显示（或不显示）的问题如果访问者然后选择调整其浏览器窗口的大小。除了使用display: none 覆盖用户以较大的浏览器宽度加载网站然后将其缩小的情况之外，我还没有找到一种简单的方法来解决此特定方面的变通方法。

最后一点：谷歌现在有started to roll out DFP Responsive ads。

【讨论】：

问题是，Adsense 提供的 JavaScript 代码也不能修改。
看看我放在底部的代码摘录。简单地检测屏幕宽度并根据屏幕宽度初始化 AdSense 或不修改 AdSense 代码，也不违反其 ToS。

【解决方案4】：

AdSense 发布了新的自适应广告，这些广告可以用转化率最高的广告填充最多的可用空间。这解决了整个斗争。

【讨论】：