使用 JavaScript 在不同的设备上投放不同的广告尺寸答案

【问题标题】：Serving Different Ad sizes On Different Devices Using JavaScript使用 JavaScript 在不同的设备上投放不同的广告尺寸
【发布时间】：2013-02-22 21:36:08
【问题描述】：

子问题是相互关联的，所以为了清楚起见，我将它们按顺序排列。

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

我不是在问 Google AdSense 的 TOS 或其他政策是否合适。我已经照顾好他们了。

我想知道的是，使用 JavaScript 来做这件事有什么缺点吗？我的意思是，它会影响 Adsense 提供的广告质量吗？还是没关系？

问题 - 2：有更好的方法吗？

(2a) 我找到了两个不同的代码 sn-ps 来实现我所需要的。我不知道哪个更可靠或更好。

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, "你不能依赖窗口宽度，因为它是不稳定的。例如，在某些 Android 上你根本不能依赖它，因为浏览器需要长达 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) 的代码 sn-p 下。

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

【问题讨论】：

关于问题1，应该没关系。展示有针对性的广告是 IMO 的明智之举。至于问题 2，您应该检查视口大小。您在示例 1 中执行了此操作。默认情况下，iPhone 的视口为 320。您在示例 3 中写的注释实际上是告诉您执行示例 1。还有另一个线程讨论了来自 javascript 的视口，您可能想查看上面有链接的答案。 Get the Browser viewport dimensions with javascript
@VictoriaFrench 感谢您的链接。如果不需要对 IE8 及以下版本的支持，则已明确表示 window.innerWidth 是可行的方法。 $(window).width(); 已经不行了，如果问题中提到的原因是真的（是吗？）。所以，要么是window.innerWidth，要么是document.documentElement.clientWidth——后者似乎更有希望。

标签： javascript viewport ads adsense

【解决方案1】：

我们开始吧：

<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 团队批准”的方法。

来源： labnol.org

【讨论】：