Boost Adsense Earnings by Responsive Ad Size

Adsense ad sizes

Boost Adsense Earning by placing correct ad size ad on your webpage.

Responsive Ad Unit

Responsive ad size: Responsive ad size means that ad according to size of user’s display. If you place responsive ad size then it will more user friendly as well as boost your earning.

Higher CPC: Cost Per Click mean earning of per click. If you get high CPC then your overall earning will be higher. Responsive ads size will get higher CPC then ‘auto’ ad sizes.

Best Performing Ad sizes

For Mobile

Width Height Can placed at
300px 250px Above the fold
336px 280px In Post/Article
320px 100px above fold
320px 50 above fold

For Desktop/bigger screen

Width Height Can Place at
728px 90px In Article
970px 90px bottom or front display
468px 60px Below Menu
300px 600px Sidebar

How to Make an Ad Size Responsive ?

Now you’ve almost an idea that what size of ad to be placed and where to place. But the question here is. How to make an ad responsive for all screen?

Solution is here

<style>
/* for Mobile Scren ad size below */
.Techaak_responsive_1 { width: 320px; height: 100px; }
/* For Tabs Scren ad size below */
@media(min-width: 500px) { .Techaak_responsive_1 { width: 468px; height: 60px; } }
/* For Desktop/Laptop Scren ad size below */
@media(min-width: 750px) { .Techaak_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Techaak_responsive_1 -->
<ins class="adsbygoogle Techaak_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-4XXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Place above ad code by editing ‘red colored text’ by your values. and these changes are as

If your page have more than 1 ad unit then, in place of 1st ad it will be Techaak_responsive_1 and for 2nd it will be Techaak_responsive_2 and similarly for 3rd Techaak_responsive_3.

Please make sure that you place all data-ad-slot with differnt ad unit. So that you can check report for all unit placed.

For Blogger(Advance User)

Login to blogger, click on theme, and ‘edit HTML’ now find <style> and place your style code before </style>


.Techaak_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_1 { width: 728px; height: 90px; } }


.Techaak_responsive_2 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_2 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_2 { width: 728px; height: 90px; } }

WordPress(Advance User)

WP user can edit there stylesheet by Clicking on appearance and then Editor. Now agree/understand warning,(your own risk if you edited in wrong way.). Placed your style code at the end of stylesheet. code will be like this.


.Techaak_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_1 { width: 728px; height: 90px; } }


.Techaak_responsive_2 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_2 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_2 { width: 728px; height: 90px; } }

Tell us, how this article help you. Or if you face any error while placing ad please tell us.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.