CODEWITHSUNDEEP
twitter-bootstrapresponsive-designadsense
Kasheftin
Kasheftin

Reputation: 9503

Adsense responsive: no slot size for availableWidth=0

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.

Upvotes: 5

Views: 7543

Answers (4)

phlegx
phlegx

Reputation: 2752

If you add a responsive visible or hidden Bootstrap class to the ads wrapper (the <div> with id ads-wrapper in the example below), add the same class to the Google ads <ins> tag.

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

Upvotes: 0

Jo&#227;o Santos
Jo&#227;o Santos

Reputation: 1

I think that this issue is related to the data-ad-format attribute. I removed the attribute from the ins tag. After this, checked if the display was set to block 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>

Upvotes: 0

Juanjo
Juanjo

Reputation: 669

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({});
});

Upvotes: 2

Yovav
Yovav

Reputation: 2787

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>

Upvotes: 3

Related Questions