--> How To Safely Hide AdSense Ads using "Display:none" ? | Experience Lab - Online business creation and development guide for bloggers and startups

How To Safely Hide AdSense Ads using "Display:none" ?

AdSense new policy allows publishers to only hide Responsive Ads using CSS media queries. You can choose to control the display of your Ad v...

hide Adsense ads using "display none"AdSense new policy allows publishers to only hide Responsive Ads using CSS media queries. You can choose to control the display of your Ad visibility on different mobile devices. You can now choose when to show or hide an ad unit. All these is now possible thanks to the Responsive Ad units. We recently shared a tutorial on how to create responsive ad spots and how to stop AdSense from serving blank space on Responsive ad units by fixing the blank space error. Today we will take a step ahead and share the trick of hiding AdSense Ads  on any screen size you want using simply CSS "Display:none" property.  Note that Google only allows you to hide the content using the CSS property of display and it does not yet allow using "visibility:hidden" property so we will only follow techniques which goes in accordance with AdSense Program policies. Sites which are hiding the AD code using "visibility hidden" are surely not following recommended methods and pose a serious thread to your accounts so always follow authentic methods to manage your monetization strategies.

In this tutorial we will share how you can set a parameter with CSS media queries for smaller mobile devices so that no ad request is made and no ad is shown. We have applied it on our blog and have set ads not to display on small screens.

Isn't it illegal To Hide AdSense Ads?

Yes it is but only for synchronous ads but not for asynchronous which is the new code AdSense creates to render responsive ads on your blogger blog or website.

The official support site of Google says that it allows publishers to modify the Ad by hiding it using CSS3 Media queries for responsive Ad units (asynchronous) only but it disallows it for synchronous ads. Here is the block quote for verification:

Techniques to avoid

Here are some techniques you’ll want to avoid:

  • Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit.
  • Implementing AdSense ad code in a way that covers content
  • Using any means to force the display of more than three AdSense ad units on a page
  • Manipulating the ad targeting using hidden keywords, IFRAMEs, or any other method
  • Distributing ads in emails or software
  • Floating ads or units that slide to attract unwarranted attention

Google has suggested itself the technique of using display:none on one of its support page

If you want to only show ads for certain screen sizes you can use CSS to accomplish this. The following example shows you how to modify your ad code to use CSS3 media queries to hide ads for specific screen sizes..

Now when we have learnt that the method of using CSS display:none is completely Safe, allowed and legal, we can then proceed towards our tutorial.

Hide AdSense Responsive ADs

I assume that you have read our tutorial on creating responsive ad units, if not kindly read it first

You just need to make a slight modification to the CSS code of your ad code and mention on which Screen Size would you like to hide displaying ads. All code is same that we shared earlier except the yellow highlighted section

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

@media (max-width:99px) { .adslot_1 { display:none; } }

@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; } }


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
(adsbygoogle = window.adsbygoogle || []).push({});


The above code has no changes except the yellow highlighted section where I have set ads not to display for screen sizes less than 99px. For sizes greater than 99px, ads will display normally. I have chosen 99px because normally all smart phones today have a wider screen size and day by day screen sizes are getting bigger except for some old sets which have an extremely small size and it makes no sense displaying ads on smaller screen sizes.

Hiding them will block the ad from rendering and loading. The JavaScript will not load this time unlike in synchronous where the JS still loads despite setting display:none. This is one extra benefit of using async codes. So you are not actually setting Ads to not show or disappear you are actually telling AdSense not to load Ads for a specific screen size.

You can also set a custom width to hide ads on a specific screen size. Suppose you wish to Hide ADs on a screen size between 250px but wish to display it for other screen sizes  so you will edit the code as shown below

PS: I am just sharing the CSS code here for simplicity:

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

@media (min-width:100px) { .adslot_1 { width:125px; height:125px; display:block; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; display:block; } }
@media (min-width:200px) { .adslot_1 { width:200px; height:200px; display:block; } }
@media (max-width:250px) { .adslot_1 { display:none; } }
@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; } }


The code above will hide ads for a screen size 250px or less than 250px but will show ads for 200px, 180px and 100px or for screen sizes greater than 250px.

Note that we are using max-width to hide ads and not min-width condition. This is important because Ads are hidden and no AD request is made only when you use the max-width condition.

That's it!

Need Help?

Hope this tutorial may help you understand how to better control the display of Ads on your web pages. I am open for as many questions as you may wish to ask. Feel free to post your queries in the comment box below.

Peace and blessings buddies! =)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: How To Safely Hide AdSense Ads using "Display:none" ?
How To Safely Hide AdSense Ads using "Display:none" ?
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy