AdSense Responsive Ad Units Showing Blank Space in Blogger - [Fix]


Adsense Ads show blank spaceIt is almost a year since Google introduced Responsive Ad units for Mobile friendly weblogs and sites. Previously the Ads were synchronous which had a fixed ad size and were slow too in loading but now all responsive Ad units are  asynchronous in nature which means they will render and load seamlessly without effecting other elements from loading on your web page, this immensely reduces your blog load time.  One of the problems linked with Responsive Ad units is that most bloggers found it difficult displaying the async code on their blogspot blogs. For many users the responsive Ad unit shows a blank space or gives an error on browser console.

Many blogspot users contacted us how we managed to show responsive ad units on all our sites So today we will share the solution that will help you display responsive AdSense Ads in Blogger that is the only Fix to avoid the vacant space issue  (no Ad being displayed) and you will also learn how to hide AdSense ads using the display:none property which is now amazingly allowed only for asynchronous ads by Google.

Update : Safely Hide AdSense Ads using "Display:none"

DEMO: All Ads that you see on this blog are Responsive. Due to Low CTR we have reverted back to Synchronous
Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
6. Create Mobile Responsive AdSense Ads and Safely Hide AdSense units
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Why Should You use Responsive Ad Units?

Just like how a Responsive web design allows you to dynamically control the presentation of your webpage according to the properties of the screen size that it’s being viewed on similarly a responsive ad unit allows you to control the ad size on your page. You can choose which Ad size to display on your iPhone, Samsung, Tablet or iPad. You can also decide when to display ads and when to hide it for small screen devices.

Following are reasons why you should use responsive units

  1. Your Ads load asynchronously, thus making your page load faster as opposed to the Old Adsense Code which slows down web page loading.
  2. Automatic sizing based on the space available, shows high resolution ads to your visitors thus increasing overall CTR. Your ads will not look chopped or cut from edges on small screens.
  3. You can now Hide Ads! Google now allows users to use the display:none CSS property to hide Ad units. This is only allowed for responsive units.
  4. Mobilegeddon Penalty punishes sites that are not mobile friendly and which do not load fast. Responsive Ad units makes your ads fluid and flexible and make pages load faster, thus providing the best user interface.

The only drawback is that Adsense responsive Ads do not change size on device orientation unless page is reloaded. So same ad will be displayed in both landscape and portrait view when the user rotates the device without page reloading.

Why Do you See a Blank Space?

If you are seeing a blank space or empty Ad spot with no ad being displayed then you are probably making one of these mistakes:

Popular Reasons

  1. The Parent container has no width set: Async Ad code won’t load if you have not mentioned a width to the container where you placed the ad. You must define a class for your Ad code to control its display using CSS Media Queries.
  2. You didn't remove the data-ad-format tag: You will see the following error on your browser console when you forget to mention a width to the Ad container or when you have not removed the smart-sizing tag i.e. data-ad-format="auto" This tag is the major reasons for Ad not being displayed. Google need to work on it to make it work better.

    responsive-ad-size-console-error

  3. If ads are displaying fine on your sidebar widgets but not working inside blogger template then the only reason this is happening could be that you did not encode the HTML code correctly. We will discuss below how to do it.

Less Popular Reason

Your site uses third-party JavaScript: If you are using scripts to hide ads until all page content have loaded then Async Ad code won't load because it will not be able to calculate the required size for the responsive ad unit.

In both these cases, you will see a blank space and no Ad being displayed. We will guide you how to fix the first reason and for the 3rd-Party JavaScript thing, I am sure this does not apply to most users because rarely would anyone use such a script. So lets go straight to the solution!

Create a Responsive Ad Unit

Note: The method described below abides by the Google AdSense Program Policy rules and is safe and tested.

You will Create an ad unit in the usual way:

  1. Go To your Adsense Account
  2. Click My Ads tab
  3. Click "New Ad unit"
  4. Choose “Responsive” from the Ad size options
  5. Fill other details and click Save and get code.

select responsive Ad size

 

Your code will look quite similar to this:

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

From the above code you just need your data-ad-client alpha-numeric code and your data-ad-slot numeric code as shown bolded in the code above. Copy these two codes from the Adsense code you generated and keep them safe inside a notepad because we will need them later.

Add Responsive Ad Units inside Blogger Widgets

If you wish to add AdSense Content unit inside a widget on your sidebar then follow these steps:

1. Go To Blogger > Layout

2. Click "Add a Gadget"

3. Select "HTML/JavaScript" Widget

4. Paste the following code inside it

<style type="text/css">
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }

@media (min-width:100px) { .adslot_1 { width:125px; height:125px; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; } }
@media (min-width:200px) { .adslot_1 { width:200px; height:200px; } }
@media (min-width:250px) { .adslot_1 { width:250px; height:250px; } }
@media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
@media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
@media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
@media (min-width:728px) { .adslot_1 { width:728px; height:90px; } }

</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
     style="display:inline-block;"
     data-ad-client="xxxxxxx"
     data-ad-slot="xxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Make these changes:

  • Set 300px equal to your sidebar width. If your sidebar is 400px in size then set width to 400px. Suppose If you want to display ads on Footer or Header where you may even display large Leaderboard ads then you may set the width to 800px.
  • Replace xxxxxxx with the alpha-numeric code of Client ID that you saved inside a notepad.
  • Replace xxxxxx with the numeric code of your Ad slot that you saved inside a notepad.

5. Save your widget and you are all done!

The code above will display a Half Page Ad, Squares and Rectangles for small, medium and large sizes based on the Mobile Device Screen size.

The above code will display best performing Adsense ads on your sidebar. I have assigned the best performing Larger Ad units to the code above to give a higher CTR. The table below shows how great larger ad units perform compared to smaller units.

best performing AdSense ad units

The above chart was shared by the AdSense optimization team in an online webinar.

Want to Add more Ad units?

If you want to add another Ad unit on your sidebar then you can use the same code as I shared above with a slight change.

  • You will replace adslot_1 with adslot_2 everywhere. To add a third unit replace adslot_1 with adslot_3 and so on..

Add Responsive Ad Units inside Blogger Template

To ad responsive Ads inside the blogger template you need to make a slight modification to the code above. We need to encode the JavaScript code which renders the ads. I have made all changes for you. You just need to use the code below instead:

<style type="text/css">
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }

@media (min-width:100px) { .adslot_1 { width:125px; height:125px; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; } }
@media (min-width:200px) { .adslot_1 { width:200px; height:200px; } }
@media (min-width:250px) { .adslot_1 { width:250px; height:250px; } }
@media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
@media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
@media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
@media (min-width:728px) { .adslot_1 { width:728px; height:90px; } }

</style>
&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;

<ins class="adsbygoogle adslot_1"
     style="display:inline-block;"
     data-ad-client="xxxxxxx"
     data-ad-slot="xxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The yellow highlighted region shows the encoded code. You will make same changes to the above code as you did for the sidebar. No extra steps involved here. Simply copy the code, make changes as guided and start enjoying a better Mobile revenue thanks to Google Adsense Responsive Ads!

See them in action!

The ad in the footer of this blog is responsive so I am sharing some screenshots from iPhone devices to show how the ads auto adjusts itself based on device screen size.

Actual size on laptops and Tablets (728 X 90 Ad Size)

Adsense ads on ipad mini

 

iPhone Portrait view  (300 X 250 Ad Size)

Adsense ads in portrait view

 

iPhone Landscape view (468 x 60 Ad size)

Adsense ads in landscape view

Need Help?

This is the first and only tutorial which guides you properly on how to setup Responsive Ads on blogspot blogs, if you need any help or further assistance then please feel free to let us know by posting your question in the comment box below or by joining our 24/7 Free Help forum.

In our next tutorial, we will discuss how to use display:none property to hide Adsense on small screen devices. Till then do experiment with the code above and do let us know your feedback. Peace and blessings buddies! =)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

38 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. thanks you for providing and sharing such a nice information. Really its helpful post like all others

    ReplyDelete
  2. Wow Mustafa, This is such a great guide with all the screenshots and everything. I don't have AdSense for my blog, will be soon applying for it. I am sure this guide might come handy in future. ~ Rohan.

    ReplyDelete
  3. Asalam-o-alaikuM Mustafa bhai,

    Pretty impressive! Thanks for putting up this guiding post!

    I don't have BlogSpot nor AdSense but I sense that even this fix could work for WordPress-backed sites experiencing similar issue as well, right?

    Thanks again!

    ~ Adeel Sami

    ReplyDelete
    Replies
    1. W.salam dear adeel!

      Exactly, this guide works for all platforms. Since we focus more on blogger users that is why our title is blogspot specific else the CSS media queries method work fine for all platforms including Wordpress blogs :)

      Delete
  4. I already approve to use Google Adsense on my blog for past 3 months. But since I put Google Adsense on my blog, ads always shows blank space without showing any ads. How to solve this?

    ReplyDelete
    Replies
    1. did you try the above tutorial? Try it once and you will find ads working just fine

      Delete
  5. Thank you for sharing this post!!!!

    ReplyDelete
  6. My ads is loading very slowly and I am sure that my visitor scrolling the page without seeing the ads under the title.Now it is ok.Ads is loading asynchronously.
    Thanks for the post.

    ReplyDelete
    Replies
    1. That is the plus point of responsive ads that they always serve the best size ads to the mobile user thus improving revenue.


      I am testing these ads for a week and will share how it effected our revenu.

      Delete
  7. Thank you for posting this article.

    ReplyDelete
  8. Ohhh god thanks. for some time i was nervous that google has blocked my account. now its working for my ads.

    ReplyDelete
  9. its not working on my site....my blog still shows blank spaces....

    ReplyDelete
  10. I want to know which one is better asynchronous ads code or responsive ads code as per the earning. I am running asynchronous ads code on one of my blog and responsive ads code on other, and as per my experience asynchronous earning is far more better than responsive. What's your opinion. I have implemented responsive code on my website: pnrstatusbuzz.in, just have a look for any suggestion.

    ReplyDelete
  11. can we simply click adsense gadget instead of adding hrml gadget & pasting code in it?

    ReplyDelete
  12. Good sharing i have problem with my site ads not showing on . www.getsinto.com pages. but showing in post and not showing in pages. i need some help

    ReplyDelete
  13. This error will be show " Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0 " i have put google add in my website.

    ReplyDelete
  14. how much time we wait for the ads coming?

    ReplyDelete
  15. Hi.

    I use the script you gave for displaying ads after the Jump Break in Blogger. In that script if I use a Responsive ad unit, I see a blank but if I use a fixed size unit, the ad gets displayed. Any ideas?

    ReplyDelete
  16. Assalamu alaikum brother.. Yesterday I qualify for adsense and ads was showing for few hours only but not now... I don't do any thing in this regard.. I just registered myself on adsense and complete my profile.. Please tell me what should I do to get ads back on my blog

    ReplyDelete
  17. assalamu alaikum bhai... i just qualify for adsense and i search for some help... ads was showing on my blog for only few minutes...i thought everything is ok but now its blank.. i don't know much now...please help me to get ads back on my blog...i have a pretty good and famous blog.. please help

    ReplyDelete
  18. asa sab kuchh try kiya fir bhi nahi ho raha hai plz help me

    ReplyDelete
  19. Doesn't work.can you help me bro?
    Thank you.

    ReplyDelete
  20. I tired but it wasn't working on my blog. Please Help me out!

    ReplyDelete
  21. Hello, I did it same way as per your instruction but doesn't work for me !! help me out if you can..Thanks

    ReplyDelete
  22. Hello! Muhammad Mustafa Brother!Please Help, From Last 15 Days AdSense ads are not Showing on My Blog

    ReplyDelete
  23. Hello. I received an email from adsense 2 days ago saying that i am fully approved (after 2 disapproved application due to insufficient content). My ads are showing blank. I tried following your tutorial but it still shows blank. What will i do? thank you for the help, here's the link to my site www.thetravelersluggage.com

    ReplyDelete
  24. hello sir my ad sense not working my blog only show empty page show please ans me kindly

    ReplyDelete
  25. Hi, I followed the directions but still can't see ads. www.kaylagotthe411.com My ad sense account says hosted account. I just can't get the ads to show. I've tried everything. any suggestions?

    ReplyDelete
  26. blank ads,, can't my ads,, even in wordpress

    ReplyDelete
  27. I am using wordpress for website. and responsive ads are blank, any solution for websites ?

    ReplyDelete
  28. But ad not showing in my blog Please help to fix it

    ReplyDelete
  29. after trying above method also,it didn't seems to appear.my blog is technohackings.blogspot.com and i get adsense approve by youtube and it fine work before.Please help me bro

    ReplyDelete
  30. I tried above method even my adsense get aproved with a blog ,, but i have change domain name,, and can I use aproved adsense to another blog ?

    ReplyDelete
  31. My wordpress website blog is not displaying adsense ad , it shows blank

    ReplyDelete
  32. I want to know which one is better asynchronous ads code or responsive ads code as per the earning. I am running asynchronous ads code on one of my blog and responsive ads code on other, and as per my experience asynchronous earning is far more better than responsive. What's your opinion. I have implemented responsive code on my website: pnrstatusbuzz.in, just have a look for any suggestion.

    ReplyDelete
  33. I have followed the instructions above to no avail. If you have time, kindly check my site: www.vibebest.com there's a blank space on the upper right of the sidebar which I placed the code. I am completely lost about it.

    ReplyDelete
  34. dude still i have a blank space on my site plz check my site and say me the solution,damn god if u say me the solution i will pray u for hundreds of years

    ReplyDelete