Solved: TagError: adsbygoogle.push() error: No slot size for availableWidth=0

Recently, I was trying to add Google AdSense to this website, but unfortunately, I came across an uncaught exception: TagError: adsbygoogle.push() error: No slot size for availableWidth=0. It is really annoying! But after a long-term research and practice, I have solved this problem successfully. In this post, I want to share my experience and wish it could be helpful for you.

Case of Google AdSense error:

Here is one of cases of Google AdSense error that happened on my website and this is my website's Google Adsense script and its CSS at first.

As you can see, I added a flexbox container to Google Adsense snippet to make it easier to adapt the flexible responsive layout structure of my website. But when I tested on the browser, the Google ad was NOT displayed and it returned an uncaught exception: TagError: adsbygoogle.push() error: No slot size for availableWidth=0.

Then I started searching for reasons on the Internet, modifying and testing. I have done multiple trials such as setting a width, minimum width, maximum width for the container, changing the layout mode of container to display: none and display: block, etc. But none of them worked. Finally, I removed the flexbox of Google Ads (display: flex), and it was workable and the Google Ads was displayed normally.

Cause of not showing Google Ads:

Actually, the fundamental reason for Google AdSense error: TagError: adsbygoogle.push() error: No slot size for availableWidth=0 is that the valid width of its parent container can't be detected.

To adapt multiple types of website layout such as responsive layout and static layout, Google Adsense has introduced Responsive Ad units, which can read the parent container's dimensions for available width. AdSense's responsive script determines its width of iframe based on the width of the parent element that it is placed on. On the website of static layout, Responsive Ad units can obtain the valid width and height without any issue. However, the width of flexbox container is based on their content, and there is no content before the Google Ads is added, so, the avalid width is zero. As a result, it returns the error: TagError: adsbygoogle.push() error: No slot size for availableWidth=0. The same error also may happen in other situations like the CSS positioning of parent container is absolute or float, the layout of parent container is hidden (display: none).

Solutions to Google Ads error:

In either situation, when you encounter this Google AdSense error, you can try to solve it with the following methods.

• 1. Remove the layout of parent container of Google Ads.
• 2. Set a valid width to the parent container if it is float or absolute.
• 3. Make sure that the DOM is ready when pushing the Google Ads.

Closing Thoughts

Google Adsense allows us to modify the responsive Google Ads code to better meet the requirements of our responsive site. If it doesn't meet our need, we can modify it within acceptable range. More details of modifying responsive ad code can be referred to AdSense Help.