Adsense responsive: no slot size for availableWidth=0

Question

How do you operate with google adsense responsive blocks on responsive website layout? Let's consider this simple case (written with bootstrap):

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">Menu</div>
    <div class="col-sm-8 col-md-6">Content</div>
    <div class="col-md-3 hidden-sm hidden-xs">Column with Adsense</div>
  </div>
</div>

So we have 3 column layout for large screen and only two columns for small one. The right column is not very important so we just hide it, it includes adsense responsive block and we hide it as well.

If we open this page on small screen, we get an error TagError: adsbygoogle.push() error: No slot size for availableWidth=0. How to avoid this?

Ideally I would like to reinitialize adsense blocks if window size changes (opened on small screen and then enlarged so that the third column becomes visible should trigger adsense initialization in appeared column), but I suppose it's not possible for now.

I tried to place adsense to fixed-size-container (that lives inside hidden-xs block), it does not work, the error appears anyway.

I also tried to add responsive class to the <ins class="adsbygoogle hidden-xs">...</ins> but it also does not remove the error.

Answer 1

I had the same problem, even when I disabled the push() call I was still getting the error because google still finds this ad elements on the next time push() is called (for a different ad),

Finally, it worked when I inject the JavaScript of the fly only when that disappearing div is not hidden.

<div id="ad-top-right-wrapper" class="hidden-xs col-sm-4 col-lg-3">
    <!-- Portal top right links -->
    /* <ins class="adsbygoogle"
            style="display: block; overflow: hidden;"
            data-ad-test="@googleDataAdTest"
            data-ad-client="ca-pub-9651717958493835"
            data-ad-slot="5910985512"
            data-ad-format="link"></ins> */
    <script>
        // Inject this ad manually when hidden-xs is not in affect (the div is visible)
        // Otherwise google ads will try to push it when the next .push() is called
        if (($("#ad-top-right-wrapper").css("display") !== "none")) {
            document.write("<ins class='adsbygoogle'" +
                " style='display: block; overflow: hidden;'" +
                " data-ad-test='@googleDataAdTest'" +
                " data-ad-client='ca-pub-9651717958493835'" +
                " data-ad-slot='5910985512'" +
                " data-ad-format='link'></ins>");
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    </script>
</div>

Answer 2

I had a similar problem. In theory, Google Adsense allows you to use media queries combined with display:none on responsive ad units, so that certain units only display for large or small screens or phones. In practice the javascript code crashes on them. I added a custom javascript to delay loading of units until the DOM was built and also to remove all 'ins' blocks for which the media query gave display:none.

My solution was as follows. It is ugly and it can only be executed after JQuery has been loaded, which in my site I do asynchronously. Hence, it cannot be placed (on my site) directly on the HTML.

$(document).ready(function() {
  $('ins').each(function(){
    if ($(this).css("display") == "none") {
      $(this).remove();
    }
  });
  (adsbygoogle = window.adsbygoogle || []).push({});
});