Flexbox 导致 adsense 错误:“adsbygoogle.push() error: No slot size for availableWidth=0"； [英] Flexbox causes adsense error: "adsbygoogle.push() error: No slot size for availableWidth=0"

问题描述

我有一个使用 angular-material 和 flexbox 进行布局的网站.我正在尝试在这些 flexbox 容器之一中包含一个 Google Adsense 代码段，但它给了我错误:adsbygoogle.push() 错误:没有可用宽度 = 0 的插槽大小".但是，如果我将相同的代码段放在 flexbox 容器之外，它会正常运行.

这并不理想，因为我的整个网站都是用 flexbox 制作的.所以我想找到一种方法来在 flexbox 容器中完成这项工作.

这是我的代码片段:

 
<div flex=""hide-xs=""show-gt-xs=""><h1>我的账户</h1>
<欢迎></欢迎><script async="" defer="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- 响应式广告--><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><脚本>document.addEventListener("DOMContentLoaded", function(event) {(adsbygoogle = window.adsbygoogle || []).push({})});

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

似乎都不起作用.

有什么想法吗?

有没有办法向 Google 报告这个(可能的)错误?

解决方案

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

但是，如果您的父元素位于根据其内容确定其成员宽度的 flexbox 行内，则该行的宽度将为零，直到添加内容.所以除了 Adsense 代码之外，框中没有其他任何东西，在 Adsense 计算可用宽度时，它为零.

您需要通过将框设置为具有自动以外的 flex 基础来解决此问题，或者将 width 或 min-width 属性应用于框，以便在 Adsense 运行其代码之前的初始状态下，它将有一个非零宽度.

所以在特定的 flex 成员上，要么设置自动以外的 flex 基础(例如百分比或像素)

flex: 1 0 30%

或设置宽度或最小宽度

最小宽度:30%

当唯一的内容是 Adsense 广告时，您不能使用根据内容确定宽度的 flex 基础，因为该广告是随后由 JavaScript 插入的.

I have a website which uses angular-material and flexbox for it's layouts. I'm trying to include a Google Adsense snippet inside one of these flexbox containers, but it gives me the error: "adsbygoogle.push() error: No slot size for availableWidth=0". However, it runs properly if I put the same snippet outside of a flexbox container.

This is not ideal, since my entire site is made with flexbox. So I'd like to find a way to make this work within a flexbox container.

Here's a snippet of my code:

    <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>

I've also tried replacing all references to flex in the google ads to just display:block; I've tried using width, no width, min width, max width, all of them together. I've tried putting it wrapped in a div that is a flexbox column, I've tried putting it in a div that is display:block; with fixed widths, etc.

None of it seems to work.

Any ideas?

Is there a way to report this (possible) bug to Google?

解决方案

Adsense's responsive code determines the width of the iframe it inserts based on the width of the parent element in which it is placed. Normally this works fine because even when the parent element has no content yet, it still has a width because it fills the available width.

However, if your parent element is within a flexbox row which determines the width of its members based on their content, the width of this will be zero until content is added. So of there is nothing else in the box other than the Adsense code, at the time Adsense calculates the available width, it's zero.

You need to get around this by setting the box to have a flex basis other than auto, or to apply a width or min-width property to the box, so that in the initial state before Adsense has run its code, it'll have a nonzero width.

So on the specific flex member, either set a flex basis other than auto (eg a percentage or px)

flex: 1 0 30%

Or set a width or min-width

min-width: 30%

You can't use a flex basis that determines width based on content when the only content is an Adsense ad, as the ad is inserted afterwards by JavaScript.

这篇关于Flexbox 导致 adsense 错误:“adsbygoogle.push() error: No slot size for availableWidth=0"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！