Adsense new policy allow publisher to only hide responsive Ads using CSS media queries. You can choose to control the display of your Ads 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:
Google has suggested itself the technique of using display:none on one of its support pageTechniques 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
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 firstYou 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; } }
</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>
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; } }
</style>
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!

No comments
Post a Comment