Proper way to hide Google AdSense ad on Your Website

hide Google AdSense ad

Responsive ad units provide great ad experience by supporting multiple screen devices – desktops, tablets and mobiles. They automatically adapt to the users screen size regardless of the device the user is using to browse your site. Responsive ad’s are meant to work with responsive web design but they also work with non-responsive sites.

Sometimes, to provide a better user experience for mobile and tablet users you may want to hide the responsive ad unit completely. Today we will share with you a simple official Google trick based on CSS display property that you can use to hide Google AdSense ad units.

Hide Google AdSense ad

If you check the Google AdSense ad implementation policies, you will find that hiding ad is not permitted unless you are using a responsive ad unit. So, if you are planning to hide your ad then first you need to start using responsive ad units.

We hide responsive AdSense ad’s using CSS 3 media queries on the ad unit itself. This tells Google not to make any ad request so the ad won’t be displayed. Hiding the parent element instead of the actual ad will still force Google to download and render the ad but it won’t be visible to the user. This is against AdSense policies.

Here we are using an official Google example showing how to hide Google AdSense ads. The trick is to use a class to set the CSS  display property value to none when screen resolution hits a certain breakpoint and using that class on the ad unit itself.

<style type="text/css">
	.adslot_1 {
		display:inline-block; width: 320px; height: 50px;
	}
	
	@media (max-width: 400px) {
		.adslot_1 { display: none;
		}
	}
</style>

<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>

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

<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The above example will hide all Google AdSense ad units which have the class adslot_1 when the screen resolution is 400px or below.

Create WordPress Theme From Scratch

Next Article

Create WordPress theme from scratch – Part 9 – Comments Template

Tapas Pal

Tapas pal is the founder of layerpoint.com and he is an avid Internet geek enthusiast and writer has deep interest in technology, Digital Marketing and love tools that increase human productivity.