使用JavaScript在不同设备上提供不同的广告尺寸

时间:2013-02-03 14:59:37

标签: javascript viewport ads adsense

子问题是相互关联的,所以为了清楚起见,我会把它们放在一起。

问题 - 1:根据设备的浏览器/视口宽度加载不同的AdSense广告尺寸/格式,使用JavaScript,这是一个好主意吗?

我不会问谷歌的TOS或其他政策是否合适。我照顾好了他们。

我想知道的是,使用JavaScript执行此操作有什么缺点吗?我的意思是,它会不会影响Adsense提供的广告质量?或者没关系?

问题 - 2:有更好的方法吗?

  • (2a)我找到了两个不同的代码段来实现我的需求。我不知道哪一个更可靠或更好。

    This

    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-3658299045266116";
    /* top */
    if ($(window).width()<728 ){
         google_ad_slot = "4414183254";
         google_ad_width = 320;
         google_ad_height = 50;
    }else{
         google_ad_slot = "1020377061";
         google_ad_width = 728;
         google_ad_height = 90;
    }
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    

    Someone says“你不能依赖窗口宽度,因为它不稳定。例如,在一些Androids上你完全不能依赖它,因为它需要长达500毫秒的浏览器才能拥有它的宽度。“这是真的,应该是一个问题吗?

  • (2b)this

    <script type="text/javascript">
        google_ad_client = "ca-publisher-id";
        if (window.innerWidth >= 800) {
            google_ad_slot = "ad-unit-1";
            google_ad_width = 728;
            google_ad_height = 60;
        } else if (window.innerWidth < 400) {
            google_ad_slot = "ad-unit-2";
            google_ad_width = 300;
            google_ad_height = 250;
        } else {
            google_ad_slot = "ad-unit-3";
            google_ad_width = 468;
            google_ad_height = 60;
        }
    </script>
    <script type="text/javascript" 
     src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    

    再次,somebody else says,_“您的解决方案很棒,但可以在旧版IE中破解。最好是使用jQuery查询浏览器宽度:width = $(window).width();”但我不能使用它由于 2(a)的代码段中提到的原因。

那么,什么是做我需要的好方法? document.documentElement.clientWidth?但是,在桌面或移动设备上缩放页面时,它的行为是什么?

1 个答案:

答案 0 :(得分:2)

我们走了:

<script type="text/javascript">

    var width = window.innerWidth || document.documentElement.clientWidth;
    google_ad_client = "ca-publisher-id";

    if (width >= 800) { 
       google_ad_slot = "ad-unit-1"; 
       google_ad_width = 728; 
       google_ad_height = 60; 
    } else if ((width < 800) && (width < 400)) { 
      google_ad_slot = "ad-unit-2"; 
      google_ad_width = 300; 
      google_ad_height = 250; 
    } else { 
      google_ad_slot = "ad-unit-3"; 
      google_ad_width = 468; 
      google_ad_height = 60; 
    } 
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

顺便提一下,这是一种“Google Adsense Team-approved”方法。

来源: labnol.org