Question

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

Answer 1

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

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


随时隐藏广告单元（例如，显示：无），除非您正在实施自适应广告单元

代码示例甚至可以在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;”部分到该部分。否则，内联显示样式会否决节显示无。

Answer 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（如果单独使用Google说明书，可能会遇到一些问题），尽管这（上图）是其中的症结所在。

希望这有帮助！

托比

Answer 3

这里的问题是，如果您使用display: none，则会破坏Adsense Terms & Conditions。这是因为，尽管广告被隐藏，但它仍然被视为广告客户的视图。

到目前为止，谷歌对此做出反应的速度非常慢，但我实施的方法和许多人现在正在采用的方法是在页面加载时检测窗口宽度，并根据或不发起Adsense。窗口大小。

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。

Answer 4

AdSense发布了新的响应式广告，这些广告通过最佳转换广告填充了最多可用空间。这解决了整个斗争。

响应式CSS设计，显示的Adsense广告：无

4 个答案: