You would know that responsiveness is now one of the main factors of Google for ranking a website in search results so you should be careful about the responsiveness of your website. For a responsive website, Google recommends to use responsive ad units so that ads will be clearly visible on different device sizes. But, do you know by making some changes in responsive ad unit, you can increase your revenue? Yes it’s true! Here I will discuss on the same and will let you know how to earn more out of responsive Adsense ad units.
So, get ready to play with the code of your Adsense responsive ad unit and increase your revenue. However, this task is dangerous so you should be very careful while using this trick.
You would be noticed that a responsive as unit shows mostly 468×60 banner on desktop devices and change the size and dimensions according to different device sizes. But, if you think that only horizontal or vertical ads perform well, you can restrict an ad unit to display only the horizontal or vertical ads.
Restrict a Responsive As Unit to Display Only Horizontal or Vertical Ads
Open your Adsense dashboard, click on My Ads and create a new ad unit by choosing Responsive ad size. After setting up the style and design of your ad unit, get the code to post on your website. The original code will be something like the following:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Name of Your Responsive Ad Unit -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-12345"
data-ad-slot="xxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The above mentioned code is the default code generated from your ad unit and it can display any kind of ads according to different sizes of different devices.
If you want to restrict your responsive ad unit to display only the horizontal ads, you will have to make a little change in the code. You only need to replace auto from rectangle in data-ad-format section to force it to display only rectangular ads. Similarly for vertical ads you can replace auto with vertical term.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Name of Your Responsive Ad Unit -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-12345"
data-ad-slot="xxxxx"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I also use this trick on my blog to serve horizontal ads on some of my pages. I hope this trick will help you increase your Adsense revenue.
But, honestly it’s not enough. Here’s one more thing that I would like to share with you all. For this, I heartily thanks to Mr. Amit Agrawal because he developed it and offering for absolutely free.
In the above trick, you got the control over the dimensions of the ads but not on the size of ads. But with the following trick you will have a extra control over the size of the ads. So, if you wish to force Adsense to serve ads of particular size on any specific device, following code (written by Amit Agrawal) will help you.
<div id="google-ads-1"></div>
<script type="text/javascript">
/* Calculate the width of available ad space */
ad = document.getElementById('google-ads-1');
if (ad.getBoundingClientRect().width) {
adWidth = ad.getBoundingClientRect().width; // for modern browsers
} else {
adWidth = ad.offsetWidth; // for old IE
}
/* Replace ca-pub-XXX with your AdSense Publisher ID */
google_ad_client = "ca-pub-XXX";
/* Replace 1234567890 with the AdSense Ad Slot ID */
google_ad_slot = "1234567890";
/* Do not change anything after this line */
if ( adWidth >= 728 )
google_ad_size = ["728", "90"]; /* Leaderboard 728x90 */
else if ( adWidth >= 468 )
google_ad_size = ["468", "60"]; /* Banner (468 x 60) */
else if ( adWidth >= 336 )
google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
else if ( adWidth >= 300 )
google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
else if ( adWidth >= 250 )
google_ad_size = ["250", "250"]; /* Square (250 x 250) */
else if ( adWidth >= 200 )
google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
else if ( adWidth >= 180 )
google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
else
google_ad_size = ["125", "125"]; /* Button (125 x 125) */
document.write (
'<ins class="adsbygoogle" style="display:inline-block;width:'
+ google_ad_size[0] + 'px;height:'
+ google_ad_size[1] + 'px" data-ad-client="'
+ google_ad_client + '" data-ad-slot="'
+ google_ad_slot + '"></ins>'
);
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
Before using the code, you need to go create a new ad unit or you can use your existing ad unit and keep the note of your publisher ID and ad unit ID and paste these values in the above code where I marked in red.
Finally, paste the above code on your web page or where you wanna display the ad and the most appropriate Adsense ad will be served based on the size of user’s device.
MUST READ: How to Manage Which Adsense Ads to Display
Moreover, if you want to include more than one responsive AdSense ad units on the same web page, just use the same snippet of code but change the DIV ID in lines 1 & 6, for example they should be google-ads-1, google-ads-2 and so on.
