您如何在自适应网站布局上使用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列布局,对于小屏幕只有2列。右列不是很重要,因此我们将其隐藏,它包括adsense响应块,我们也将其隐藏。
如果我们在小屏幕上打开此页面,则会收到错误
TagError: adsbygoogle.push() error: No slot size for availableWidth=0
。如何避免这种情况?理想情况下,如果窗口大小发生变化(在小屏幕上打开然后放大以使第三列可见,则应该在出现的列中触发adsense初始化),我想重新初始化adsense块,但是我想现在还不可能。
我试图将adsense放到固定大小的容器中(该容器位于hidden-xs块中),它不起作用,无论如何都会出现错误。
我还尝试将响应式类添加到
<ins class="adsbygoogle hidden-xs">...</ins>
,但它也不能消除错误。 最佳答案
我遇到了同样的问题,即使我禁用了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>
关于twitter-bootstrap - Adsense响应式: no slot size for availableWidth=0,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40112557/