How To Specify The Size of AdSense Responsive Units

Home » WordPress Tutorials » How To Specify The Size of AdSense Responsive Units
  • Specify The Size Of Adsense Responsive Units

How To Specify The Size of AdSense Responsive Units

AdSense is the most popular advertising program in the world. Run by Google, AdSense, allows a variety of publishers to monetize their website with advertisements.

AdSense supports response advertising units that are typically set to “auto.” This is where the advertisement sets its dimensions based on the size available and the max size of the container. This means if you have a 320 px space, the unit will load a 300 x 250 unit on a desktop and on mobile devices, a 320 x 100 unit.

The great thing about these advertisements is they make it easy to manage. You can just copy and paste. However, sometimes responsive units will not appear if the container does not have a max size declared. Or maybe you just want to specify the dimensions for advertisements to increase your earnings. Below, I am going to show you how to do that, in an AdSense compliant manner.

Specify The Size of Adsense Responsive Units, AdSense Compliant Method

<style>
.example_advertisement { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_advertisement { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_advertisement{ width: 728px; height: 90px; } }
@media(min-width: 1000px) { .example_advertisement{ width: 900px; height: 250px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle example_advertisement”
style=”display:inline-block”
data-ad-client=”ca-pub-XXXXXXXXXXXXX”
data-ad-slot=”XXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

What does this code do? The example_advertisement is the name of our unit <ins class=” “> (You need to keep the AdsbyGoogle, but if you have multiple units, you will need to change the example_advertisement.)

The CSS sets the dimensions of the advertisement unit based on screen size. If the device is over 1000 px, it loads a very large 900 x 250px banner. This is a high performing advertisement. If the device has a width greater than 800px, but less than 1000px, it will load a 728 x 90 advertisement. This is great for laptops and tablets that are in landscape. If the device is larger than 500px but smaller than 800px, the advertisement will be 468 x 60. This is mostly for tablets in portrait mode. Finally, anything smaller will be served a 320 x 100 unit. This is for your generic mobile devices.

This is just a short and sweet example of how the standard AdSense unit sizes can be adjusted. For example, you can specify larger ad units for larger devices as opposed to just unit stretching.  This is great for optimizing your advertisements for optimal performance and increasing advertising revenue.

By | 2018-05-17T09:15:36+00:00 May 16th, 2018|Categories: WordPress Tutorials|Tags: , , |0 Comments

About the Author:

Scott Hartley is a WordPress Developer who focuses on website performance optimization, SEO, and security. He can't tell you what a color wheel is but he knows the intricacies of making a website load quickly.

Leave A Comment