IT Nota

  • Home
  • How To
  • .NET
  • WordPress
  • Contact
You are here: Home / Internet / How to Make Google AdSense Responsive

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.

Google AdSense Responsive Ad Unit (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

March 15, 2014 Filed Under: Internet Tagged With: AdSense, Google

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffee Support this site
Buy Me a Coffee?

Categories

  • .NET
  • Coding
  • Cybersecurity
  • Database
  • How To
  • Internet
  • Multimedia
  • Photography
  • Programming
  • Resources
  • Review
  • Tips and Tricks
  • Use Case
  • WordPress
  • Writing

Recent Posts

  • How to Check Installed .NET Framework Version
  • How to Remove .NET Runtime and SDK on Mac
  • How to Solve Intermittent 403 Error in IIS
  • How to Show Hidden Folders and Files in Mac Finder
  • How to Solve MS Office VBA Compile Error UserAuthentication

Recent Posts

  • How to Check Installed .NET Framework Version
  • How to Remove .NET Runtime and SDK on Mac
  • How to Solve Intermittent 403 Error in IIS
  • How to Show Hidden Folders and Files in Mac Finder
  • How to Solve MS Office VBA Compile Error UserAuthentication
  • RSS

Tags

.NET Access AdSense ASP.NET Cdonts Dll Classic ASP Code Editor ETL FSharp Genesis Framework Git Google HP Asset Manager HTML HTML5 Hugo IIS Information Security Internet Internet Information Services iOS JAMStack Linux macOS Microsoft Microsoft SQL Server MVC PHP Python Simple Mail Transfer Protocol Smtp Server Social Media SQL SQL Server SSIS SSMS SSRS Sublime Text Visual Studio Visual Studio Code VPN Windows Windows 8 Windows 10 Windows Server

Copyright © 2011-2022 IT Nota. All rights reserved. Terms of Use | Privacy Policy | Disclosure