How To Create Flexible Adsense Ads For Responsive Websites & Blogs !
We all know Google Adsense is best Advertisement network with having a lot of Ads format. We are free to choose any type of Adsense Ads that fits our website’s theme. We can choose Larger Ads size like 728 x 90, 160 x 600 or medium Ad formats like 336 x 280, 300 x 250 or smaller Ads units.
This Google Advertisement Network also lets you to choose among Image & Flash Ads, Image Ads or simple Text Ads. So you are having full freedom to choose your ads and in this large varieties of different types of Ads size, you will find your suitable Ad Unit whether it is about size of type.
But, The main problem comes with responsive websites. If you don’t know what is responsive website, let me tell, these are those websites or blogs which are having flexible theme.
It means whether you open the website from Desktop, Tablet or from any of your smartphone, the website’s theme is designed very wisely to fit perfectly on your browser’s screen. As these websites automatically manages their elements, images & content to fit on browser’s website so these are the best.

You don’t need to have a separate sub-domain or theme to run your Mobile version websites. This website, TechGYD is having responsive theme. Change your browser’s size and see how wisely my theme manages its content to fit on that size.
You don’t need to have a separate sub-domain or theme to run your Mobile version websites. This website, TechGYD is having responsive theme. Change your browser’s size and see how wisely my theme manages its content to fit on that size.
BLOGGING : Boost Adsense Ads CTR by using Section Targeting
But, Adsense ads are not flexible so they can’t change their size according to visitors’ browser. Lets say, you put an 728 x 90 Adsense Ad at the header. If you browse your website from Mobile, you will see the the theme is still responsive, managing its elements according to the screen size but that 728 x 90 Adsense ad is as is it.
Means, that Ad is going outside you webpage, making it look ugly. Responsive website face this type problem normally with there 728 x 90, 160 x 600, 300 x 600, 336 x 280 Adsense Ad sizes . It makes user to identify that these are ads so they will try to avoid clicking on ads. So you will not get expected CTR.
The best way is to use Flexible Ads. I know, Google Adsense don’t provide flexible or responsive ads. So, here is a simple code modification by which you can make your Adsense Ad Responsive without violating Adsense’s policy.
Use this code :
<script type=”text/javascript”>// <![CDATA[<br />
google_ad_client = "adsense-publisher-id";<br />
if (window.innerWidth >= 800) {<br />
google_ad_slot = "google-ad-slot";<br />
google_ad_width = 728;<br />
google_ad_height = 90;<br />
} else if (window.innerWidth < 400) {<br />
google_ad_slot = "google-ad-slot";<br />
google_ad_width = 300;<br />
google_ad_height = 250;<br />
} else {<br />
google_ad_slot = "google-ad-slot";<br />
google_ad_width = 468;<br />
google_ad_height = 60;<br />
}<br />
// ]]></script><br />
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>// <![CDATA[</p>
<p>// ]]></script>
Replace adsense-publisher-id with your original publisher ID, something like pub-xxxxxxxxxxxxxxxx and google-ad-slot with your Adsense Ad unit’s slot number for corresponding Ad sizes. You Done 
Explanation of Code
The code is using simple if/else condition statement which checks if the condition (which is set as per user’s browser screen size using window.innerWidth) satisfied, the Adsense code available for that statement will be served.
You can check its functioning instantly after implementing code. However, you might need to refresh your browser’s window after changing your screen’s size
.
.
No comments:
Post a Comment