如何使Adsense广告与响应式网站一起使用

时间:2013-01-19 22:14:59

标签: javascript jquery mobile responsive-design adsense

我环顾当前的解决方案,这两个帖子已经部分涵盖了这个问题; Making Adsense ResponsiveIn javascript 'If mobile phone'

我有一个响应迅速的网站,在手机上打破它的唯一因素就是我网页上的横向Google广告,因为它比其他所有内容更大,因此它首先会有额外的空间。

我正在寻找是否有人有一个可行的解决方案,所以我基本上可以在这个大横幅和较小的格式之间切换屏幕尺寸较小的移动浏览器并且不会破坏我的响应式网站。

我目前的解决方案是拉入屏幕尺寸,如果广告低于某个阈值,则会显示较小的广告。还有更好的方法吗?

8 个答案:

答案 0 :(得分:11)

您可以将此代码用于AdSense,而不是针对TOS,因为它不会“动态”更改广告,您只需根据屏幕尺寸投放广告,但不会更改广告本身。< / p>

<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>

这一个适用于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>');
}

答案 1 :(得分:1)

Google现已推出responsive ad units。您需要生成新的广告代码才能使用它们。

答案 2 :(得分:0)

这是AdSense的一个大问题。根据服务条款,您无法以编程方式刷新广告,这意味着如果您的广告在调整大小后需要广告,则无法加载其他广告。

话虽如此,Google DFP广告管理系统(支持加载AdSense广告)确实有a refresh method。我已阅读所有政策,您似乎可以将这种方法用于自己的广告,但不能在使用AdSense时使用。


修改:前几天刚与Google通了电话......他们确认在投放AdSense时使用DFP的刷新功能违反了他们的AdSense政策。刷新功能只能与您自己的广告一起使用,否则您可能会失去您所获得的帐户和资金。

答案 3 :(得分:0)

此工具顶部有一个免责声明,以确保Google对您使用它感到满意,但这将完全符合您的要求。

http://www.responsiveads.com/responsive-adsense/

来自blog

  

谷歌很可能会为此提出自己的解决方案   在不久的将来的某个时间,但同时发布者可以使用   我们的解决方案,使AdSense能够通过其网站获利   在所有屏幕上!

答案 4 :(得分:0)

我用简单的css完成了这个。

如果它不是flash对象,你可以让它调整大小。

如果是iframe,请将其宽度设为100%

根据加载的广告,它可能会切断部分图像,如果是这种情况,那么您将需要一些可以测量动画并相应地重新加载添加的javascript。

答案 5 :(得分:0)

您可以尝试我的小型自适应广告插件,Rad.js:)

http://github.com/mattnish/rad

答案 6 :(得分:0)

&#13;
&#13;
<style>
iframe{width:100%}
</style>
&#13;
&#13;
&#13;

并解决了所有问题,我在bootstrap网站和adsense上遇到了这个问题

答案 7 :(得分:0)

我认为这在2019年是不需要的,因为 Google Adsense 正式引入了太多新的广告格式,这些格式可以适应每个屏幕尺寸。

但是,当用户从不同屏幕尺寸浏览时,您可以使用一些Javascript代码来确定广告位置或何时显示或隐藏它们。