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

【问题标题】：Adsense responsive: no slot size for availableWidth=0Adsense 响应式：availableWidth=0 没有插槽大小
【发布时间】：2017-02-27 23:34:09
【问题描述】：

您如何在响应式网站布局上使用 google 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 放置到固定大小的容器（位于 hidden-xs 块内），它不起作用，无论如何都会出现错误。

我也尝试将响应类添加到<ins class="adsbygoogle hidden-xs">...</ins>，但它也没有消除错误。

【问题讨论】：

标签： twitter-bootstrap responsive-design adsense

【解决方案1】：

我遇到了同样的问题，即使我禁用了 push() 调用，我仍然收到错误，因为谷歌在下次调用 push() 时仍然会找到这个广告元素（对于不同的广告），

最后，当我只在那个消失的 div 没有隐藏的情况下注入 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>

【讨论】：

【解决方案2】：

我遇到了类似的问题。理论上，Google Adsense 允许您在响应式广告单元上使用结合 display:none 的媒体查询，以便某些单元仅在大屏幕或小屏幕或手机上显示。在实践中，javascript 代码会在它们上崩溃。我添加了一个自定义 javascript 来延迟加载单元，直到构建 DOM 并删除媒体查询给出 display:none 的所有“ins”块。

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

如果您将响应式 visible 或 hidden Bootstrap 类添加到广告包装器（下例中 ID 为 ads-wrapper 的 <div>），请将相同的类添加到 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>

【讨论】：