CODEWITHSUNDEEP
adsense
user9927454
user9927454

Reputation: 161

TagError: adsbygoogle.push() error: No slot size for availableWidth=0 when i use responsive ads

i have responsive ads set for Adsense

I am getting the error:

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

on every page that has this code

<style type="text/css">
.adslot_2 { display:inline-block;width: 336px; height: 280px;}
@media (max-width: 336px) { .adslot_2 { width: 300px; height: 250px; } }
@media (min-width: 500px) { .adslot_2 { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_2" data-ad-client="removed for security purpose" data-ad-slot="removed for security purpose" data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

i tried tampering with the code a lot but still getting the same error note that i have other responsive ad units with different codes that are not showing this error so i am 100% sure the problem is with the code itself

my objective is to hide the ad from desktop and show it on mobile devices

what is wrong with the code?

Upvotes: 15

Views: 27809

Answers (4)

Pankaj Rawat
Pankaj Rawat

Reputation: 4583

When you are placing your ad unit you must explicitly set min-height. For me I added custom style

Added style block on page

<style>
  .responsive_header_unit { min-width: 150px; }
  </style>

Added style class on google ad code

<ins class="adsbygoogle responsive_header_unit"
     style="display:block"
     data-ad-client="ca-pub-839833899"
     data-ad-slot="839833899"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Upvotes: 0

Muhammad Inam Ur Rehman
Muhammad Inam Ur Rehman

Reputation: 9

replace:

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

with:

window.addEventListener('load', function (){
         (adsbygoogle = window.adsbygoogle || []).push({});
         })

Upvotes: 0

Anthony
Anthony

Reputation: 7300

I had a similar problem. I noticed that it was because of the banners which had been made invisible based on the size of screen. A solution was to rename the "adsbygoogle" class (I went for 'ADSENSE') to make sure the adsense script wouldn't do anything with the banners before I remove them from the DOM if they were not visible once the stylesheet had been loaded (hence the 'load' event):

window.addEventListener('load', () => {
 let matches = document.querySelectorAll("ins.ADSENSE");

        Array.from(matches).forEach((element) => {
            let parentElement = element.parentElement;
            if (window.getComputedStyle(parentElement).getPropertyValue("display") === "none")  { 
                element.remove(); 
            } else {
            element.classList.remove("ADSENSE");
            element.classList.add("adsbygoogle");
                (adsbygoogle = window.adsbygoogle || []).push({}); 
            }
        });

});

Upvotes: 5

galeksic
galeksic

Reputation: 2176

There are (basically) two different methods of responsive ad unit "sizing" in Google AdSense.

The first one is automatic, the second is "manual".

Usually no method can be automatic and manual at the same time, because there will be a conflict between the two, and I think your code should work fine if you remove data-ad-format="rectangle".

If that works for you, please check again "My ads" > "Ad units" page in your Google AdSense dashboard, and make sure this ad unit ID (data-ad-slot) is listed as "Responsive" - none of the two methods should be used with fixed sized ad units.

Upvotes: 19

Related Questions