Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Adsense ads work with responsive website

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?

like image 926
Nicko Avatar asked Jan 19 '13 22:01

Nicko


People also ask

Can responsive display ads be uploaded?

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.

Can I use Google ads with AdSense on my website?

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.


2 Answers

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>');
}

like image 138
Gustavo A. Valverde Avatar answered Nov 15 '22 13:11

Gustavo A. Valverde


Google have now introduced responsive ad units. You'll need to generate new ad code to use them.

like image 37
James Avatar answered Nov 15 '22 14:11

James