Google Adsense errors - No slot size for availableWidth

adsense ReferenceError: adsbygoogle is not defined

This error comes when you run below js before adsense syndication library is loaded.

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

Below script can be used to load ad syndication library

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-myid" crossorigin="anonymous"></script>

No slot size for availableWidth

This error comes when ad is inserted in an element that has 0 width (When you use flex, width is not known until all elements are loaded in flex children). In react/nextjs applications, this error is very common due to client side and server side rendering process. Since pages are not loaded from server, adsense does not work as expected.

To fix this, you can use wrap the adsense code inside a parent having specific width

  <div className='adparent' align='center' min-width='320px'>
      <ins className="adsbygoogle"
        style={{ display: 'block' }}
        data-ad-client="ca-pub-clientid"
        data-ad-slot="slotid"
        data-ad-format="auto"
        data-full-width-responsive="true"
        >
        </ins>
  </div>

If you are using react/nextjs, you can use below syntax

  <div className='adparent' align='center' style={{minwidth:'320px',margin:'auto',textAlign:'center'}}>
      <ins className="adsbygoogle"
        style={{ display: 'block' }}
        data-ad-client="ca-pub-clientid"
        data-ad-slot="slotid"
        data-ad-format="auto"
        data-full-width-responsive="true"
        >
        </ins>
  </div>

data-ad-status unfilled

When ad is pushed, data-ad-status attribute on ins element becomes "filled" But for some reasons, it may become "unfilled" or it may be missing altogether. When google server does not have suitable ad, it will return "unfilled" and in this case, blank space will be shown in place of ad if page reflow is getting affected.

You can use below css to hide the blank space.

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

You can refer https://www.labnol.org/hide-adsense-ad-units-220130 for more details.

If ad units that are being served via a cross-domain window, the data-ad-status attribute is not added to the ins element.

All ins elements in the DOM with class=adsbygoogle already have ads in them

This error comes when you try to push the ad into ins element that has alreadyad in it.

Below JS code is used to push ad into ins element. If you call this code when all ads are already filled in, you will get above error.

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

Adsense in React and NextJs

You can use below react component to embed google ad in a nextjs application. https://www.npmjs.com/package/react-adsense