-->
Responsive Design aims at providing a great user experience for the websites, no matter which device is used to browse. The layout of the pages will adapt or change according to the screen. This kind of design is gaining momentum since a good share of the internet users are now using non-PC devices and this rate is expected to be increased further in the future.
The default AdSense ad code generated from the AdSense account is not "responsive" and will not adapt to the device. This also means, the AdSense Ads may come in
the way, while the rest of your site adapts according to the device used.
In order to provide a better user experience, you may modify the AdSense Ad code and use some simple Javascript to adapt the Ads according to the screen size.
Here is some sample code provided in an official AdSense blog, which shows modification to AdSense code for Responsive web design.
<script type="text/javascript">
if (window.innerWidth >= 800)
{
google_ad_slot = "xxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
}
else if (window.innerWidth >= 468)
{
google_ad_slot = "zzzzzzzz";
google_ad_width = 468;
google_ad_height = 60;
Else
{
google_ad_slot = "yyyyyyyy";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type = "text/javascript"
src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Fill your's own adsense slot code in the yellow shaded area.
Even though Google AdSense policies do not allow modification to the AdSense code generated from the AdSense account, this change was given an exception according to the blog I mentioned above. You are welcome to try the above changes in your website and provide a better user experience for your website in different devices.
 |
| Responsive Adsense Code |
The default AdSense ad code generated from the AdSense account is not "responsive" and will not adapt to the device. This also means, the AdSense Ads may come in
the way, while the rest of your site adapts according to the device used.
In order to provide a better user experience, you may modify the AdSense Ad code and use some simple Javascript to adapt the Ads according to the screen size.
Here is some sample code provided in an official AdSense blog, which shows modification to AdSense code for Responsive web design.
<script type="text/javascript">
if (window.innerWidth >= 800)
{
google_ad_slot = "xxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
}
else if (window.innerWidth >= 468)
{
google_ad_slot = "zzzzzzzz";
google_ad_width = 468;
google_ad_height = 60;
Else
{
google_ad_slot = "yyyyyyyy";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type = "text/javascript"
src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Fill your's own adsense slot code in the yellow shaded area.
Even though Google AdSense policies do not allow modification to the AdSense code generated from the AdSense account, this change was given an exception according to the blog I mentioned above. You are welcome to try the above changes in your website and provide a better user experience for your website in different devices.
