How to make adsense ads responsive per screen size?

Yes, we can get responsive ad codes from adsense. But that will not fulfill the requirement for ad unit size per screen size. To make the adsense ads responsive per screen size we need to modify the code (allowed by google obviously) a bit. Reasons we need to do this can be like, In desktop view the ad appear as leaderboard, but in mobile it becomes a 300x250 square, what you might not want as you might want to show a similar horizontal sized ad in that place even in mobile view.

So let's see how we can do that.



How to make adsense ads responsive per screen size?

1. By specifying the ad format:

Consider the following as your responsive ad code.

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

Here what you have to do is, you have to change the value of the attribute data-ad-format.

The value of data-ad-format can be
  1. horizontal: All ads will be horizontal such as 728x90, 970x90, 468x60, 320x100 etc. based on available space.
  2. rectangle: All ads will be rectangle such as 336x280, 350x250 etc. based on available space.
  3. vertical: All ads will be vertical such 300x600, 160x600 etc. base on available space.
  4. auto: This is default for responsive ad unit. 
Any combination of the above 3 will also work, such as, "horizontal, rectangle"

2. Exact ad unit size per screen width example:

You can use @media query in CSS to gain more control over the size of the ad unit. Consider the following as your responsive ad code.

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

Here, add a class to the </ins> tag along with the default adsbygoogle class, for example, siteTopAdCode and then style siteTopAdCode class in CSS as follows

@media (min-width: 320px) { .siteTopAdCode { width: 320px; height: 100px; margin: 0 auto; } }
@media (min-width: 468px) { .siteTopAdCode { width: 468px; height: 60px; margin: 0 auto; } }
@media (min-width: 728px) { .siteTopAdCode { width: 728px; height: 90px; margin: 0 auto; } }
@media (min-width: 970px) { .siteTopAdCode { width: 970px; height: 90px; margin: 0 auto; } }

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle siteTopAdCode "
     style="display:block"
     data-ad-client="ca-pub-XXXXXXX"
     data-ad-slot="XXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Please note carefully that we have added our class siteTopAdCode in the class attribute of the </ins> tag, as simply if you do not add the class, the styles will not be used on it.

Here our responsive ad unit will change with screen sizes as follows

  1. Screen bigger than 970px: Ad unit will be a 970x90 horizontal ad
  2. Screen bigger than 728px but smaller than 970px: Ad unit will be a 728x90 horizontal ad
  3. Screen bigger than 468px but smaller than 728px: Ad unit will be a 468x60 horizontal ad
  4. Screen bigger than 320px but smaller than 468px: Ad unit will be a 320x100 horizontal ad



Author: Tanmay Chakrabarty

Tanmay Chakrabarty is a former CSE student, currently working as a Senior Software Engineer with 5+ years of experience in the field of Web Application development in PHP+MySQL platform with strong skills in Javascript, JQuery, JQuery UI and CSS. He tries to write notes every week but fails due to heavy loads of duty.

Recommended Recommends

Comments

Contact Us