Question

如何在响应式网站布局上使用谷歌adsense响应式块？让我们考虑一下这个简单的案例（用bootstrap编写）：

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">Menu</div>
    <div class="col-sm-8 col-md-6">Content</div>
    <div class="col-md-3 hidden-sm hidden-xs">Column with Adsense</div>
  </div>
</div>

因此，对于大屏幕，我们有3列布局，对于小屏幕，我们只有两列。右栏不是很重要，所以我们只是隐藏它，它包括adsense响应块，我们也隐藏它。

如果我们在小屏幕上打开此页面，则会收到错误TagError: adsbygoogle.push() error: No slot size for availableWidth=0。怎么避免这个？

理想情况下，如果窗口大小发生变化（在小屏幕上打开然后放大以便第三列变得可见，应该在出现的列中触发adsense初始化），我想重新初始化adsense块，但我认为它不可能现在。

我试图将adsense放置到fixed-size-container（它位于hidden-xs块内），它不起作用，无论如何都会出现错误。

我还尝试将响应式类添加到<ins class="adsbygoogle hidden-xs">...</ins>，但它也不会删除错误。

Answer 1

我遇到了同样的问题，即使我禁用了push（）调用我仍然收到错误，因为谷歌仍会在下次调用push（）时发现此广告元素（针对不同的广告），

最后，只有当没有隐藏消失的div时才注入fly的JavaScript。

<div id="ad-top-right-wrapper" class="hidden-xs col-sm-4 col-lg-3">
    <!-- Portal top right links -->
    /* <ins class="adsbygoogle"
            style="display: block; overflow: hidden;"
            data-ad-test="@googleDataAdTest"
            data-ad-client="ca-pub-9651717958493835"
            data-ad-slot="5910985512"
            data-ad-format="link"></ins> */
    <script>
        // Inject this ad manually when hidden-xs is not in affect (the div is visible)
        // Otherwise google ads will try to push it when the next .push() is called
        if (($("#ad-top-right-wrapper").css("display") !== "none")) {
            document.write("<ins class='adsbygoogle'" +
                " style='display: block; overflow: hidden;'" +
                " data-ad-test='@googleDataAdTest'" +
                " data-ad-client='ca-pub-9651717958493835'" +
                " data-ad-slot='5910985512'" +
                " data-ad-format='link'></ins>");
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    </script>
</div>

Answer 2

我有类似的问题。理论上，Google Adsense允许您在自适应广告单元上使用与display：none结合使用的媒体查询，以便某些单元仅显示大屏幕或小屏幕或手机。在实践中，javascript代码崩溃了。我添加了一个自定义的javascript来延迟加载单元，直到构建DOM，并且还删除了所有的内容＆＃39;媒体查询显示的块：无。

我的解决方案如下。它是丑陋的，它只能在加载JQuery后执行，在我的站点中我异步执行。因此，它不能（在我的网站上）直接放在HTML上。

$(document).ready(function() {
  $('ins').each(function(){
    if ($(this).css("display") == "none") {
      $(this).remove();
    }
  });
  (adsbygoogle = window.adsbygoogle || []).push({});
});

Answer 3

我认为此问题与data-ad-format属性有关。我从ins标签中删除了该属性。在此之后，检查显示是否设置为阻止，最后添加属性。

<div class="hidden-md hidden-lg">
<ins class="adsbygoogle" style="display:block" 
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" 
data-ad-slot="XXXXXXXXXX"></ins>
<script>
    var el = document.querySelector('.hidden-md, .hidden-lg');
    var display = window.getComputedStyle(el, null).getPropertyValue('display');
    var ins = el.querySelector('ins');
    if (display === 'block'){
        ins.setAttribute('data-ad-format', 'auto');
    }
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Answer 4

如果您将响应式visible或hidden Bootstrap类添加到广告包装器（下例中的<div> ID为ads-wrapper），请添加相同的类Google广告<ins>代码。

<div id="ads-wrapper" class="hidden-xs hidden-sm"> 
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle hidden-xs hidden-sm"
       data-ad-client="ca-pub-0123456789"
       data-ad-slot="0123456789">
    </ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

Adsense响应：availableWidth = 0没有插槽大小

4 个答案: