Skip to main content

How to Hide AdSense Ads on your Website

By
Google AdSense supports Responsive Ads which means that the size of AdSense ads on your website will automatically change based on the visitor’s device. Thus, if they are viewing your pages on a desktop computer, they may be served the bigger 728×90 leaderboard while the same ad unit may serve a smaller 468×60 banner to visitors who are on a tablet.
There’s no need to change the code as the AdSense script smartly detects the browser’s width and serves the right size accordingly.
Now consider a slightly different scenario where, instead of showing a smaller sized ad, you would like to completely hide the AdSense ad if the screen width is less than ‘n’ pixels. For instance, you may have a 160×600 px Skyscraper unit in your website’s sidebar but it should be displayed only when the site is being viewed on a desktop computer and not on a mobile phone.
There are two ways to achieve this. You can either write a CSS media query that will completely hide the sidebar on a mobile phone and thus the included AdSense ad will also be hidden from the visitor. This will however be against AdSense program policies because the AdSense ad will still be rendered on the visitor’s screen though hidden from view.

How to Hide AdSense Ads with CSS Media Queries

What we therefore need is a mechanism where the the AdSense ad is itself ‘blocked’ from rendering on a small screen. This is also possible with CSS media queries but the big difference is that we need to apply the CSS rules to the ad element and not the parent container (which in our case is the sidebar). Let me explain:
What you see above is a standard AdSense code snippet that will render a 160×600 pixels ad unit. The size (height and width) of the ad is specified as an inline style.
If you copy-paste the above ad unit as is into your website, it will always download and render the ad irrespective of the visitor’s screen size. If you however need to prevent the AdSense ad from showing on small screens, we need to make a few “officially permitted” changes to the default code.
The modified code will look something like this:
Hide AdSense Ads
If you carefully notice the two snippets, you’ll find that we’ve added a new classsidebar_ads (you can give it any name) to the default AdSense snippet. Next we’ve added a media query that will hide all elements of this class if the screen width is less than 480 pixels. That’t it.
With this approach, no ad requests is made to the Google server and thus no ad is shown to the visitor. The ad area will be hidden and the content below will get pushed up leaving no whitespace, just as you’d like it to be.

Comments

Post a Comment

Popular posts from this blog

How to Secure Your Wireless (Wi-Fi) Home Network

By
Wireless Networking (Wi-Fi) has made it so easy for anyone to use Internet on your computer, mobile phones, tablets and other wireless devices anywhere in the house without the clutter of cables. With traditional wired networks, it is extremely difficult for someone to steal your bandwidth but the big problem with wireless signals is that others can access the Internet using your broadband connection even while they are in a neighboring building or sitting in a car that’s parked outside your apartment. This practice, also known as piggybacking, is bad for three reasons: It will increase your monthly Internet bill especially when you have to pay per byte of data transfer. It will decrease your Internet access speed since you are now sharing the same internet connection with other users. It can create a security hazard* as others may hack your computers and access your personal files through your own wireless network. [*] What do the bad guys use  – There ha...
Post a Comment
Read more

Twitter Guide: How To Do Everything With Twitter

By
The first tweet was published almost 8 years ago and Twitter has come a long way since then. There’s a whole ecosystem of apps and services available now that allow us to use Twitter in more ways than ever before. This guide curates the best tools that will help you get the most out of Twitter. 1.  Nuzzel  – This works as an intelligent filter for Twitter and helps you discover the most popular news stories shared across your Twitter network. All signal, no noise. 2.  Flipboard  – Connect your Twitter account to Flipboard and it will create a beautiful magazine for all your Twitter feeds that you can flip through on the web (example), mobile and Windows 10 devices. 3.  LifeOnTwitter  – Get interesting statistics and facts about your Twitter account (example). 4.  TallTweets  – It lets you send tweets of any length by slicing your long tweet into multiple 140-character tweets (sample) and sending them ...
Post a Comment
Read more

Make International Phone Calls from your Mobile even without the Internet

By Anonymous
While apps like Skype or Viber let you make cheap (or even free) international phone calls, you need to connected to WiFi for these apps to work. Meet an alternate that offers similar features but needs no Internet. H o w do you make international calls from your mobile phone? Mobile carriers often charge exorbitant rates for international phone calls but you can Internet based services like Skype or Google Hangouts and call any landline or cell phone number in the world for a low per minute fee. All you need is a mobile phone connected to a Wi-Fi hotspot and some credit balance in your account for making the phone call. You can use these VoIP apps when travelling overseas as well and make significant savings for both domestic and international calls. Now consider a scenario where you have a mobile phone but there’s no Wi-Fi around and the 3G/4G services are either slow or unavailable. Would you still be able to place calls through any of these apps? The answer is obviously in ...
Post a Comment
Read more