CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapadsense
Tarvo Mäesepp
Tarvo Mäesepp

Reputation: 4533

Load ads after content is loaded

I am trying to load AdSense responsive ads after content is loaded from Firebase, however no ads are showing, just blank pace. After putting code online I get error:

No slot size for availableWidth=0

I went through about 4 pages in google to find solution but couldn't get one so I thought you can help me out.

I am applying the AdSense code as following:

    <head>
       <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    </head>
    <body>
       <div id="demo" style="display: none;">
       <!-- SnusPedia automatic size add -->
       <style>
          .example_responsive_1 { width: 320px; height: 100px; }
          @media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
          @media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
       </style>
       <ins class="adsbygoogle example_responsive_1"
          style="display:block"
          data-ad-client="ca-pub-8297030761327810"
          data-ad-slot="9809929086"
          data-ad-format="auto"></ins>
       <script>
             window.onload = function(){
            (adsbygoogle = window.adsbygoogle || []).push({});
             }
       </script>
  </div>

    </body>

What could cause the problem?

Upvotes: 2

Views: 1342

Answers (1)

Luca Steeb
Luca Steeb

Reputation: 1849

AdSense won't show an ad if it is hidden or has a width/height of 0, which happens in your case because of your surrounding div#demo. It is completely hidden so AdSense can't fill an ad since there is no space available. Try removing the display: none from #demo.

Additionally, it is not allowed to load ads on a custom event which means that it may be against Google's TOS to show the ad after waiting for the firebase query.

I could imagine that you could remove the script tag which loads adsbygoogle.js, then wait for your firebase query and load adsbygoogle.js – however I doubt that Google allows this.

I would recommend you to simply remove the display: none from the outer div and just load the ad regardless of whether your firebase query has finished or not.

Upvotes: 0

Related Questions