I looked around the current solutions, and this question has been partially covered in these two posts; Making Adsense Responsive and In javascript 'If mobile phone'
I have a site that is responsive and the only thing that breaks it on mobile phones is the horizontal Google Ad on my page, which makes it stick out at first with extra space since it's bigger than everything else.
I'm looking to see if anyone has a workable solution so I can basically switch between this big banner, and a smaller format for mobile browsers where the screen size is smaller and doesn't break my responsive site.
My current solution would be to pull in the screen size and show a smaller ad if it is below a certain threshold. Is there a better way?
With responsive display ads, you can upload your assets (images, headlines, logos, videos, and descriptions), and Google will automatically generate ad combinations for websites, apps, YouTube, and Gmail. Responsive display ads can be used in Display campaigns.
Add your site Sign in to your AdSense account. On the AdSense homepage, click Add site. Enter the URL of the site that you want to show ads on. If you use Blogger or YouTube (or another AdSense partner), you should sign up for AdSense via your account there as these products follow a different process.
You can use this code for AdSense, which is not against it TOS as it does not change the Ads "on the fly", you're just serving an Ad depending on the screen size but not changing the ad itself.
<script type="text/javascript">
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
google_ad_client = "ca-publisher-id";
if (width > 800) {
// Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
google_ad_slot = "ad-unit-1";
google_ad_width = 728;
google_ad_height = 90;
} else if ((width <= 800) && (width > 400)) {
// Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles)
google_ad_slot = "ad-unit-3";
google_ad_width = 468;
google_ad_height = 60;
} else {
// Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets)
google_ad_slot = "ad-unit-2";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
And this one for DFP:
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if (width >= 800) {
// Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
document.write('<div id="div-gpt-ad-1234567891234-1" style="width:728px; height:90px;"">');
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-1'); });
document.write('</div>');
} else if ((width < 800) && (width > 400)) {
// Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets)
document.write('<div id="div-gpt-ad-1234567891234-2" style="width:300px; height:250px;"">');
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-2'); });
document.write('</div>');
} else {
// Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles)
document.write('<div id="div-gpt-ad-1234567891234-3" style="width:468px; height:60px;"">');
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-3'); });
document.write('</div>');
}
Google have now introduced responsive ad units. You'll need to generate new ad code to use them.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With