Adsense for Responsive Websites: Responsive Adsense Codes

Introduction: To responsive website owners: if you use Google Adsense on your responsive layout, you might want to check immediately whether your Adsense advertisements extrude outside your beautiful responsive website and devastate the layout. This article suggests a method to work around the problem – responsive Adsense code.

Google Adsense allows your to specify the width and length of Adsense advertisements for each slot and gives you the code you need to run the advertisements. However, since the width and length are fixed once the code is pasted, it does not work with responsive websites out of the box. You now have 3 options:

• use the beta Responsive code by Adsense which gives you very little control
• remove all Google Adsense advertisements
• only choose the smallest advertisements which doesn’t convert well

These will not only pose problems in the implementation of codes but also, most importantly, limit your ability to earn money with your website. Gratefully, we have a 3rd option:

• Responsive Adsense Code (proposed in this blog article)

Read below for the detailed implementation guide.

Responsive Adsense Code – A How-to Guide

Step 1 – Get Your Adsense ID

Instead of directly using the code generated by Adsense website, you will need to extract part of the data from the code first. Below is the code snippet I got when press the ‘Get Code‘ button for a Ad Unit. You will need to save the data in line 5 and 6 (highlighted in RED below).

Note: Always use the Asynchronous version which allows your contents to load faster!

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-4051186060553454"
data-ad-slot="8634490048"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Step 2 – Add the Responsive Adsense Code

Copy and paste the block of code below to the page you want the Google Adsense Ad Unit to appear. Replace the data highlighted in RED below with your own data. (Otherwise, I will get all your earning for this Adsense Ad Unit which you might want to thank me for this post : D).

<div id="google-ads-1"></div>
<script type="text/javascript">// 
/* Calculate the width of available ad space */
ad = document.getElementById('google-ads-1');

if (ad.getBoundingClientRect().width) {
adWidth = ad.getBoundingClientRect().width; // for modern browsers
} else {
adWidth = ad.offsetWidth; // for old IE
}

/* Replace ca-pub-4051186060553454 with your AdSense Publisher ID */
google_ad_client = "ca-pub-4051186060553454";

/* Replace 8634490048 with the AdSense Ad Slot ID */
google_ad_slot = "8634490048";

/* Do not change anything after this line */
if ( adWidth >= 728 )
google_ad_size = ["728", "90"]; /* Leaderboard 728x90 */
else if ( adWidth >= 468 )
google_ad_size = ["468", "60"]; /* Banner (468 x 60) */
else if ( adWidth >= 336 )
google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
else if ( adWidth >= 300 )
google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
else if ( adWidth >= 250 )
google_ad_size = ["250", "250"]; /* Square (250 x 250) */
else if ( adWidth >= 200 )
google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
else if ( adWidth >= 180 )
google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
else
google_ad_size = ["125", "125"]; /* Button (125 x 125) */

document.write (
'<ins class="adsbygoogle" style="display:inline-block;width:' + google_ad_size[0] + 'px;height:' + google_ad_size[1] + 'px" data-ad-client="' + google_ad_client + '" data-ad-slot="' + google_ad_slot + '"></ins>'
);

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>

Step 3 – Test the Responsive Adsense Ad

Test whether the code is installed properly by resizing and reloading the browser. You should be able to see different sizes of Adsense Ad Units for different browser width.

There is only one drawback for this method as you will not get a report on which size of the Adsense Ad Unit works best as all the response from this Adsense Ad Unit will be consolidated as one report only. The responsive Adsense code does pose an inconvenient if you would like to optimize your Adsense earning.