Google Adsense 错误“TagError：adsbygoogle.push() 错误：没有可用宽度 = 0 的插槽大小”答案

【问题标题】：Google Adsense Error "TagError: adsbygoogle.push() error: No slot size for availableWidth=0 "Google Adsense 错误“TagError：adsbygoogle.push() 错误：没有可用宽度 = 0 的插槽大小”
【发布时间】：2016-02-01 14:26:05
【问题描述】：

我在我的网站上使用响应式 Google Ads，但很遗憾，它并非一直有效，而且大部分时间它都会返回

TagError：adsbygoogle.push() 错误：没有可用宽度=0 的槽大小

我尝试通过定义广告尺寸来解决问题，但问题仍未解决。

.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
@media only screen and (min-width:800px)and (max-width:3000px) {
    #topbanner {
        width: 640px;
        height: 90px;
    }
}

嗯，这是我使用的实际 Google Adsense Google 代码（出于安全原因，我删除了 pub-id 和 ad-slot。）

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- articles(auto) -->
<ins class="adsbygoogle adslot_1"
     style="display:inline-block;"
     data-ad-client="ca-pub-[MY_AD_ID]"
     data-ad-slot="AD_SLOT_NOS"
     data-ad-format="rectangle, horizontal"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

【问题讨论】：

我将 AdSense 代码块放入 Angular ng-cloak 时遇到了这个问题，在我将代码块移出 ng-cloak 后问题就消失了。如果您将 adsense 代码放在一些动态生成的 html 中，请确保在执行 google 代码之前 DOM 已准备好并且可见。
当父容器没有有效宽度时会发生此错误 a) 由于 CSS 定位（如 absolute 或 float.OR b) 它被 display:none 隐藏。为此，您需要使用官方批准的代码更改。 1）移除高级响应标签格式属性，2）设置INS标签的宽度和高度。 GOOGLE ADSENSE ERROR - NO SLOT SIZE FOR AVAILABLEWIDTH

标签： javascript css

【解决方案1】：

我有同样的问题并通过删除这些来解决它。

display: flex;
flex-direction: column;

【讨论】：

【解决方案2】：

只需添加style="display:inline-block;width:100%;" 这对我有用。

【讨论】：

【解决方案3】：

我遇到了同样的问题，因为主页上没有侧边栏，并且错误只出现在上面我通过在侧边栏中的 adsense 元素上添加它来纠正

cond='data:blog.pageType == "item"'

【讨论】：

【解决方案4】：

我发现修改 ins 标签以删除 data-ad-format 属性解决了我的错误：

<ins class="adsbygoogle adslot_1"
 style="display:inline-block;"
 data-ad-client="ca-pub-[MY_AD_ID]"
 data-ad-slot="AD_SLOT_NOS"></ins>

【讨论】：

【解决方案5】：

我用过：

window.onload = function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
}

我的网站以一种特殊的方式加载页面，大量使用 AJAX，所以它必须是这种方式。希望这对某人有所帮助。

EDIT 2018：我觉得我现在应该提一下，这样做的首选方法是使用 window.addEventListener( 'load', ... )，而不是旧方法 window.onload = ...

【讨论】：

这绝对有帮助。
这对我有帮助，非常感谢。我们的网站使用的是砖石展示，使用 JS，所以在我使用这个之前，广告的容器没有被正确计算！未来的读者：请注意他用该代码替换了以下代码：(adsbygoogle = window.adsbygoogle || []).push({});
也可以稍微修改一下谷歌的脚本：
确实有帮助，终于解决了这个问题，谢谢！
请问你能用(adsbygoogle = window.adsbygoogle || []).push({}); 显示完整的脚本吗？谢谢

【解决方案6】：

如果您使用的是angular-google-adsense，则需要从您的adsense html 块中删除ad-format 标记；

错误：

<adsense 
ad-client="ca-pub-2427218021515520" 
ad-slot="5093178896" 
inline-style="display:inline-block;width:100%;" 
ad-format="auto">

对：

<adsense 
ad-client="ca-pub-2427218021515520" 
ad-slot="5093178896" 
inline-style="display:inline-block;width:100%;">

【讨论】：

【解决方案7】：

我整天都在试图找到错误的解决方案，我要感谢@Emerson Thompson 的解决方案！

在我工作的一个环境中，我依赖于 Ad Inserter Pro for WordPress 插件。事实证明，该插件会打印所有布局（移动和桌面）的 HTML。以视口宽度为标准，然后使用 CSS 隐藏一些。

当adsbygoogle.js 发现隐藏广告时，它会抛出TagError: adsbygoogle.push() error: No slot size for availableWidth=0 异常，阻止后续的javascript 执行。

在初始化它们之前，请务必检查您的广告可见性。

【讨论】：

【解决方案8】：

你需要删除其他不可见的，我如何使用（jQuery）：

$(document).ready(function(){
  var $analyticsOff = $('.adsbygoogle:hidden');
  var $analyticsOn = $('.adsbygoogle:visible');

  $analyticsOff.each(function() {
    $(this).remove();
  });
  $analyticsOn.each(function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
  });
});

【讨论】：

【解决方案9】：

在我们的例子中，我们在显示两个横幅时遇到了问题，但仅在 Chrome 中。第一个横幅不会显示，它会产生错误：

availableWidth=0 没有插槽大小

第二个横幅会正常显示。该问题在 Safari 或 Firefox 中没有发生。尝试通过 CSS 解决问题没有帮助。

我们通过改变解决了这个问题：

(adsbygoogle = window.adsbygoogle || []).push({})

到

$(document).ready(function(){(adsbygoogle = window.adsbygoogle || []).push({})})

上述方法需要jQuery。

【讨论】：

您需要在您的网站上启用 jQuery。如果已经尝试 jQuery(document).ready(function(){(adsbygoogle = window.adsbygoogle || []).push({})})
试试Sorin的答案，不需要jQuery。它对我有用：window.onload = function() { (adsbygoogle = window.adsbygoogle || []).push({}); }

【解决方案10】：

一个可能的原因是您使用的框架设置了包含广告单元的 div 的样式，该框架会在尺寸规范方面产生冲突。就我而言，我使用的是引导样式，这弄乱了我的广告展示。

<div id="ad1" class="row">
<!-- ad code-->
</div>

这不起作用。一旦我删除它：

<div id="ad1">
<!--ad code-->
</div>

效果很好

【讨论】：

【解决方案11】：

1.确保在推送广告时 DOM 已准备就绪。

原版（仅限现代浏览器）

document.addEventListener("DOMContentLoaded", function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
});

在 jQuery 中

$(document).ready(function(){
    (adsbygoogle = window.adsbygoogle || []).push({});
});

在角度

$timeout(function () {
    (adsbygoogle = window.adsbygoogle || []).push({});
});

2.确保页面上的广告数量正确。

~~广告总数不超过 google 的限制，即每页 3 个广告~~。根据Google's new policy，添加到您网页的广告和其他付费宣传材料不得超出您的内容。
推送到adsbygoogle的广告数量对应于您在网页上展示的广告。

3.对于响应式单元，添加宽度和高度。

Responsive ad units 需要在 ins 元素上指定宽度和高度。你可以这样做：

ins {
    min-width: 300px;
    min-height: 50px;
}

【讨论】：

谷歌取消了最多 3 个广告的限制。阅读：wpquads.com/google-adsense-allowed-number-ads
感谢@ReneHermenau。更新以反映 Google 的变化。
针对我们的情况，我们使用这些 css 建议：support.google.com/adsense/answer/…

【解决方案12】：

如果有响应式主题和响应式 AdSense 单元，则会发生错误。因此，如果您在 CSS 中定义宽度和高度（而不是 %），这将解决（至少它解决了我的问题）

#sidebar {
width: width of your ad px;
height: height of your px;
}

【讨论】：

【解决方案13】：

我使用 setTimeout 解决了这个问题，因为问题是 GA 代码在默认加载时没有选择父级的大小。

setTimeout(function(){(adsbygoogle = window.adsbygoogle || []).push({})}, 1000);

【讨论】：

【解决方案14】：

您的父容器在哪里？我认为您应该在父级上设置宽度和高度，而不是实际的 <ins> 标签。

【讨论】：