Adsense responsive: no slot size for availableWidth = 0

Question

How do you work with google adsense responsive blocks on a responsive website layout? Consider this simple case (written using 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 layouts for the big screen and only two columns for the small one. The right column is not very important, so we just hide it, it includes an AdSense response unit, and we also hide it.

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

Ideally, I would like to reinitialize the adsense blocks if window resizing (open on a small screen and then enlarged so that the third column is visible should initiate adsense initialization in the column that appears), but I believe that this is not possible now.

I tried to place adsense in a container with a fixed size (which lives inside the hidden-xs block), it does not work, an error appears in any case.

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

Answer 1

, push(), , google , push() ( ),

, , JavaScript , div .

<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>

Hide result

Answer 2

. , Google Adsense - : , . javascript . javascript DOM, "ins", -: none.

. , JQuery, . , ( ) HTML.

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

Answer 3

I think this problem is related to the data-ad-format attribute. I removed the attribute from the ins tag. After that, note whether the screen was set to lock and finally added the attribute.

<div class="hidden-md hidden-lg">
<ins class="adsbygoogle" style="display:block" 
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" 
data-ad-slot="XXXXXXXXXX"></ins>
<script>
    var el = document.querySelector('.hidden-md, .hidden-lg');
    var display = window.getComputedStyle(el, null).getPropertyValue('display');
    var ins = el.querySelector('ins');
    if (display === 'block'){
        ins.setAttribute('data-ad-format', 'auto');
    }
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Answer 4

If you add a review class visibleor hiddenBootstrap to the declaration wrapper ( <div>with the identifier ads-wrapperin the example below), add the same class to the declaration tag <ins>.

<div id="ads-wrapper" class="hidden-xs hidden-sm"> 
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle hidden-xs hidden-sm"
       data-ad-client="ca-pub-0123456789"
       data-ad-slot="0123456789">
    </ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>