Flexbox导致adsense错误:;adsbygoogle.push(）错误:没有可用宽度为0的插槽大小;

Flexbox causes adsense error: "adsbygoogle.push() error: No slot size for availableWidth=0"

本文关键字：错误 插槽 adsbygoogle adsense 导致 push Flexbox      更新时间：2023-09-26

我有一个网站，它使用有角度的材料和flexbox进行布局。我试图在其中一个flexbox容器中包含一个Google Adsense片段，但它给了我错误："adsbygoogle.push（）error:No slot size for available Width=0"。然而，如果我将相同的代码段放在flexbox容器之外，它就会正常运行。

这并不理想，因为我的整个网站都是用flexbox制作的。因此，我想找到一种方法，使这项工作在一个灵活的盒子容器。

以下是我的代码片段：

    <div layout="column" layout-align="center center" layout-padding="" flex="flex" class="scroller container">
      <div flex="" hide-xs="" show-gt-xs="">
        <h1>My Account</h1>
      </div>
      <welcome></welcome>
      <script async="" defer="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- responsive ad-->
      <ins flex="grow" style="width:100%;min-width:100px;height:100px;" data-ad-client="ca-pub-IDISHEREONMYSITE" data-ad-slot="IDISHEREONMYSITE" data-ad-format="auto" class="adsbygoogle"></ins>
      <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            (adsbygoogle = window.adsbygoogle || []).push({})
        });
      </script>
    </div>

我还尝试将谷歌广告中所有对flex的引用替换为只显示：block；我试过使用宽度、无宽度、最小宽度、最大宽度，所有这些都在一起。我试着把它包装在一个作为flexbox列的div中，我试着将它放在一个display:block的div中；具有固定宽度等

这些似乎都不起作用。

有什么想法吗？

有没有办法向谷歌报告这个（可能的）错误？

我刚刚遇到这个问题，正在寻求帮助。

仅查找有关设置固定宽度的信息（在PX？中）。

我知道这是不对的，我现在有一个宽度为90%的盒子，效果很好。

有一件事让我很恼火，那就是在更大的显示屏上，谷歌的广告永远不会成为中心。

我试着把它变成一个灵活的盒子来调整内容，这就是我的问题开始的地方。

我通过设置setTimeOut和addclass解决了这个问题。

    function centerAd() {
     $( "#adBlock" ).addClass( "adBlock" );
    }
    var timeoutID;
$(function() {
     timeoutID = window.setTimeout(centerAd, 1000);
})

类别：

.adBlock {display: flex; justify-content:center; align-items:center; align-content:center} /* We call this after page has loaded to center ad */

它给谷歌广告足够的时间来探查元素的宽度，然后很好地将其居中。通常是无缝的。

Adsense的响应代码根据其所在父元素的宽度来确定其插入的iframe的宽度。通常情况下，这很好，因为即使父元素还没有内容，它仍然有一个宽度，因为它填充了可用的宽度。

但是，如果父元素位于根据其内容确定其成员宽度的flexbox行中，则在添加内容之前，该行的宽度将为零。因此，除了Adsense代码，盒子里没有其他东西，当Adsense计算可用宽度时，它为零。

你需要通过将框设置为具有除auto之外的灵活基础来解决这一问题，或者将width或min-width属性应用于框，这样在Adsense运行代码之前的初始状态下，它的宽度将为非零。

因此，对于特定的弹性成员，可以设置一个非自动的弹性基础（例如百分比或像素）

flex: 1 0 30%

或者设置宽度或最小宽度

min-width: 30%

当唯一的内容是Adsense广告时，你不能使用基于内容确定宽度的弹性基础，因为广告是通过JavaScript插入的。

您需要在px中定义宽度，而不是%。

试着看看这里，它可能会帮你。

相关文章：