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

问题

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?

回答1:

I just came across this problem and came searching for help.

Only finding information on setting fixed widths (in PX?).

I knew this wasn't correct, I currently had a box with width 90% and worked fine.

One thing that annoyed me was on larger displays google ads never center.

I tried turning it in to a flexbox to align content and that's where my problems started.

I fixed this by setting a setTimeOut and addclass.

    function centerAd() {
     $( "#adBlock" ).addClass( "adBlock" );
    }

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

with the class:

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

It gives google ads enough time to sniff the width of the element, and then centers it nicely. Often seamlessly.

回答2:

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.