CODEWITHSUNDEEP
cssresponsive-designadsense
asto
asto

Reputation: 197

Adsense Responsive not always displayed

Yup, another one with a problem with Google Adsense and their responsive ads. Added a total of three ads to a site, two 'horizontal' and one 'auto'.

Created CSS classes for them since Adsense couldn't figure out their width.

.adSidebar {
    margin: auto;
    max-height: 600px;
    width: 302px;
}
.adContent {
    margin: auto;
    width: 300px;

    @media #{$small-break} {
        width: 320px;
    }
    @media #{$large-break} {
        width: 730px;
    }
}

Ads are included using these classes.

<div class="adContainer">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle adContent" style="display:block" data-ad-client="ca-pub-123456789" data-ad-slot="987654321" data-ad-format="horizontal"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

About 50% of the time all three ads are displayed correctly. However, in those other cases, one or two and missing, sometimes even all three. The error message:

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

But when I look at the ins-element that's not being displayed with Firebug it shows me a fixed width as planned.

Anybody have an idea where to look for the issue? If you want to take a look for yourself, the website is www.kfc-uerdingen.de

P.S.: I treid contacting the Adsense help but since the account is new and thus doesn't show constant revenue yet, they won't let you email them. Their support forum is even worse.

Upvotes: 0

Views: 1443

Answers (1)

Joseph Collins
Joseph Collins

Reputation: 461

I think these three steps can help you solve the problem;

First, it uses the measure of minimum width of AdSense for Mobile in your css:

.adSidebar {
    margin: auto;
    max-height: 600px;
    width: 320px;
    /*width: 302px;*/
}
.adContent {
    margin: auto;
    width: 320px;
    /*width: 300px;*/

    @media #{$small-break} {
        width: 320px;
    }
    @media #{$large-break} {
        width: 730px;
    }
}

Second, load the initialization script once on the "head" block, not in every "ins" block:

<head>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>

Third, load the blocks using Jquery at the end of the page load:

<script>
$(document).ready(function(){
   $('ins').each(function(){
    (adsbygoogle = window.adsbygoogle || []).push({});
   });
});
</script>

I hope this help your problem.

Upvotes: 1

Related Questions