Skip to main content

How to Use Google AdSense Ads on your Responsive Website

Responsive web design is a simple technique that makes your website look good across all screen sizes – be it the mobile phone, tablets, desktop computer or even the large-screen TV.
Google has also officially recommended that website owners use the responsive design approach instead of maintaining separate mobile and desktop website as responsive design “keeps your desktop and mobile content on a single URL.”
Responsive Google AdSense Ads

Responsive Google AdSense Ads

If you been using Google AdSense Ads on your responsive website, you may have noticed that, unlike your content, Google AdSense ads have a fixed width and they will not shrink or expand based on the screen size of the visitor.
For instance, if you are using the standard 728×90 leaderboard unit on your website, the ad unit may extend well beyond the screen if someone is viewing your website on a mobile phone that can only accomodate 320 pixels.
Google AdSense Ads aren’t responsive by default but there’s a simple JavaScript based workaround that will make your Google Ads respond to the screen size. Best of all, the Google AdSense team has officially approved our Responsive Ads technique.
Before we dive into the code, please take a look at this demo page.

Ads by Google Find Your Publisher UK www.FindYourPublisher.co.uk
We'll Get You Recommended to Book Publishers. Simple 3 Step Process!
The demo has exactly one AdSense unit above the fold but the size of the unit will vary depening on visitor’s screen. If you are viewing the demo on a widescreen, you’ll see a leaderboard ad while a mobile user will see a medium rectangle or even a 180×90 link unit depending on the screen resolution.

Making Google AdSense Ads Responsive with JavaScript




  1.  


  2. id="google-ads-1">



  3.  




To get started, create multiple ad units (say 768×90, 468×60 and 300×250) inside your AdSense dashbaord and replace the relevant google_ad_client (ca-pub-1234) and google_ad_slot (AAA, BBB, etc.) identifiers in the code with your own values.
Next, copy-paste the above snippet anywhere on your web page and, based on the size (resolution) of the user’s device, the most appropriate AdSense Ad format will get served automatically. If you wish to include multiple AdSense ad units on the same responsive website, just use the same snippet of code but increment the ID (line #4 & line #8) such that they read google-ads-1, google-ads-2 and so on.

What’s New?

I wrote the first version in August 2012 and the updated code includes several enhancements:
  • The previous version used window.innerWidth and window.clientWidth properties to calculate the screen width but there were compatibility issues with older browsers. We are now using offsetWidth to compute the available width for ads which is even more reliable.
  • You can now configure JavaScript to not display AdSense ads on very small screens. This is done by not specifying a valid google_ad_slot and setting the display property of the ad unit to “none” so that there’s no blank space anywhere.
  • It is now easier to include multiple responsive ad units on single web page.
While it is always a good idea to confirm with your account manager, this technique isn’t against AdSense TOS as we aren’t resizing the ads or modifying the JavaScript code – we are just serving a different ad unit based on the visitor’s browser size.
AdSense publishers routinely perform split A/B testing to determine which colors schemes and banners sizes perform the best on their website – this is a similar technique.
Also see: Google AdSense Sandbox
Update: The previous version of the AdSense snippet was hiding Google ads when the screen size was 200 pixels or less. This change wasn’t approved by the AdSense team in Germany and therefore we now display the smaller link units on smaller screen instead of hiding the ad.

Popular posts from this blog

how to share all group facebook one click and very easy

Facebook Starts Letting Teens Post Publicly

Like a cautious parent,Facebook is giving teen users new freedom despite risks. For the first time, users under 18 can post publicly. The logic is that other sites don’t restrict kids, teens are getting more web savvy, and young celebrities want a voice. This could let minors publicly share things they’ll regret, so they must manually opt in to public sharing and confirm they understand the risks. Somewhat disingenuously, Facebook frames its blog post about the change as being about adding more protection for teens. It starts off saying that now when people age 13 to 17 sign up, their posts to the News Feed are defaulted to “friends only” instead of “friends of friends (fof)” as they were before. That is important because many people don’t change their default settings, and if you have thousands of friends with thousands of friends, the fof setting would share your posts to more than a million people. But considering there are 1.15 billion people on Facebook already, and its growth has…

Instagram surges past 700M users, fueled by algorithmic feed

Instagram has gone through a whirlwind of changes the past few months. Between bookmarks, likable comments, live video, tags, zoom, drafts, Stories and of course the controversial algorithmic feed – no one can argue that the Facebook-owned photo sharing app hasn’t been innovating at a rapid pace. But the real question is what effect are these product enhancements having on the bottom line – which in the case of Instagram is measured in user growth. And the answers seems to be that it’s working. The app just announced that they have grown to over 600 million monthly active users. This is almost 10% of the world population – and 100 million more than the company had 6 months ago when they announced a milestone of 500M monthly actives. As a comparison, it took about 9 months to get from 400M to 500M monthly actives – so their growth is still accelerating, even with such a large user base.
While the growth over the past 6 months was still broad-based, the company noted that they were doing p…