How to Add custom size Adsense Ads to Boost Earnings

Love blogging? And using Google Adsense ads to make money with blogging. But in recent times, Google made many changes in its policies regarding the website and Adsense. These days the responsive ad unit is causing many issues like it can take as much size as it likes to that cause shift the content from its place. In this article, we’ll discuss how to customize Adsense ads to resolve all these issues perfectly.

Boost Adsense Earnings by placing ads size accordingly to screen size, Responsive ads.

Boost Adsense Earnings by placing the correct ad size ad on your webpage.

Responsive ad size: Responsive ad size means that the ad is according to the size of the device display. If you place-responsive ad size, then it will be more user-friendly as well as boost your earning.

Higher CPC: Cost Per Click means average earning earned by one click. If you get a high CPC, then your overall earning will be higher. Responsive ads size will get higher CPC than ‘auto’ ad sizes.

How to Make an Ad Size Responsive?

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

<style>
.sn_responsive_1 { width: 320px; height: 250px;}
@media(min-width:500px) {.sn_responsive_1 {width: 336px; height: 280px;}}
@media(min-width:1100px) {.sn_responsive_1 {width: 728px;height: 90px;}}
</style>

<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<ins class="adsbygoogle sn_responsive_1" style="display:inline-block" data-ad-client="ca-pub-XXXXXXXXXXX" data-ad-slot="XXXXXX"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

If your pages have more than 1 ad unit, then, in place of 1st ad, it will be sn_responsive_1, and for 2nd, it will be sn_responsive_2, and similarly for 3rd sn_responsive_3.

Please make sure that you place all data-ad-slot with the different ad units. So that you can check the report for all units placed.

Best Performing Ad sizes For Mobile

• 300×250 – medium rectangle,
• 336×280 – large rectangle,
• 300×50 – mobile banner.

For Desktop/bigger screen

• 728×90 – leaderboard,
• 300×250 – medium rectangle,
• 336×280 – large rectangle,
• 970×90 – large leaderboard.

These are the size of the most popular ad the companies use for their advertisement. You can make the Adsense ads responsive according to the screen size, or you can also use other AdSense ad sizes as per your needs.

How to add the above code to my website?

You can change to exiting ad unit code with the above code provided. Then, change the red color value with your own values, publish the changes, and done!

If you want to add more than one size to the different ad units, you can add multiple styles as provided below. You have to change the blue color class values.

You can use this method for Blogger, WordPress, and other content management systems.

<style>
  .sn_responsive_1 { width: 320px; height: 250px; }
  @media(min-width: 500px) { .sn_responsive_1 { width: 468px; height: 60px; } }
  @media(min-width: 1100px) { .sn_responsive_1 { width: 728px; height: 90px; } }
 .sn_responsive_2 { width: 320px; height: 100px; }
@media(min-width: 500px) { .sn_responsive_2 { width: 468px; height: 60px; } }@media(min-width: 1100px) { .sn_responsive_2 { width: 728px; height: 90px; } }

</style>

The ad sizes usually have high CPC than the other sizes. That means you can see an increase in the Adsense earnings over time. Additionally, you can read our article on Boost Google Adsense Adsense Earnings.

Customized Responsive Adsense Ads Reduce Cumulative Layout Shift score.

Cumulative layout shift is part of core web vitals and crucial for SEO from mid-June 2021. It is calculated as the shift in the layout of the website. For example, AdSense ads cause a huge shift when we use an auto-responsive ad unit.

When you customize the Adsense ads, it reserves a place for it, and the content does not shift due to the size of the auto-generated ad. That means, with the help of the above code, you can use the Adsense ads above the fold section of the webpage.

FAQ Related to Responsive Adsense Ads

• Modification in Adsense Ads code is not allowed and violation of Google Polices. So why do I make such modifications?
  • Not a violation. We always try to provide the best official methods available to make any changes. Read this Google Article.

I hope you liked our article on creating Responsive Adsense Ads. In case of any doubt, query or suggestion, please comment in the comment section provided below.