How to Make Google AdSense Responsive

With many people accessing websites from non-traditional desktop nowadays, it’s important to incorporate responsive design into your website. In the same way, Google AdSense can also be tweaked to adjust to the screen size of your visitors.

There are many approaches of how to make Google AdSense responsive without violating Google AdSense policies. The easiest thing to do is to let Google do everything by creating a new Responsive ad unit, however this is still in beta.

I like to use a different approach that’s based on JavaScript modification demonstrated by Amit Agarwal of Labnol.org. It’s confirmed that this modification was approved by Google so it does not violate AdSense policies.

If you review Amit’s alternative approach, the slight difference here is I’m using two ad units and whichever ad unit is picked is based on the set width (in this example it’s 530px) of a div container (“content”), not from the whole body.

<script type="text/javascript">
     <!-- CHECK DIV ID/CLASS NAME -->
     ad = document.getElementById('content');
     <!-- END CHECK DIV ID/CLASS NAME -->
     adWidth = ad.getBoundingClientRect().width ? ad.getBoundingClientRect().width : ad.offsetWidth;
     <!-- START EDIT HERE -->
     google_ad_client = "##your-google-ad-id##";
     adWidth < 530 ? google_ad_types = ["250", "250", "##ad-slot-1##"] : google_ad_types = ["300", "250", "##ad-slot-2##"];
     
     <!-- END EDIT HERE -->
    
     document.write('<ins class="adsbygoogle" style="width:'
          + google_ad_types[0] + 'px;height:' 
          + google_ad_types[1] + 'px" data-ad-client="'
          + google_ad_client + '" data-ad-slot="'
          + google_ad_types[2] + '"></ins>'
          );
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async 
     src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

This snippet was created to use ad unit with the size of 300×250 and 250×250. You need to change the parameters on the highlighted line. At the very least, you need to use your Ad Sense publisher id, and the slot id of both ad units.

The “content” ID attribute is based on Genesis Framework (with Genesis 2, this is true only if you still use the XHTML markup. If you use HTML5, refer to the post on how to add back the ID attribute). You can leave it unchanged if you use Genesis Themes, but it’s always safe to double check your element id name and change it accordingly.

Caveat

This solution does not auto-refresh. So if you access load the page on a tablet and rotate the orientation, the Google ads that’s served the first time the page load will stay until the next page refresh. But I don’t find this to be a major problem as visitors will still see the ads except maybe not with the correct sizing just for that page.

Further Reading

How to Use Google AdSense Ads on Responsive Websites
Google Approves Responsive AdSense Ads
How to Add ID Attribute in Genesis Main Content