Flexbox导致adsense错误:"adsbygoogle.push()错误:availableWidth = 0没有广告位大小" [英] Flexbox causes adsense error: "adsbygoogle.push() error: No slot size for availableWidth=0"

问题描述

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

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.

这不是理想的，因为我的整个网站都是使用flexbox创建的.因此，我想找到一种在Flexbox容器中进行这项工作的方法.

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.

这是我的代码的片段:

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

我还尝试将Google广告中所有对flex的引用替换为display:block;我试过使用宽度，无宽度，最小宽度，最大宽度，所有这些都一起使用.我尝试将其包装在一个flexbox列的div中，我尝试将其包装在一个display:block;的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.

似乎都不起作用.

有什么想法吗?

是否可以向Google报告此(可能)错误?

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

推荐答案

Adsense的响应代码根据其所放置的父元素的宽度来确定其插入的iframe的宽度.通常，这很好用，因为即使父元素尚无内容，它也仍然具有宽度，因为它会填充可用宽度.

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.

但是，如果您的父元素位于一个flexbox行中，该行根据其内容确定其成员的宽度，那么在添加内容之前，该宽度将为零.因此，除了Adsense代码外，框中没有其他内容，在Adsense计算可用宽度时，它为零.

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.

您需要通过以下方法解决此问题:将框设置为具有除auto以外的柔韧性基础，或者对框应用width或min-width属性，以便在Adsense运行其代码之前的初始状态下，宽度将为非零.

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.

因此，在特定的flex成员上，设置非auto的flex基础(例如，百分比或px)

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

flex: 1 0 30%

或设置宽度或最小宽度

min-width: 30%

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

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()错误:availableWidth = 0没有广告位大小"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！