Hide & Show Adsense Responsive ads Without Violating TOS in Different Positions

0 64

How to Reposition or Hide/Show Adsense Responsive Ads in Different Positions in Responsive to Screen Resolution
Hiding adsense ads are concidered as a policy violation by Google, Google limits maximum 3 display advertising per a page, so properly displaying ads responsive to screen size is an important factor.

Consider ADBlock White lisiting to View Pages of This Website Properly

Google & Most SEO companies recommends responsive websites, Google adsense also supports responsive ads which automatically shows a suitable ad according to available width, Hiding ads with “display: none;” or “visibility: hidden;” are considered policy violations by Google unless you’re implementing a responsive Adsense unit

Why reposition?
Because of sidebars or responsive elements
Usually in responsive designs on mobile view, sidebars are pushed to the bottom of content after the article, in that case displaying the ad displayed on sidebars in above/below/within article is a better idea like the following image

Repositioning Ads shown in Sidebars to Article
Repositioning Ads shown in Sidebars to Article

but configuring Responsive ads to show most famous ad sizes will boost your earnings, that was discussed in two article before consider reading them to optimize Adsense
Consider Reading: How to Customize Adsense Sync Ads Size (Responsive Synchronous Ad Size)
Consider Reading: How to Customize Google Adsense Async Responsive ADS Size

This article guides you in hiding adsense ads without violating Adsense Terms of policy

Hiding responsive asynchronous ads and synchronous ads require different kind of approch, as they are executed in different method of Javascript

Hiding Synchronous Responsive ads

I stumbed through web to find a method to hide synchronous adsense ads properly finally i made up my own method which works like charm

<script type="text/javascript">
function writeADS(){
document.write("<script  data-src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>");
}</script>

Add the above Javascript code to head section of HTML once, like the asynchronous adcodes writeADS function will be called when its required, When an adsense sync javascript is called it will definitely display an advertisement even if you don’t define a adslot or adclient ids; to skip this show_ads.js must be loaded conditionally, this is where wirteADS function comes in handy

Here is an example of Conditionally showing Synchronous adsense ads in responsive to screen width, Javascript checks if the screen width is Greaterthan or Equal to 728 if the condtions match it will show a Leaderboard ad (728×90) writeADS() function is called at the end if the condtions don’t match writeADS() function will not be executed, that is how the code below prevents your adsense codes violating adsense

xxxxx & yyyyy must be replaced with correct ad_client id and ad_slot id repectively

<script type="text/javascript">
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
google_ad_client = "ca-pub-xxxxx";
if (width >= 728 ) {
google_ad_slot = "yyyyy";
google_ad_width = 728;
google_ad_height = 90;
writeADS();
} 
</script>

Here is an example of showing Medium rectangle ads to screen widths below 500px

<script type="text/javascript">
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
google_ad_client = "ca-pub-xxxxx";
if (width < 500 ) {
google_ad_slot = "yyyyy";
google_ad_width = 300;
google_ad_height = 250;
writeADS();
} 
</script>

Hiding Asynchronous Responsive Ads

Asynchronous adcodes can be customized with CSS which has been previously explained in article How to Customize Google Adsense Async Responsive ADS Size

Asynchronous javascript must be included once in header to make asynchronous adsense codes work

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

Here is a basic example of hiding Responsive ads, which hides ads if screen size is lessthan 728px

<style type="text/css">
 .adslot { display:inline-block; }
 @media (max-width: 728px) { .adslot { display: none; } }
 @media (min-width:800px) { .adslot { width: 468px; height: 60px; } }
 @media (min-width:1024px) { .adslot { width: 728px; height: 90px; } }
 </style>
 <ins class="adsbygoogle adslot"
 data-ad-client="ca-pub-xxxxx"
 data-ad-slot="yyyyy"></ins>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

incase if you want to show ads only if screen size is less than 800px, this comes in handy when you want to show rectangle ads to smaller screen widths

 <style type="text/css">
 .adslot { display:inline-block; }
 @media (max-width: 800px) { .adslot { width: 300px; height: 250px; } }
 </style>
 <ins class="adsbygoogle adslot"
 data-ad-client="ca-pub-xxxxx"
 data-ad-slot="yyyyy"></ins>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Alternatively the CSS can be tweaked to show ads to screen size greater of equal to a defined width example 800px; below is an example of showing leaderboard to minimum screen width of 800px

 <style type="text/css">
 .adslot { display:inline-block; }
 @media (min-width: 800px) { .adslot { width: 728px; height: 90px; } }
 </style>
 <ins class="adsbygoogle adslot"
 data-ad-client="ca-pub-xxxxx"
 data-ad-slot="yyyyy"></ins>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

When using Synchronous adcodes, ad slots must be replaced for every ad sizes that you want to use but in responsive ads same ad slot can be used and it can be customized to show in different locations with CSS Media queries
To understand it perfectly let assume you are showing a 728×90 ad at the bottom of your articles for desktops but if you want to show the same ad before the article for Mobile devices this trick comes in handy

This Javascript goes in bottom of article, which shows 728×90 ad for screen widths greater or equal to 800px screen widths

 <style type="text/css">
 .articlebottom { display:inline-block; }
 @media (min-width: 800px) { .articlebottom { width: 728px; height: 90px; } }
 </style>
 <ins class="adsbygoogle articlebottom"
 data-ad-client="ca-pub-XXXXX"
 data-ad-slot="YYYYY"></ins>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

This Javascript goes in beginning of article, which shows 300×250 ad for screen widths lessthan 800px screen widths

 <style type="text/css">
 .articletop { display:inline-block; }
 @media (max-width: 800px) { .articletop { width: 300px; height: 250px; } }
 </style>
 <ins class="adsbygoogle articletop"
 data-ad-client="ca-pub-XXXXX"
 data-ad-slot="YYYYY"></ins>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

You don’t have to change the ad slot here but the css class has been changed note that, that is an important factor when using same ad slot but displaying ad on different positions in responsive to screen width

Hiding Asnchronous non responsive adcode in compliance to adsense TOS will be updated in this same article soon

Leave A Reply