twitter-bootstrap - Adsense 响应式 : no slot size for availableWidth=0

Question

您如何在响应式网站布局上使用 google adsense 响应式 block ？让我们考虑这个简单的案例(用 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 响应 block ，我们也隐藏它。

如果我们在小屏幕上打开这个页面，我们会得到一个错误 TagError: adsbygoogle.push() error: No slot size for availableWidth=0 .如何避免这种情况？

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

我试图将 adsense 放置到固定大小的容器(位于 hidden-xs block 内)，它不起作用，无论如何都会出现错误。

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

Answer 1

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

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